in

AngularJS – Configuración del entorno

angularjs environment download

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:

Descargar AngularJS

  • Ver en GitHub – Al hacer clic en este botón, se le redirige a GitHub y obtiene los últimos scripts.

  • Descarga AngularJS 1 – Al hacer clic en este botón, una pantalla puede ver un cuadro de diálogo que se muestra como –

Descargar AngularJS

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

  • Descarga y alojamiento de archivos localmente

    • 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.

  • Acceso CDN – 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 como 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.

Apuntar 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>

Vista

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 Hola a Objeto JavaScript, y en ese objeto agrega un título campo.

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, el archivo angular global se crea el objeto.

  • 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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Panel de control 3

Programas para desinstalar software en Windows y borrar sus datos

apple touch icon@2

¿Cuál es la forma correcta de mostrar un logotipo con CSS?