AngularJS - Configuración del entorno

Este capítulo describe cómo configurar la biblioteca AngularJS para su uso en el desarrollo de aplicaciones web. También describe brevemente la estructura del directorio y su contenido.

Cuando abres el enlace https://angularjs.org/, verá que hay dos opciones para descargar la biblioteca AngularJS:

View on GitHub - Al hacer clic en este botón, se le redirige a GitHub y obtiene los últimos scripts.
Download AngularJS 1 - Al hacer clic en este botón, una pantalla puede ver un cuadro de diálogo que se muestra como -

Esta pantalla ofrece varias opciones para usar Angular JS de la siguiente manera:

Downloading and hosting files locally
- Hay dos opciones diferentes: Legacy y Latest. Los nombres en sí mismos son autodescriptivos. El Legacy tiene una versión menor que 1.2.xy el último viene con la versión 1.3.x.
- También podemos optar por la versión minimizada, sin comprimir o comprimida.
CDN access- También tienes acceso a un CDN. La CDN le da acceso a los centros de datos regionales. En este caso, el host de Google. El CDN transfiere la responsabilidad de alojar archivos de sus propios servidores a una serie de servidores externos. También ofrece la ventaja de que si el visitante de su página web ya ha descargado una copia de AngularJS del mismo CDN, no es necesario volver a descargarlo.

Estamos utilizando las versiones CDN de la biblioteca a lo largo de este tutorial.

Ejemplo

Ahora escribamos un ejemplo simple usando la biblioteca AngularJS. Creemos un archivo HTML myfirstexample.html que se muestra a continuación:

<!doctype html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
   </head>
   
   <body ng-app = "myapp">
      <div ng-controller = "HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
      </div>
      
      <script>
         angular.module("myapp", [])
         
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
      
   </body>
</html>

Repasemos el código anterior en detalle:

Incluir AngularJS

Incluimos el archivo JavaScript de AngularJS en la página HTML para que podamos usarlo -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
   </script>
</head>

Puede consultar la última versión de AngularJS en su sitio web oficial.

Apunta a la aplicación AngularJS

A continuación, es necesario indicar qué parte de HTML contiene la aplicación AngularJS. Puede hacer esto agregando el atributo ng-app al elemento HTML raíz de la aplicación AngularJS. Puede agregarlo al elemento html o al elemento del cuerpo como se muestra a continuación:

<body ng-app = "myapp">
</body>

Ver

La vista es esta parte -

<div ng-controller = "HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>

ng-controller le dice a AngularJS qué controlador usar con esta vista. helloTo.title le dice a AngularJS que escriba el valor del modelo llamado helloTo.title en HTML en esta ubicació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 registra una función de controlador llamada HelloController en el módulo angular llamado myapp . Estudiaremos más sobre módulos y controladores en sus respectivos capítulos. La función del controlador se registra en angular mediante la llamada de función angular.module (...). Controller (...).

El modelo de parámetro $ scope se pasa a la función del controlador. La función del controlador agrega un objeto helloTo JavaScript, y en ese objeto agrega un campo de título .

Ejecución

Guarde el código anterior como myfirstexample.html y ábralo en cualquier navegador. Puedes ver el siguiente resultado:

Welcome AngularJS to the world of Tutorialspoint!

¿Qué sucede cuando la página se carga en el navegador? Veamos -

El documento HTML se carga en el navegador y el navegador lo evalúa.
Se carga el archivo JavaScript de AngularJS, se crea el objeto global angular .
Se ejecuta el JavaScript que registra las funciones del controlador.
A continuación, AngularJS escanea el HTML para buscar aplicaciones y vistas de AngularJS.
Una vez que se encuentra la vista, la conecta a la función del controlador correspondiente.
A continuación, AngularJS ejecuta las funciones del controlador.
Luego, renderiza las vistas con datos del modelo poblado por el controlador. La página ya está lista.

↰ Previous page Next page ↱