Vi un video sobre Angularjs. El contenido de video explica cómo crear un spa en forma de lista de TODO (aplicación de página simple). Para mejorar la comprensión, un artículo se escribe a continuación para revisar y consolidar.
Preparar
Descargar angularjs
Se llama una descarga, pero de hecho, siempre que pueda hacer referencia a Angularjs en nuestra página. Puede haber el siguiente método.
Aceleración de CDN
También es posible utilizar servicios nacionales de aceleración de CDN.
Copie el código de la siguiente manera: <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
Método NPM
También es bastante conveniente usar la herramienta de administración de paquetes de NodeJS, básicamente se puede hacer en dos pasos.
Primero, ingrese la carpeta donde vamos a escribir el código.
• Instalar AngularJS: NPM Instalar Angular
• Introducido para usar en la página:
<!-Esta dirección SRC depende de su propia situación->
<script src = "node_modules/angular/angular.js"> </script>
Forma convencional
El método convencional es descargar manualmente archivos relevantes y luego presentarlos manualmente, porque es bastante engorroso. No hay más narrativa aquí.
Descarga de bootstrap
Como un marco frontal muy popular y moderno, Bootstrap es un éxito. Dirección de descarga
Reserva de conocimiento
Arquitectura MVC
El núcleo AngularJS adopta la arquitectura MVC y las aplicaciones basadas en eventos. Solo soy nuevo, así que no lo entiendo muy bien. Si hay algún error, espero que el blogger lo señale.
APP NG
Como el mayordomo de toda la página, la aplicación significa aplicación y el significado de la aplicación. Nuestro servicio de una sola página actúa como una aplicación.
En términos generales, NG-APP debe anidarse como el contenedor principal del controlador NG. De lo contrario, los resultados esperados pueden no aparecer
ng-controlador
El controlador, el hombre de la derecha aplicada en la página, y la existencia del controlador simplifica el acoplamiento entre módulos, lo que hace que la escritura de código sea más estandarizada y simple.
modelo
Durante el procesamiento del modelo, generalmente se unirá y emitirá con elementos de página para lograr un efecto de página sin actualizar.
Base de eventos
hinchazón
En nuestra aplicación de una sola página, los elementos que declaran este atributo tienen la función de los eventos de clic. En cuanto a qué parte de las funciones que se llaman, en realidad están relacionadas con el contenedor donde se encuentra el elemento.
Es decir, la función correspondiente al evento de clics es el código escrito en el controlador relevante para completar una función específica.
Código completo
El código detallado para este ejemplo se publica a continuación
Main.js
(function (Window) {// registra un módulo principal de aplicación var toDoApp = window.angular.module ('toDoApp', []); // Registre el controlador // window.angular.module ('toDoApp') toDoApp.controller ('principalController', ['$ scope', function ($ scope) {// la función de $ scope a agregar el upope/ la vista a la vista/ En el cuadro de texto $ scope.text = ''; $ scope.text.trim (); $ scope.todolist.splice (índice, 1); // Para eliminarlo} // obtener el número de eventos completos e implementarlo de acuerdo con la selección de la casilla de verificación // Dado que la página se cambia dinámicamente, debe usar funciones o simplemente usar la vinculación del modelo, pero eso será un poco problemático $ Scope.donecount = function () {// usar Filtro para implementar VAR TEMP = $ scope.todolist.filter (function (item) {return item.done; // return verdadero para indicar que los datos actuales cumplen con las condiciones y el evento se ha completado});Todolist.html
<! DocType html> <html> <fead> <meta charset = "utf-8"> <title> AngularJS Integrate Bootstrap Lista de tareas de implementación </title> <!-Introducción de bootstrap-> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/cs./BOBOPSS". rel = "stylesheet"> <style> .container {max-width: 720px; } .done {color: #cca; } .checkbox {margin-right: 12px; Botón de margen: 0; } .done> .checkbox> etiqueta> span {text-decoration: line-through; } </style> <script src = "node_modules/angular/angular.js"> </script> <script src = "myjs/app.js"> </script> </head> <body> <div ng-app = "toDoapp"> <Header> <H1> ng-Controller = "principalController"> <!-Para lograr una interfaz de buen aspecto, se usa el control de formulario-> <form> <input type = "text" ng-model = "text" name = ""> <span> <button ng-click = "add ()"> add </botte> </span> </form> <ul style = "almohd ng-class = "{{'ded': item.done}" ng-repeat = "item in toDolist"> <button type = "botón" aria-label = "cerrar" ng-chick = "eliminar (elemento)"> <span aria-hidden = "true"> × </span> <span> Close </span> ng-model = "item.done"> <span> {{item.text}} </span> </label> </div> </li> </ul> <p> Un total de <strong> {{toDolist.length}} </strong> Las tareas se han completado </strong> </p> </sect> </iv> </body> </html>Efecto de página
Explicación del código detallado
La capa más externa de código en el código puede tener un buen efecto como espacio temporal y evitar la contaminación del espacio de nombres.
(función (ventana) {// para hacer algo}) (ventana)Tenga en cuenta que la última (ventana) es indispensable.
Crear una aplicación
// registrar un módulo principal de aplicación
var toDoApp = Window.angular.module ('TODOAPP', []);
Crear un controlador
TODOAPP.Controller ('principalController' // El alcance $ aquí también juega el papel de un contenedor y declara el rango visible de la variable., ['$ scope', function ($ scope) {// La función de $ alcance es agregar elementos a la vista // el valor en el cuadro de texto $ scope.toxt = '';// a dos vías de datos se utilizará el tipo de datos de la página para la página. Agregue manualmente una cadena de listas $ scope.todolist = [{text: 'Angularjs', Done: False}, {Text: 'Bootstrap', Done: False}];Mejorar las funciones de la función
// Agregar una función para responder a la interacción $ scope.add = function () {var text = $ scope.text.trim (); if (text) {$ scope.todolist.push ({text: text, ded: false}); $ scope.text = ''; } } // Click the response event $scope.delete = function(todo){ var index = $scope.todolist.indexOf(todo) $scope.todolist.splice(index,1);// To delete it} // Get the number of completed events and implement it according to the selection of checkbox// Since the page changes dynamically, you need to use functions, or simply use model binding, but that será un poco problemático $ scope.donecount = function () {// use filtro para implementar var temp = $ scope.todolist.filter (function (item) {return item.done; // return verdadero para indicar que los datos actuales cumplen con las condiciones y el evento se ha completado}); return temp.length; }Resumir
No hay muchos códigos y pensamientos profundos.
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.