Eu assisti a um vídeo sobre o AngularJS. O conteúdo do vídeo explica como criar um spa na forma de lista de tarefas (aplicativo simples de página). Para melhorar a compreensão, um artigo é escrito abaixo para revisar e consolidar.
Preparar
AngularJS Download
É chamado de download, mas na verdade, desde que você possa fazer referência ao AngularJS em nossa página. Pode haver o seguinte método.
Aceleração de CDN
Também é possível usar serviços domésticos de aceleração de CDN.
Copie o código da seguinte forma: <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </sCript>
Método NPM
Também é bastante conveniente usar a ferramenta de gerenciamento de pacotes do NodeJS, basicamente pode ser feita em duas etapas.
Primeiro, digite a pasta onde vamos escrever o código.
• Instale o AngularJS: NPM Instale Angular
• Introduzido para usar na página:
<!-Este endereço SRC depende da sua própria situação->
<script src = "node_modules/angular/angular.js"> </script>
Maneira convencional
O método convencional é baixar manualmente arquivos relevantes e depois apresentá -los manualmente, porque é bastante pesado. Não há mais narrativa aqui.
Download de Bootstrap
Como uma estrutura de front-end muito popular e moderna, o Bootstrap é um sucesso. Endereço para download
Reserva de conhecimento
Arquitetura MVC
O núcleo do AngularJS adota a arquitetura MVC e os aplicativos orientados a eventos. Eu sou apenas novo nisso, então não entendo muito bem. Se houver algum erro, espero que o blogueiro aponte.
ng-app
Como mordomo de toda a página única, o aplicativo significa aplicativo e o significado do aplicativo. Nosso serviço de página única atua como um aplicativo.
De um modo geral, o NG-App deve ser aninhado como o contêiner pai do controlador NG. Caso contrário, os resultados esperados podem não aparecer
controlador ng
O controlador, o homem direito aplicado na página, e a existência do controlador simplifica o acoplamento entre os módulos, tornando o código que escreve mais padronizado e simples.
Modelo Ng
Durante o processamento do modelo, geralmente liga e sai com os elementos da página para obter um efeito de página sem atualização.
Base de evento
ng-clique
Em nosso aplicativo de página única, os elementos que declaram esse atributo têm a função de eventos de clique. Quanto à parte das funções chamadas, elas estão realmente relacionadas ao contêiner onde o elemento está localizado.
Ou seja, a função correspondente ao evento de clique é o código gravado no controlador relevante para concluir uma função específica.
Código completo
O código detalhado deste exemplo é postado abaixo
main.js
(function(window){ // Register an application main module var todoapp = window.angular.module('todoapp',[]); // Register the controller// window.angular.module('todoapp') todoapp.controller('maincontroller' ,['$scope',function($scope){ // The function of $scope is to add elements to the view// The value in the text box $ scope.text = ''; $ scope.text.trim (); Exclua} // Obtenha o número de eventos concluídos e implemente -o de acordo com a seleção da caixa de seleção // Como a página é alterada dinamicamente, você precisa usar funções ou simplesmente usar a ligação do modelo, mas que será um pouco problemático $ scope.DoneCount.filter = () {// Use Filter) Os dados atendem às condições e o evento foi concluído});Todolist.html
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> angularjs integrar a lista de tarefas de implementação de bootstrap </title> <!-Introdução a bootstrap-> <link href = http:/paps.bdimg.com/libs/BOTSTSTRAP/BOTSAPS/BSTRAP/BSTRAP/BSTRAPs/link = http:/0 rel = "Stylesheet"> <Toy> .Container {max-width: 720px; } .done {color: #cca; } .CheckBox {margem-direita: 12px; Margin-Bottom: 0; } .DONE> .CHECKBOX> LABEL> SPAN {Decoração de texto: linha-through; } </style> <script src = "node_modules/angular/angular.js"> </script> <script src = "myjs/app.js"> </cript> </head> <body> <Div Ng-App = "ToppApp"> <h1> </h1s> ng-Controller = "MainController"> <!-Para obter uma interface de boa aparência, o controle de formulário é usado-> <Form> <input type = "text" ng-model = "text" name = ""> </span> <botão ng-click = "Add ()"> </button> </span> </form> <ulyy = " ng-class = "{'done': item.done}" ng-repeat = "item em Todolist"> <botão tipo = "botão" aria-label = "Close" ng-click = "delete (item)"> <span-hidden = "true"> × </span> </span) ng-model="item.done"> <span>{{item.text }}</span> </label> </div> </li> </ul> <p> A total of <strong>{{todolist.length }}</strong> tasks have been completed</strong> </p> </section> </div></body></html>Efeito de página
Explicação detalhada do código
A camada mais externa de código no código pode ter um bom efeito como um espaço temporário e impedir a poluição por namespace.
(function (janela) {// para fazer algo}) (janela)Observe que a última (janela) é indispensável.
Criar um aplicativo
// Registre um módulo principal de um aplicativo
vardoapp = window.angular.module ('TODOAPP', []);
Criar um controlador
TODOAPP.Controller ('MainController' // O escopo $ aqui também desempenha o papel de um contêiner e declara a faixa visível da variável., ['$ escopo', função ($ scope) {// a função de $ scope é adicionar elementos à view // o valor da caixa de texto $ Adicione uma string de listas $ scope.todolist = [{text: 'angularjs', feito: false}, {text: 'bootstrap', feito: false}];Melhorar as funções da função
// Adicione uma função para responder à interação $ scope.add = function () {var text = $ scope.text.trim (); if (text) {$ scope.todolist.push ({text: text, feito: false}); $ scope.Text = ''; }} // Clique no evento de resposta $ scope.Delete = function (TODO) {var index = $ scope.todolist.indexof (TODO) $ scope.todolist.splice (index, 1); // para excluir a página, mas o número de eventos e o implemento de acordo com a seleção da seleção, //, desde a seleção // um pouco problemático $ scope.doneCount = function () {// Use o filtro para implementar var temp = $ scope.todolist.filter (function (item) {return item.done; // retorna true para indicar que os dados atuais atendem às condições e o evento foi concluído}); retornar temp.length; }Resumir
Não há muitos códigos e pensamentos profundos.
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.