Criar um aplicativo Angular

    Saiba como começar a criar um aplicativo Angular ao migrar do WPF para o Angular.

    Prerequisites

    Para começar a escrever Angular aplicativos, você precisa instalar o Node.js e o gerenciador de pacotes npm. Node.js é um ambiente de tempo de execução JavaScript que executa código JavaScript fora de um navegador. Para obter Node.js, vá para nodejs.org. O NPM é um gerenciador de pacotes semelhante ao gerenciador de pacotes NuGet para .NET. Ele é instalado com Node.js por padrão. Você também precisará de um IDE. Um dos melhores ambientes para desenvolver aplicativos Angular é o Visual Studio Code. É gratuito, de código aberto e funciona em todas as plataformas. Você pode obtê-lo com code.visualstudio.com.

    Create new project

    Se você é um desenvolvedor do WPF, criar novos projetos dentro do Visual Studio é bastante simples. Basta clicar em Arquivo -> Novo Projeto, selecionar o tipo de projeto, dar um nome a ele e pressionar OK. Como você está entrando no mundo Angular, deseja criar um novo projeto dentro do Visual Studio Code. No entanto, não há nenhuma nova opção de projeto aqui e isso ocorre porque o Visual Studio Code é baseado em arquivo e não em projeto. Para criar um novo aplicativo Angular, vamos usar o prompt de comando.

    Primeiro, você precisará instalar a Angular CLI.

    npm install -g @angular/cli

    Em seguida, navegue no prompt de comando até a pasta onde deseja que seu aplicativo seja criado e execute o seguinte comando:

    ng new demo-app

    Seremos solicitados "Gostaríamos de adicionar Angular roteamento?". Para esta demonstração, escolheremos NÃO. Em seguida, somos questionados sobre qual formato de folha de estilo gostaríamos de usar. Vamos ficar com o CSS básico por enquanto. Demora alguns minutos, mas eventualmente o processo será concluído e seu novo aplicativo será criado no disco.

    Agora temos que alterar os diretórios para a pasta demo-app que acabou de ser criada e executar um comando para abrir o Visual Studio Code.

    cd demo-app
code .

    Isso iniciará uma nova instância do Visual Studio Code que contém seu aplicativo Angular. Agora, esta é provavelmente a parte que é provavelmente a mais esmagadora para os desenvolvedores de desktop que tentam aprender Angular- a estrutura de pastas.

    Project structure

    Vamos dar uma olhada em cada um desses arquivos e ver como eles se relacionam com um aplicativo WPF. A melhor maneira de fazer isso é comparar cada projeto lado a lado. À esquerda, temos nosso aplicativo WPF. À direita, temos nosso aplicativo Angular.

    É importante ter em mente que um aplicativo Angular é um aplicativo de página única (SPA), o que significa que há apenas uma página em todo o aplicativo, e essa é a sua index.html. O index.html arquivo pode ser comparado ao App.xaml do aplicativo WPF. Ambos são globais e tudo o que você colocar lá aparecerá em todas as páginas do seu aplicativo. O index.html arquivo contém uma seção <app-root></app-root> semelhante à StartupUri do App.xaml arquivo e especifica a primeira página que queremos mostrar quando o aplicativo for iniciado.

    O que acontece tecnicamente é que quando você navega até o index.html, o main.ts arquivo JavaScript invoca o que carrega o AppModule. Um aplicativo Angular é composto de módulos e componentes. Por padrão, você obtém um módulo raiz e um componente raiz e eles estarão localizados sob a app pasta. Quando o main.ts arquivo for invocado, vamos inicializar o AppModule, que está no app.module.ts arquivo na app pasta.

    Em seguida, o módulo do aplicativo inicializa o seu próprio AppComponent. O AppComponent é definido no app.component.ts arquivo e seu seletor é definido como app-root. O tem AppComponent seu modelo html definido no app.component.html arquivo. Basicamente, a <app-root></app-root> seção da index.html página visualizará o conteúdo do app.component.html arquivo.

    O main.ts arquivo é semelhante ao App.xaml.cs arquivo, pois é algo como um code-behind. O app.component.html, que é o componente padrão mostrado quando o aplicativo é executado, é muito semelhante ao MainWindow.xaml no WPF.

    No WPF, temos um packages.config arquivo que define todas as nossas dependências para pacotes nuget, enquanto Angular tem um package.json arquivo que contém as dependências que seu aplicativo requer para ser executado. O package.json arquivo também contém uma seção para scripts que você pode executar no console quando estiver testando, iniciando ou construindo seu aplicativo.

    Vamos dar uma olhada na References pasta. No WPF, temos um References nó em nossa solução que mostra todas as referências adicionadas a este projeto. Em um aplicativo Angular, essa será realmente a nodes_module pasta. Vindo do WPF, você pode se surpreender com quantas dependências um projeto Angular tem. Eles são preenchidos usando npm.

    Infelizmente, aqui as semelhanças terminam. Vejamos alguns dos outros arquivos e pastas gerados:

    • e2e- significa teste de ponta a ponta e contém testes de integração ou testes com cenários do mundo real, como um processo de login.
    • src- A maior parte do código do aplicativo está localizada aqui.
    • assets- contenha suas imagens ou quaisquer outros ativos.
    • environment- contém informações sobre seus ambientes de compilação.
    • favicon.ico- o ícone que aparece no navegador quando você está no seu site.
    • karma.conf.js- contém configuração para os testes de unidade.
    • style.css- folha de estilo com estilos globais para seu aplicativo, é semelhante a um dicionário de recursos definido no App.xaml WPF.

    Run the application

    Agora estamos prontos para executar o aplicativo, mas no Visual Studio Code você não pode simplesmente pressionar F5. Vamos abrir o Terminal do Visual Studio Code clicando no menu Terminal -> Novo Terminal ou pressionando Ctrl + Shift + `. Para executar o aplicativo, você deve executar o seguinte comando:

    ng serve

    Depois que o aplicativo for iniciado, você poderá abri-lo no navegador no seguinte URL http://localhost:4200/. Se você quiser que seu aplicativo seja aberto automaticamente no navegador, use o seguinte comando:

    ng serve -o

    Neste caso-o, significa aberto. Outra maneira de iniciar o aplicativo é usando os comandos npm:

    npm start

    Você pode encontrar os scripts definidos no package.json arquivo e modificar o start comando adicionando a-o opção:

      "scripts": {
    "ng": "ng",
    "start": "ng serve -o",

    Seu primeiro aplicativo Angular deve ter esta aparência:

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.