Aplicación AngularJS
Ahora es el momento de crear una aplicación web de una sola página de AngularJS real (SPA).
Ejemplo de aplicación AngularJS
Has aprendido lo suficiente sobre AngularJS y ahora puedes comenzar a crear tu primera aplicación AngularJS:
Cuenta de palabras restante: 100
Explicación de la aplicación
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <cuerpo ng-app = "mynoteapppppppppppppppppppppppppppppppppppppppppppp ng-concontroller = "mynotectl"> <h2> mis notas </h2> <textarea ng-model = "mensaje" cols = "40" Rows = "10"> </sextarea> <p> <button ng-click = "guardar ()"> guardar </botte> <botón ng-click = "clear ()"> clear </boton> </p> <p> RECHOLE: RETIRS ng-bind = "Left ()"> </span> </p> <script src = "myNoteApp.js"> </script> <script src = "mynotectl.js"> </script> </body> </html>
Resultados de ejecución:
Cuenta de palabras restante: 100
Archivo de aplicación "myNoteApp.js":
var app = angular.module ("mynoteApp", []);
Archivo del controlador "myNotectl.js":
app.controller ("mynotectl", function ($ scope) {$ scope.message = ""; $ scope.left = function () {return 100 - $ scope.message.length;}; $ scope.clear = function () {$ scope.message = "";}; $ scope.save = function () {alerta ("nota");El elemento <html> es el contenedor para la aplicación AngularJS: ng-app = "myNoteApp":
<html ng-app = "myNoteApp">
<Viv> es el alcance del controlador en la página HTML: ng-confontroller = "mynotectl":
<div ng-confontroller = "mynotectl">
La Directiva NG-Model se une a <ExteAea> al mensaje variable del controlador:
<TextAREA ng-model = "Mensaje" cols = "40" Rows = "10"> </extAREA>
Dos eventos de clic ng llaman a las funciones del controlador claro () y guardar ()::
<botón ng-click = "guardar ()"> guardar </button> <button ng-click = "clear ()"> clare </button>
La Directiva NG-Bind une la función del controlador izquierda () a <span> para mostrar los caracteres restantes:
Número de caracteres que quedan: <span ng-bind = "left ()"> </span>
El archivo de la biblioteca de aplicaciones debe cargarse después de que se puedan ejecutar AngularJS:
<script src = "myNoteApp.js"> </script> <script src = "mynotectl.js"> </script>
Arquitectura de aplicación AngularJS
El ejemplo anterior es una aplicación web de una sola página de AngularJS completa (SPA).
El elemento <html> contiene la aplicación AngularJS (NG-APP =).
El elemento <div> define el alcance del controlador AngularJS (Ng-Controller =).
En una aplicación, puede estar compuesta por muchos controladores.
El archivo de aplicación (My ... App.js) define el código del modelo de aplicación.
Uno o más archivos de controlador (mi ... ctrl.js) definen el código del controlador.
Resumen - ¿Cómo funciona?
La Directiva NG-APP se encuentra debajo del elemento raíz de la aplicación.
Para la aplicación web de una sola página (SPA), la raíz de la aplicación suele ser el elemento <html>.
Una o más directivas de controlador NG definen el controlador de la aplicación. Cada controlador tiene su propio alcance :: elementos HTML definidos.
AngularJS comienza automáticamente en el evento HTML DomContentLoaded. Si se encuentra la Directiva NG-APP, AngularJS carga el módulo en la Directiva y compila NG-APP como la raíz de la aplicación.
La raíz de la aplicación puede ser toda la página, o una pequeña parte de la página, y si es una pequeña parte, se compilará y ejecutará más rápido.
Lo anterior es una explicación detallada de la simple aplicación de AngularJS. Espero que pueda ayudar a la programación AngularJS.