En este capítulo, discutiremos cómo configurar la biblioteca AngularJS para usar en el desarrollo de aplicaciones web. También examinaremos brevemente la estructura del directorio y su contenido.
Cuando abra el enlace https://angularjs.org/, verá que hay dos opciones para descargar la biblioteca Angularjs:
Descarga de GitHub: haga clic en este botón para ir a Github y obtener todos los últimos scripts.
Descargar, o haga clic en este botón y verá:
Esta pantalla ofrece varias opciones para usar el ángulo JS de la siguiente manera:
Descargar y archivos localeshost
Hay dos opciones diferentes: viejas y más recientes. El nombre en sí se explica por sí mismo. La versión anterior ya es más baja que la versión 1.2.x y la última es la versión 1.3.x.
También podemos usar versiones minificadas, sin comprimir o comprimidas.
Acceso de CDN: también puede usar CDN. El CDN dará acceso al mundo, en este caso, Google aloja centros de datos regionales. Esto significa usar CDN para la responsabilidad del host móvil de los archivos de su propio servidor a una variedad de factores externos. Esto también proporciona la ventaja de que si el visitante su página ha descargado una copia de AngularJS del mismo CDN, no tiene que volver a descargarlo.
Use la biblioteca de versiones de CDN en este tutorial.
ejemplo
Ahora escribamos un ejemplo simple usando la biblioteca AngularJS. Cree un archivo html myFirstexample.html de la siguiente manera:
* <h2> Bienvenido {{helloto.title}} al mundo de yiibai! </h2> </div> <script> angular.module ("myapp", []) .controller ("hellocontroller", function ($ scope) {$ scope.helloto = {}; $ scope.helloto.title = ";"; </script> </body> </html>El siguiente capítulo describe el código anterior en detalle:
Incluyendo angularjs
Ya incluimos la página HTML en el archivo JavaScript de AngularJS, por lo que podemos usar AngularJS:
<Head> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </thead>
Consulte la última versión de AngularJS en su sitio web oficial.
Apuntar a la aplicación AngularJS
A continuación, digamos que parte de HTML contiene aplicaciones AngularJS. Esto se puede hacer colocando el atributo NG-APP en el elemento HTML en la raíz de la aplicación AngularJS. Se puede agregar a un elemento HTML o elemento corporal de la siguiente manera:
<cuerpo ng-app = "myapp"> </body>
vista
Esta parte de la vista:
<div ng-confontroller = "hellocontroller"> <h2> bienvenido {{helloto.title}} al mundo de yiibai! </h2> </div>Ng-Controller le dice a AngularJS qué controladores y vistas son. Helloto.title le dice a AngularJS que escriba el valor del "modelo" de html llamado helloto.title en esta posición.
Controlador
La parte del controlador es:
<script> angular.module ("myapp", []) .controller ("hellocontroller", function ($ scope) {$ scope.helloto = {}; $ scope.helloto.title = "angularjs";}); </script>Este código primero registra una función llamada controlador del módulo MyApp Angle en Helocontroller. Aprenderemos más sobre módulos y controladores en sus respectivos capítulos. La función del controlador se registra en el ángulo a través de Angular.module (...). Llamada de función de controlador (...).
El modelo de parámetros de alcance $ pasó a la función del controlador. La función del controlador agrega el objeto JavaScript de Helloto, que tiene un campo de título agregado.
implementar
Guarde el código anterior como myfirstexample.htmlll abriéndolo en cualquier navegador. Verá la siguiente salida:
Cuando la página se carga en el navegador, ocurre el siguiente evento:
Los documentos HTML se cargan en el navegador y se calculan por el navegador. El archivo JavaScript de AngularJS se carga y se crean objetos globales de Angle. A continuación, se ejecuta una función de controlador de registro en JavaScript.
AngularJS escanea a través de HTML para encontrar aplicaciones y vistas de AngularJS. Una vez que se encuentra la vista, conecta la vista a la función del controlador correspondiente.
A continuación, AngularJS ejecuta la función de control. Luego representa una vista de datos con el modelo de controlador poblado. La página ahora está lista.