AngularJS Bootstrap Explicação detalhada e código de amostra

Autor：Eve Cole Data da Última Atualização：2025-08-28 04:00:03

O primeiro artigo da série de notas de estudo do AngularJS, espero poder continuar escrevendo. O conteúdo deste artigo vem principalmente do conteúdo do documento http://docs.angularjs.org/guide/, mas também adiciona alguns de seus próprios resultados de entendimento e tentativa.

1. Resumo

Este artigo explica o processo de inicialização angular e como inicializar manualmente o Angular quando você precisar.

2. Tag <Script> angular

Este exemplo é usado para mostrar como integrar o Angular através do caminho recomendado para obter uma inicialização automática.

 <! doctype html> <html xmlns: ng = "http://angularjs.org" ng-app> <body> ... <script src = "angular.js"> </body> </html>

Coloque a tag Sciprt na parte inferior da página. Isso pode impedir o carregamento de HTML carregando o Angular.js, reduzindo assim o tempo de carregamento do aplicativo. Podemos obter a versão mais recente do AngularJS em http://code.angularjs.org. Por motivos de segurança, não consulte diretamente este endereço no produto para carregar o script. Mas se for apenas para pesquisa e aprendizado, não importa se é uma conexão direta.

Selecione: Angular- [versão] .js é uma versão conveniente de ler e é adequada para desenvolvimento diário e depuração.

Selecione: Angular- [versão] .min.js é uma versão compactada e ofusca que é adequada para uso no produto final.

Coloque "ng-app" no nó raiz do aplicativo. Se você deseja que o Angular inicie automaticamente seu aplicativo, geralmente pode colocá -lo na tag <html>.

Se precisarmos usar a sintaxe da diretiva antiga no estilo da escola "ng:", precisamos adicionar um espaço XML-Names à tag html a "por favor" o IE. (Esta é uma razão histórica, e não recomendamos usar NG :)

3. Inicialização automática

O Angular será inicializado automaticamente no evento DomContentLoaded, e o Angular encontrará o nó raiz do aplicativo especificado por você através da diretiva NG-APP. Se encontrado, o Angular fará o seguinte:

Diretivas de carga relacionadas ao módulo.

Crie um injetor relacionado ao aplicativo (Gerenciador de dependência).

Especifique o nó raiz com NG-App e inicie o trabalho de "compilação" relevante do DOM. Em outras palavras, uma parte da página (não <html>) pode ser usada como nó raiz, limitando assim o escopo do angular.

 <! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <titter> bootstrap-auto </title> <style type = "text/css"> .ng-cloak {display: nenhum; nenhum; } </style> </adhead> <body> Aqui está o exterior do ng-app ~~ {{1+2}} <div ng-app> aqui está o interior do ng-app ~~~ {{1+3*2}} </div> <script src = "/ angular -.0.1.js " type = "text/javascript"> </script> </body> </html>

O NOT: O "Ng-Cloak" é usado antes que a compilação do Angular.js seja concluída (sim! Isso mesmo! É antes que a compilação seja concluída, não antes da carga do AngularJs. Portanto, se você deseja que você não use o processo que não se seleciona, ou que você não se sinta, ou que você se sinta, ou que você não se sinta, ou que você se sinta, ou que você se sinta, ou que você se sinta, a melhor maneira de que você não se sinta, ou que você se sinta, a melhor maneira de que você se sinta, ou que você se sinta, ou que você se sinta, ou que você se sinta, ou que você não use o processo, ou que você se sinta, ou que você se sinta, ou que você se sinta, ou que você se sinta, ou que você se sinta, ou que você se sinta, a melhor maneira de que você não use o processo de que não se sinta. Método "ng-cloak".

4. Inicialização manual

Se quisermos controlar ainda mais o processo de inicialização (por exemplo, você precisa carregar o Angular.js através do carregador de scripts ou fazer algumas operações antes da página de compilação angular), podemos usar um método de inicialização manualmente chamado.

O exemplo a seguir é equivalente ao uso de NG-App, a diretiva:

 <! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap-manual </title> <style type = "text/css"> .ng-cloak {display: nenhum; } </style> </ad Head> <body> Aqui está o exterior do ng-app ~~ {{1+2}} <div id = "rootofapp"> Este é o interior de ng-app ~~~ {{1+3*2}} </div> <script src = "/ angular-1.0.1.js "typen = <script src = "/ripc-1.0.1.js" type = "text/javascript"> angular.Element (document) .ready (function () {angular.bootstrap (angular.Element (document.getElementById ("rootofapp")));}); </script> </body> </html>

Ou seja, nosso código pode ser escrito nas etapas a seguir:

1. Depois que a página e outro código são carregados, encontre o nó raiz do modelo de aplicação;

2. Ligue para o Angular.Cootstrap e deixe compilar o modelo em um aplicativo de ligação bidirecional executável!

Continuaremos a adicionar artigos relevantes no futuro. Obrigado pelo seu apoio a este site!