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.

    Estrutura do Projeto WPF Angular Estrutura do Projeto

    É importante lembrar que uma Angular aplicação é uma aplicação de página única (SPA), o que significa que há apenas uma página em todo o app, e essa é a suaindex.html. Oindex.html arquivo podia ser comparado com oApp.xaml da aplicação WPF. Ambos são globais e tudo o que você colocar lá aparecerá em todas as páginas da sua inscrição. Oindex.html arquivo contém uma seção<app-root></app-root> semelhante àStartupUri doApp.xaml arquivo e especifica a primeira página que queremos mostrar quando o app for iniciado.

    O que acontece tecnicamente é que, quando você navega até oindex.html, omain.ts arquivo JavaScript invoca que carrega oAppModule. Uma aplicação Angular é composta por módulos e componentes. Por padrão, você recebe um módulo raiz e um componente raiz, que ficam sob aapp pasta. Quando omain.ts arquivo for invocado, vamos bootstrap oAppModule, que está noapp.module.ts arquivo naapp pasta.

    O módulo do app então inicia o seu próprioAppComponent. OAppComponent é definido noapp.component.ts arquivo e seu seletor é definido paraapp-root. EleAppComponent tem seu modelo html definido noapp.component.html arquivo. Basicamente, a<app-root></app-root> seção naindex.html página visualiza o conteúdo doapp.component.html arquivo.

    Omain.ts arquivo é parecido com oApp.xaml.cs arquivo, pois é algo como um código por trás. Oapp.component.html, que é o componente padrão mostrado quando a aplicação é executada, é muito semelhante aoMainWindow.xaml do WPF.

    No WPF, temos umpackages.config arquivo que define todas as nossas dependências dos pacotes nuget, enquanto Angular possui umpackage.json arquivo que contém as dependências que sua aplicação precisa para rodar. Opackage.json arquivo também contém uma seção para scripts que você pode executar no console enquanto está testando, iniciando ou construindo seu aplicativo.

    Vamos dar uma olhada naReferences pasta. No WPF, temos umReferences nó em nossa solução que mostra todas as referências adicionadas a este projeto. Em um aplicativo Angular isso vai ser anodes_module pasta. Vindo do WPF, você pode se surpreender com a quantidade de dependências que um projeto Angular tem. Esses são povoados por usonpm.

    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 da aplicação está localizada aqui.
    • assets- contém suas imagens ou quaisquer outros ativos.
    • environment- contém informações sobre seus ambientes de construçã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 unitários.
    • style.css- folha de estilos com estilos globais para sua aplicação, é semelhante a um dicionário de recursos definido emApp.xaml no 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 forma de iniciar a aplicação é usando os comandos npm:

    npm start

    Você pode encontrar esses scripts definidos nopackage.json arquivo e modificar ostart comando adicionando a-o opção:

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

    Seu primeiro aplicativo Angular deve ter esta aparência:

    Primeiro Angular App

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.