El marco AngularJS se usa básicamente en proyectos front-end. No sabía sobre este marco antes, y fue porque me hice cargo recientemente, así que planeé aprenderlo bien. Solía ser el lado de la PC, pero ahora me hizo cargo del proyecto móvil. El marco de interfaz de usuario móvil usa Ionic + Vordova, pero no usa bootstrap. Principalmente uso la interfaz de aplicaciones iOS + Android. No sé mucho sobre el marco iónico y necesito pasar tiempo para familiarizarse con él. Los novatos de aprendizaje de Angularjs son bienvenidos para corregirme.
¿Qué es AngularJS?
En pocas palabras, es un marco de JavaScript que se agrega a una página web a través de etiquetas de script. Es decir, cuando usamos AngularJS, necesitamos introducir el siguiente código.
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
Por lo general, se recomienda colocar el script en la parte inferior del elemento <body>, que es mejorar la velocidad de carga de la página web. Porque la carga HTML no está sujeta a la carga de script.
¿Qué es AngularJS?
AngularJS hace que sea más fácil desarrollar aplicaciones modernas de una sola página (SPA: aplicaciones de una sola página).
• AngularJS vincula los datos de la aplicación a elementos HTML.
• Angularjs puede clonar y repetir elementos HTML.
• AngularJS puede esconder y mostrar elementos HTML.
• AngularJS puede agregar código "detrás" del elemento HTML.
• AngularJS admite la verificación de entrada.
Por ejemplo, los terminales móviles básicamente usan comparaciones de una sola página, que se realizan utilizando la conversión de enrutamiento angular. Al igual que nuestro proyecto actual, también usamos una sola página. Es decir, en la página principal, las páginas saltas se realizan en la página principal. La captura de pantalla es la siguiente:
Expresiones de AngularJS
La expresión de AngularJS está escrita en aparatos ortopédicos dobles: {{Expression}}.
Las expresiones AngularJS unen los datos a HTML, que es similar a la directiva NG unida.
AngularJS "emitirá" datos en la ubicación donde se escribe la expresión.
Las expresiones AngularJS son muy parecidas a las expresiones de JavaScript: pueden contener literales, operadores y variables.
<! Doctype html> <!-etiqueta angularjs para procesar toda la página HTML y iniciar la aplicación-> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> </head> <body> <p> name: {{"ting"+"feng"}} </p> <p> número: {{5+5}} </p> <divit ng-init = "persona = {name: 'tingfeng', edad: '13 '}"> <p> name: {{persona.name}} edad: {{persona.age}} </p> </div> </body> </html>>Aplicación de AngularJS en HTML
Extender principalmente HTML a través de Ng-Directive. La directiva AngularJS es un atributo HTML con prefijo Ng, que contiene cuatro características principales: MVC, modular, sistema de instrucciones (directiva) y databinding
Ng-INIT: esta directiva inicializa las variables de aplicación AngularJS. Por ejemplo, las siguientes columnas:
< ng-init = "name = 'tingfeng'"> <p> name is: <span ng-bind = "name"> </span> </p> </div> </body> </html>
NG-APP: Esta directiva indica que se define una aplicación AngularJS. Por lo general, se coloca detrás de HTML, también puede usar la Directiva NG-APP localmente. Por ejemplo, <Div Ng-App>, el script AngularJS solo se ejecutará en el DIV, lo que significa que a partir de aquí, todo el contenido es AngularJS para la gestión.
Ng-Model: esta directiva se refiere a valores de elementos de enlace (como el valor del cuadro de entrada) a la aplicación.
Ng-Bind: esta directiva une los datos de la aplicación a la vista HTML. Use las instrucciones correspondientes para usar AngularJS para operar la página HTML. Echemos un vistazo al código sobre cómo usarlo.
En este momento, use el modelo NG para unirse a la variable del modelo SetName. Al ingresar el valor en el cuadro de entrada, el nombre SET correspondiente también cambiará. Puedes probarlo solo.
Explicación sobre $ alcance
¿Qué es $ alcance? ¿Cuál es su función? ¿Cómo usarlo?
En pocas palabras, el alcance es un POJO (PlainoldJavaScriptObject), similar a un objeto, con propiedades y métodos, el alcance es un pojo (PlainoldJavaScriptObject), similar a un objeto, con propiedades y métodos, el alcance proporciona Métodos de herramienta Watch (), Watch () y Apply (). El MVC de AngularJS se realiza con la ayuda de $ alcance.
Características: 1. Es el entorno de ejecución (o alcance) de la expresión
2. El alcance es una estructura de árbol, paralela a la etiqueta DOM, que contiene un alcance, que es una estructura de árbol, paralela a la etiqueta DOM, que contiene un ctoatscope en él está en el nivel superior.
3. El alcance heredará el alcance principal heredará las propiedades y métodos de la raíz principal.
4. $ El alcance puede propagar eventos, similares a DOM, que pueden propagarse hacia arriba o hacia abajo.
5. $ El alcance no es solo la base de MVC, sino también la base para implementar la vinculación bidireccional más adelante.
Componentes de AngularJS
Plantilla: es decir, archivos HTML y CSS escritos, que muestra la vista de la aplicación. ¡Angularjs puede construir sus propias etiquetas HTML en HTML!
Controlador: a diferencia de AJAX, no es necesario escribir un oyente o controlador DOM, ya que ya está integrado en AngularJS. Beneficios: fácil de escribir, probar, mantener y comprender.
Datos del modelo: el modelo se extiende desde AngularJS como los atributos de los objetos de dominio. Los datos del modelo pueden ser un objeto JS, una matriz o un tipo primitivo, pero todos pertenecen a un objeto de alcance AngularJS.
¿Cómo entender el alcance en Angularjs?
Es decir, un alcance puede considerarse como una plantilla, un enlace que funciona junto con el modelo y el controlador. AngularJS usa el alcance, y también hay información, modelos de datos y controladores en la plantilla. Estos pueden ayudar a separar el modelo y la vista, ¡pero ambos están sincronizados! Cualquier cambio en el modelo se reflejará en la vista inmediatamente, y cualquier cambio en la vista se reflejará en el modelo de inmediato.
Vista: en AngularJS, una vista es el mapeo después de que el modelo se representa a través de la plantilla HTML. Es decir, no importa cuándo cambie el modelo, AngularJS actualizará los puntos de unión en tiempo real y actualizará la vista.
¡Es más intuitivo publicar códigos!
<! DocType html> <html ng-app = "helloangular"> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> <script> // var mymodule = angular.module ("hello", [], [], [], [], [], []. － Plantilla de control de control HelloangularMymodule.Controller ("Helloangular", ['$ Scope', function Helloangular ($ Scope) {$ Scope.Value = {name: 'Jiangting'};}]); </script> </head> <body> <!-MVC-View Angular-> <div ng-controller = "helloangular"> － El controlador es helloangular <p> {{value.name}}, hola! </p> </div> <!-modular angular-> </body> </html>Echemos un vistazo a la aplicación del controlador, es decir, el controlador, es decir, el controlador opera datos, lo vincula y lo muestra en la página HTML.
El módulo AngularJS (módulo) define aplicaciones AngularJS.
El controlador AngularJS (controlador) se utiliza para controlar las aplicaciones AngularJS.
La Directiva NG-APP define la aplicación, y el controlador NG define el controlador. Usemos las columnas anteriores para ver:
El módulo AngularJS define las aplicaciones:
var mymodule = angular.module ("helloangular", []); － Plantilla de control HelloangularAplicación de control del controlador AngularJS:
mymodule.controller ("helloangular", ['$ scope', function helloangular ($ scope) {$ scope.value = {name: 'jiangting'};}]);Comprender MVC front-end
Acerca de las características del controlador:
1. No intente tomar el controlador, un controlador generalmente solo es responsable de una pequeña vista.
2. No opere el DOM directamente en el controlador, no es su responsabilidad
3. No realice operaciones de filtrado de datos en el controlador, hay un servicio de filtro
4. No formates los datos en el controlador, NG tiene controles de forma muy útiles
5. El controlador no se llamará. La interacción entre los controladores se llevará a cabo a través de eventos. Será a través del servicio de filtro. 4. No formaten datos en el controlador. Hay controles de forma muy útiles. 5. El controlador no se llamará. La interacción entre los controladores se llevará a cabo a través de eventos. Se llevará a cabo a través del alcance.
Veamos cómo personalizar el sistema de comando, el código es el siguiente:
<!doctype html><html ng-app><head><meta charset="utf-8"><script src="http://code.angularjs.org/angular-1.0.1.min.js"></script><script>//Instruction system var myModule = angular.module("MyModule", []); mymodule.directive ("hello", function () {return {restrict: 'e', plantlate: '<div> hola thole! </div>', --e Insertamos una etiqueta html reemplazar: true}}); </script> </head> <body> <choule> </ello> </body> </html>En la directiva, se devuelven tres parámetros después, donde el medio de la plantilla se refiere a la etiqueta HTML insertada. Ahora escribiré una pieza de código HTML y veré cómo escribirlo en Angularjs.
El código HTML estático original es el siguiente:
<ul> <li> <span> new1 </span> <p> Solo una página de prueba1 </p> </li> <li> <span> new2 </span> <p> solo una página de prueba2 </p> </li> </ul>
La forma de modificarlo a AngularJS es la siguiente:
<! Doctype html> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> <script> // $ Scope es el alcance del controlador. // Alcance AngularJS: puede considerarse como una plantilla. Una vez que se inicia la aplicación, se creará un alcance de la raíz, y el alcance del controlador es un sucesor típico del alcance de la raíz. function newsCtrl ($ scope) {$ scope.news = [{"content": "new1", "introducir": "solo una página de prueba1"}, {"contenido": "new2", "introducir": "solo una página de prueba2"}]; $ scope.phones = {longitud: "4" // no se puede agregar un atributo único con un semicolon, múltiples atributos múltiples, atributos múltiples, se separan por atributos múltiples por parte de múltiples atributos por parte de múltiples atributos. comas};} </script> </head> <body ng-controller = "newsCtrl"> <ul> <li ng-depheat = "new in News"> {{new.content}} <p> {{new.IntroDuce}}} </p> </li> </ul> </foding> </hml>Lo anterior es el análisis de las características básicas de AngularJS presentadas por el editor (I). Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!