Una buena manera de comenzar a aprender angularjs es crear la aplicación clásica "¡Hola mundo!":
1. Cree un archivo HTML usando su editor de texto favorito, por ejemplo: helloworld.html.
2. Copie el siguiente código fuente en su archivo HTML.
3. Abra este archivo HTML en un navegador web.
Código fuente:
La copia del código es la siguiente:
<! Doctype html>
<html ng-app>
<Evista>
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</ablo>
<Body>
Hola Mundo'}}!
</body>
</html>
Ejecute el código anterior en su navegador para ver el efecto.
Ahora echemos un vistazo más de cerca al código y veamos qué está pasando. Cuando se carga la página, la etiqueta ng-app le dice a AngularJS que procese toda la página HTML y bota la aplicación:
La copia del código es la siguiente:
<html ng-app>
Esta línea carga el script AngularJS:
La copia del código es la siguiente:
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
(Para obtener detalles sobre AngularJS manejando toda la página HTML, consulte Bootstrap).
Finalmente, el cuerpo en la etiqueta es la plantilla de la aplicación, que muestra nuestros saludos en la interfaz de usuario:
La copia del código es la siguiente:
Hola Mundo'}}!
Tenga en cuenta que el contenido del {{}} etiquetado con tirantes dobles es la expresión vinculada en el saludo, que es una simple cadena 'mundo'.
A continuación, veamos un ejemplo más interesante: unir una expresión dinámica a nuestro texto de saludo usando AngularJS.
¡Hola Mundo Angularjs!
Este ejemplo demuestra la unión de datos bidireccionales para AngularJS:
1. Edite el documento HelloWorld.html creado anteriormente.
2. Copie el siguiente código fuente en su archivo HTML.
3. Actualiza la ventana del navegador.
Código fuente:
La copia del código es la siguiente:
<! Doctype html>
<html ng-app>
<Evista>
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</ablo>
<Body>
Su nombre: <input type = "text" ng-model = "YourName" PlaceHolder = "World">
<hr>
Hola {{YourName || 'Mundo'}}!
</body>
</html>
Ejecute el código anterior en su navegador para ver el efecto.
Este ejemplo tiene las siguientes notas importantes:
1. Instrucción de entrada de texto <Entrada ng-model = "YourName" /> está vinculado a una variable de modelo llamada Name.
2. Double Brace Mark Agregue su variable de modelo de nombre al texto de saludo.
3. ¡No necesita registrar un oyente de eventos o agregar un controlador de eventos para la aplicación!
Ahora intente escribir su nombre en el cuadro de entrada y el nombre que escriba se actualizará de inmediato y se mostrará en el saludo. Este es el concepto de enlace de datos de dos vías AngularJS. Cualquier cambio en el cuadro de entrada se refleja inmediatamente en la variable del modelo (una dirección), y cualquier cambio en la variable del modelo se refleja inmediatamente en el texto de saludo (la otra dirección).
Análisis de aplicación AngularJS
Esta sección describe los tres componentes de las aplicaciones AngularJS y explica cómo se asignan al patrón de diseño del controlador de visión modelo:
Plantillas
Una plantilla es un archivo que escribe en HTML y CSS para presentar la vista de la aplicación. Puede agregar nuevos elementos y etiquetas de atributo a HTML como directivas para el compilador AngularJS. ¡El compilador AngularJS es completamente extensible, lo que significa que con AngularJS puede construir sus propias etiquetas HTML en HTML!
Lógica y comportamiento de la aplicación
La lógica y el comportamiento de la aplicación son los controladores que define en JavaScript. AngularJS es diferente de las aplicaciones AJAX estándar, no necesita escribir un oyente o controlador DOM, ya que ya están integrados en AngularJS. Estas características hacen que la lógica de su aplicación sea fácil de escribir, probar, mantener y comprender.
Datos del modelo (datos)
El modelo se extiende a partir de las propiedades de los objetos de alcance AngularJS. Los datos en el modelo pueden ser un objeto JavaScript, una matriz o un tipo primitivo, y no importa, es importante que todos pertenezcan a los objetos de alcance AngularJS.
AngularJS mantiene la sincronización bidireccional entre el modelo de datos y la interfaz de usuario de la interfaz de vista a través del alcance. Una vez que cambia el estado del modelo, AngularJS actualizará inmediatamente la interfaz de vista y viceversa.
Además, AngularJS también proporciona algunas características de servicio muy útiles:
1. Los servicios subyacentes incluyen inyección de dependencia, XHR, caché, enrutamiento de URL y servicios abstractos del navegador.
2. También puede extender y agregar sus propios servicios de aplicación específicos.
3. Estos servicios pueden hacer que sea muy conveniente para usted escribir aplicaciones web.