A estrutura do AngularJS é basicamente usada em projetos front-end. Eu não sabia sobre essa estrutura antes, e foi porque assumi recentemente, então planejei aprender bem. Eu costumava ser do lado do PC, mas agora assumi o projeto móvel. A estrutura de interface do usuário móvel usa o Ionic + Vordova, mas não usa Bootstrap. Eu uso principalmente a interface do aplicativo iOS + Android. Não sei muito sobre a estrutura iônica e preciso gastar tempo para me familiarizar com ela. AngularJS Aprendendo novatos são bem -vindos para me corrigir.
O que é angularjs?
Simplificando, é uma estrutura de JavaScript que é adicionada a uma página da web através de tags de script. Ou seja, quando usamos o AngularJS, precisamos introduzir o seguinte código.
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
Geralmente, é recomendável colocar o script na parte inferior do elemento <body>, que é melhorar a velocidade de carregamento da página da web. Porque o carregamento em HTML não está sujeito a carregamento de scripts.
O que é angularjs?
O AngularJS facilita o desenvolvimento de aplicativos modernos de página única (SPAs: aplicativos de página única).
• AngularJS liga os dados do aplicativo aos elementos HTML.
• AngularJS pode clonar e repetir elementos HTML.
• AngularJS pode ocultar e exibir elementos HTML.
• AngularJS pode adicionar código "atrás" do elemento HTML.
• AngularJS suporta verificação de entrada.
Por exemplo, os terminais móveis basicamente usam comparações de página única, feitas usando a conversão de roteamento angular. Como o nosso projeto atual, também usamos uma única página. Ou seja, na página principal, as páginas saltadas são executadas na página principal. A captura de tela é a seguinte:
Expressões angulares
A expressão de AngularJS é escrita em aparelhos duplos: {{expressão}}.
As expressões AngularJS ligam dados ao HTML, que é semelhante à diretiva NG-Bind.
AngularJS "Sairá" dados no local onde a expressão é gravada.
As expressões angulares são muito parecidas com expressões de JavaScript: elas podem conter literais, operadores e variáveis.
<! doctype html> <!-tag angularjs para processar toda a página html e inicializar o aplicativo-> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> </ad Head> <body> <p> nome: {{"ting"+"feng"}} </p> <p> número: {{5+5}} </p> ng-init = "Person = {nome: 'tingfeng', idade: '13 '}"> <p> nome: {{Person.name}} idade: {{Person.age}} </p> </div> </body> </html>Aplicação de AngularJS em HTML
Estenda principalmente o HTML através do NG-Diretivo. A Diretiva AngularJS é um atributo HTML prefixado com NG, que contém quatro recursos principais: MVC, Modular, Sistema de Instrução (Diretiva) e Databinding
NG-Init: Esta diretiva inicializa as variáveis de aplicação do AngularJS. Por exemplo, as seguintes colunas:
<! Doctype html> <!-Tag AngularJS para processar toda a página HTML e orientar o aplicativo-> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.jin.jin.jin.jin.jipt.jiPt.jiPts <siPtLular> <ctrod) ng-init = "name = 'tingfeng'"> <p> nome é: <span ng-bind = "name"> </span> </p> </div> </body> </html>
NG-APP: Esta diretiva indica que um aplicativo AngularJS é definido. Geralmente colocado atrás do HTML, você também pode usar a diretiva NG-APP localmente. Por exemplo, <Div Ng-App>, o script AngularJS será executado apenas na div, o que significa que a partir daqui, todo o conteúdo é o AngularJS para a administração.
Modelo NG: Esta diretiva refere-se a valores de elemento de ligação (como o valor da caixa de entrada) ao aplicativo.
NG-Bind: Esta diretiva liga os dados do aplicativo à visualização HTML. Use as instruções correspondentes para usar o AngularJs para operar a página HTML. Vamos dar uma olhada no código de como usá -lo.
No momento, use o modelo NG para se ligar à variável do modelo setName. Ao inserir o valor na caixa de entrada, o SetName correspondente também será alterado. Você pode testá -lo sozinho.
Explicação sobre $ SCOPE
O que é $ SCOPE? Qual é a sua função? Como usá -lo?
Simplificando, o escopo é um pojo (PlainoldJavaScriptObject), semelhante a um objeto, com propriedades e métodos, o escopo é um Pojo (PlainoldJavaScriptObject), semelhante a um objeto, com propriedades e métodos, o escopo fornece relógio (), relógio () e aplica () métodos de ferramenta. O MVC do AngularJS é feito com a ajuda do $ SCOPE.
Recursos: 1. É o ambiente de execução (ou escopo) da expressão
2. O escopo é uma estrutura de árvore, paralela à etiqueta DOM, contendo um escopo, que é uma estrutura de árvore, paralela à etiqueta DOM, contendo um RootScope nele no nível superior.
3. O escopo herdará o escopo dos pais herdará as propriedades e métodos do RootScope dos pais.
4. O $ SCOPE pode propagar eventos, semelhantes ao DOM, que podem se propagar para cima ou para baixo.
5. $ escopo não é apenas a base do MVC, mas também a base para a implementação da ligação bidirecional posteriormente.
Componentes de AngularJs
Modelo: isto é, arquivos HTML e CSS escritos, mostrando a visualização do aplicativo. O AngularJS pode construir suas próprias tags HTML no HTML!
Controlador: Ao contrário do Ajax, não há necessidade de escrever um ouvinte ou controlador DOM, pois ele já está incorporado a AngularJS. Benefícios: Fácil de escrever, testar, manter e entender.
Dados do modelo: o modelo é estendido do AngularJS como atributos dos objetos de domínio. Os dados do modelo podem ser um objeto JS, uma matriz ou um tipo primitivo, mas todos pertencem a um objeto de escopo do AngularJS.
Como entender o escopo nos angulares?
Ou seja, um escopo pode ser considerado um modelo, um vínculo que trabalha em conjunto com o modelo e o controlador. O AngularJS usa o escopo e também há informações, modelos de dados e controladores no modelo. Isso pode ajudar a separar o modelo e a visualização, mas ambos são sincronizados! Qualquer alteração no modelo será refletida na exibição imediatamente e quaisquer alterações na visualização serão refletidas no modelo imediatamente.
Visualização: No AngularJS, uma visualização é o mapeamento depois que o modelo é renderizado através do modelo HTML. Não importa, quando o modelo muda, o AngularJS atualiza os pontos de junção em tempo real e atualiza a visualização.
É mais intuitivo postar códigos!
<! doctype html> <html ng-app = "hellaangular"> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min. []); －Control Modelo HelloAngarMyModule.Controller ("HelloAngaLular", ['$ SCOPE', FUNCIONALOANGULAR ($ SCOPE) {$ SCOPE.VALUE = {Nome: 'Jiangting'};}]); </script> </ad Head> <body> <!-MVC-View Angular-> <Div Ng-CONTROLLER = "Hellaangular"> －O controlador é helloAngulular <P> {{value.name}}, hello!Vamos dar uma olhada na aplicação do controlador, ou seja, controlador, ou seja, o controlador opera dados, vincula -os e o exibe na página HTML.
O módulo AngularJS (módulo) define aplicações AngularJS.
O controlador AngularJS (controlador) é usado para controlar as aplicações AngularJS.
A diretiva NG-APP define o aplicativo e o controlador NG define o controlador. Vamos usar as colunas acima para visualizar:
Módulo AngularJS define aplicativos:
var mymodule = angular.module ("hellaAngulular", []); － Modelo de controle HelloAngaLularAplicativo de controle do controlador AngularJS:
myModule.Controller ("Hellaangular", ['$ SCOPE', função HelloAngaLular ($ scope) {$ scope.value = {name: 'jiangting'};}]);Entenda o MVC front-end
Sobre recursos do controlador:
1. Não tente pegar o controlador, um controlador geralmente é responsável apenas por uma pequena visão.
2. Não opere o DOM diretamente no controlador, não é de sua responsabilidade
3. Não faça operações de filtragem de dados no controlador, existe um serviço de filtro
4. Não formate os dados no controlador, Ng tem controles de formulário muito úteis
5. O controlador não se ligará. A interação entre controladores será realizada através de eventos. Será através do serviço de filtro. 4. Não formate os dados no controlador. Existem controles de forma muito úteis. 5. O controlador não se ligará. A interação entre controladores será realizada através de eventos. Será realizado através do escopo.
Vamos ver como personalizar o sistema de comando, o código é o seguinte:
<! doctype html> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> <cript> // Sistema de instrução !
Na diretiva, existem três parâmetros retornados posteriormente, onde o modelo do modelo se refere à tag html inserida. Agora vou escrever um pedaço de código HTML e ver como escrevê -lo no AngularJS.
O código HTML estático original é o seguinte:
<ul> <li> <span> new1 </span> <p> Apenas uma página de teste1 </p> </li> <li> <span> new2 </span> <p> apenas uma página2 </p> </li> </ul>
A maneira de modificá -lo para AngularJS é a seguinte:
<! doctype html> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> <cript> // $ escopo // Escopo AngularJS: pode ser considerado um modelo. Após o início do aplicativo, um escopo de raiz será criado e o escopo do controlador é um sucessor típico do escopo da raiz. function newsctrl ($ scope) {$ scope.News = [{"content": "new1", "Introduce": "apenas uma página1"}, {"content": "new2", "introduce": "apenas uma página 2"}]; vírgulas};} </sCript> </ad Head> <Body ng-CONTROLLER = "NewsCtrl"> <ul> <li ng-repeat = "novo em notícias"> {{new.Content}} <p> {{new.introd}}//p> </li> </ul>O exposto acima é a análise dos recursos básicos do AngularJS apresentado a você pelo editor (i). 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!