Na seção anterior, a estrutura do JS angular é introduzida brevemente. Nesta seção, serão continuados os mecanismos de bootstrap (bootstrap) e compilador (compilação).
1: Bootstrap: Inicialização Angular
1: A automação inicial recomendada pelo Angular é a seguinte:
<! doctype html> <html xmlns: ng = "http://angularjs.org" ng-app> <body> ... <script src = "angular.js"> </body> </html
Use o NGAPP para marcar o nó raiz, onde você precisa inicializar automaticamente o aplicativo, que geralmente é uma tag HTML. Quando o evento DomContentLoaded desencadeia o Angular, ele encontrará automaticamente o NGAPP como o nó raiz do aplicativo. Se for encontrado, as seguintes operações serão executadas:
1. Diretiva relacionada ao módulo de carga (módulo) (instruções).
2. Crie um injetor de aplicação (mecanismo de injeção do Angular).
3. Compilar e processar NG-App como as instruções do nó raiz. Isso permite que você personalize a seleção do nó DOM como o nó raiz do aplicativo.
<! doctype html> <html ng-app = "optionAmoduleName"> <body> Eu posso adicionar: {{ +}}.2: Inicialização manual:
Se você deseja ter mais controle sobre a inicialização, pode usar um método de inicialização manual personalizado para inicializar em vez da inicialização automática do Angular. Por exemplo, você precisa fazer algo antes da compilação angular do modelo, como alterar certos conteúdos do modelo. O método de inicialização manual será o seguinte:
<! doctype html> <html xmlns: ng = "http://angularjs.org"> <body> hello {{'World'}}! {angular.bootstrap (document);}); </script> </body> </html>1. Depois que todo o código da página é carregado, encontre o nó raiz do modelo HTML (elemento típico do documento).
2. Call api/angular.bootstrap (angular.bootstrap (elemento [, módulos])) para compilar o modelo para torná -lo executável.
Dois: Compilador: Tradução do Angular
O mecanismo de compilação da Angular permite que os desenvolvedores adicionem uma nova sintaxe HTML ao navegador, permitindo -nos adicionar alguns nós HTML, atributos e até criar alguns nós, atributos personalizados. O Angular expande esses comportamentos em diretrizes. O angular traz diretrizes úteis e nos permite criar diretivas específicas de domínio.
1: O processamento do compilador é dividido em duas etapas:
1. Converta o DOM, colete a função Diretiva e Retorno Link (conexão).
2. Mescome as instruções e o escopo para gerar uma visão viva. Quaisquer alterações no modo de escopo serão refletidas nas interações de visualização e o usuário da visualização também serão sincronizadas com o modelo de escopo, e o escopo é uma única fonte de dados.
2: Comando de diretiva
A Diretiva é um ato que será processado pela edição especial de design HTML. Ele pode ser colocado nos nomes, atributos, classe do nó ou mesmo no comentário HTML. Aqui está o método de escrita equivalente de NG-Bind de Angular:
<span ng-bind = "exp"> </span> <pan> </span> <ng-bind> </ng-bind> <!-Diretiva: ng-bind exp>
A diretiva é apenas uma função que será executada pelo Angular no DOM. Aqui está um exemplo de arrastar e gotas que podem ser aplicadas ao atributo de Span e Div:
angular.module ('arrastar', []). Direcção ('draggable', function ($ document) {var startx =, starty =, x =, y =; função de retorno (escopo, elemento, att) {element.css ({position: 'relativa', borda: 'px sólido', bordercolor ''; (Evento) {Startx = Evento.Screenx - X; x + 'px'});Demonstração
Você pode arrastar e me mover para qualquer lugar!
3: Veja a compreensão
Muitos motores de modelo são projetados para mesclar modelos e modelos para retornar uma string e, em seguida, anexar ao nó DOM usando o InnerHTML, que se pensa que quaisquer alterações nos dados devem ser reformuladas para gerar novo conteúdo e anexado ao DOM. A figura a seguir pertence à tecnologia de ligação unidirecional:
Angular não usa instruções diretivas em vez de cordas. O valor de retorno é uma função de link que mescla o modelo de dados. A ligação de visão e modelo é automática e transparente e não exige que os desenvolvedores adicionem ações adicionais para atualizar a visualização. Angular não é apenas uma ligação do modelo de dados, mas também um conceito de comportamento. Como uma ligação bidirecional, a forma é a seguinte:
material:
1. Site oficial angular: http://angularjs.org/
2. Download de código: https://github.com/angular/angular.js
O exposto acima está o bootstrap angular e os mecanismos de compilador apresentados a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!