Bootstrapping no Angular

Name: Bootstrapping no Angular
Author: Michaela Ochnich

Este capítulo irá explicar como o quadro angular executa uma aplicação e coloca-a em funcionamento no navegador. Aprenderás como angular automaticamente bloqueia uma aplicação por padrão, bem como como implementar o bootstrapping manual para a aplicação.

Preview the first lesson free — get full access to all 3 lessons.

Solicitar uma demonstração Entrar

Curso: sob demanda

Nesta lição, vou apresentar Processo de bootstrap de aplicativo do Angular. Bootstrapping é o processo de lançamento e carregar o aplicativo no navegador para o usuário Então aqui eu tenho um aplicativo inicial que foi criado usando o Angular CLI e está atualmente em execução e no navegador aqui, você pode ver que o modelo inicial está sendo exibido. Estou clicando em inspecionar, você pode ver todos os elementos HTML DOM e tudo o que é renderizado aqui. Mas se você visualizar o arquivo de origem, você verá que este é um arquivo muito mais curto que esta página começou como. Existem algumas informações básicas de cabeçalho aqui, e, em seguida, esta raiz do aplicativo seletor de componente único. Este é o componente raiz do aplicativo. A maioria dos aplicativos angulares tem um componente raiz como este, esse componente tem componentes aninhados, que terá componentes aninhados e dependências próprias, e tudo isso constrói uma árvore de componentes estruturais que compõe seu aplicativo Angular. Também há cinco arquivos JavaScript aqui, há tempo de execução, polyfills, estilos, fornecedores e principal. O tempo de execução é um arquivo Webpack, que é o software que o Angular usa para ajudar a construir e agrupar módulos para servir ao navegador. Polyfills contém scripts para suportar os diferentes tipos de navegadores, e estilos são estilos globais compilados para o aplicativo. O fornecedor então contém scripts angulares bem como outros scripts de dependência de biblioteca. E main.js contém o código para seu aplicativo angular, e este arquivo é transpilado do arquivo main.ts no código-fonte do seu projeto. Agora vou mudar para o código do Visual Studio e abra o arquivo main.ts, que está na pasta de origem, e neste arquivo, você verá esta linha chamando o método do módulo de bootstrap. Esta linha é o que começa a inicializar o aplicativo para o navegador, começando com o módulo que é passado para o método aqui. Este módulo é o módulo de rota para o aplicativo, e é o ponto de partida para o Angular carregar todos os outros módulos e dependências. E este módulo contém aquele componente raiz que estava no arquivo de origem. Então, o arquivo index.HTML é o arquivo que os navegadores procuram e carregue primeiro, quando um usuário navegar para o seu site. Este foi o arquivo de origem que foi visualizado no navegador. O aplicativo inicializado é injetado no DOM usando este ponto de entrada aqui, o seletor para o componente de rota. E para os scripts que estavam no final do arquivo de origem são adicionados pelo angular após o processo de construção. Primeiro, ele deve transpilar todo o código TypeScript em JavaScript antes de exibi-lo no navegador. Isso é tudo para esta lição, introduzindo aplicativo, bootstrapping, e confira a próxima lição para aprender mais sobre Processo de bootstrapping automático do Angular.

Intermediário Fornecedor : Michaela Ochnich 3 lições · 13m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Chinese

Descrição do curso

Este capítulo irá explicar como a estrutura Angular inicializa uma aplicação e o executa no navegador. Aprenderás como o Angular inicializa automaticamente uma aplicação por padrão, bem como a forma de implementares a inicialização manual para tua aplicação.

O Que Você Vai Aprender

Compreender como o framework Angular inicia uma aplicação e a executa no navegador
Explorar o processo geral de inicialização em Angular
Aprender como Angular inicia automaticamente uma aplicação por padrão
Implementar inicialização manual para sua aplicação Angular

Principais Conclusões

Este capítulo explica como o framework Angular inicia uma aplicação e a coloca funcionando no navegador.
Angular inicia automaticamente uma aplicação por padrão.
A inicialização manual pode ser implementada para controlar como sua aplicação inicia.
O capítulo abrange um panorama de inicialização junto com abordagens de inicialização automática e manual.

Perguntas Frequentes

O que este curso abrange?

Ele explica como o framework Angular inicia uma aplicação e a coloca funcionando no navegador, incluindo inicialização automática por padrão e como implementar inicialização manual.

Quais lições estão incluídas?

O curso inclui três lições: Panorama de Inicialização, Inicialização Automática e Inicialização Manual.

Quais habilidades vou ganhar com este curso?

Você trabalhará com Angular (Web Framework), Angular UI, Application Frameworks, Bootstrap (Front-End Framework), Bootstrap Protocol e bootstrapping.

Qual é a diferença entre inicialização automática e manual neste curso?

O curso mostra como Angular inicia automaticamente uma aplicação por padrão, bem como como você mesmo pode inicializar manualmente uma aplicação.