AngularJS Introducción

AngularJS es unframework de JavaScript. Se puede agregar a páginas HTML mediante la etiqueta <script>.

AngularJS, a través dedirectivas,extiende HTML y, a través deexpresiones,vincula datos a HTML.

AngularJS es un framework de JavaScript.

AngularJS es un framework de JavaScript. Es una librería escrita en JavaScript.

AngularJS se publica como un archivo JavaScript y se puede agregar a una página web mediante la etiqueta script:

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

Note Recomendamos colocar el script al final del elemento <body>.
Esto mejora la velocidad de carga de la página web, porque la carga del HTML no está sujeta a la carga del script.

Descargas de las distintas versiones de angular.js:https://github.com/angular/angular.js/releases

AngularJS extiende HTML.

AngularJS, a través deng-directivesextiende HTML.

ng-appLa directiva define una aplicación AngularJS.

ng-modelLa directiva vincula el valor de un elemento (por ejemplo, el valor de un campo de entrada) a la aplicación.

ng-bindLa directiva vincula los datos de la aplicación a la vista HTML.

Ejemplo de AngularJS

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>Nombre:<input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> <p ng-bind="name"></p> </div> </body> </html>

Pruébelo »

Explicación del ejemplo:

Cuando la página web termina de cargarse, AngularJS se inicia automáticamente.

ng-appLa directiva `ng-app` le dice a AngularJS que el elemento <div> esel propietario de la aplicaciónAngularJS.

ng-modelLa directiva vincula el valor del campo de entrada a la variable de la aplicación.name。

ng-bindLa directiva vincula la variable de la aplicación `name` al innerHTML de un párrafo.

Note Si eliminang-appla directiva, HTML mostrará la expresión directamente, sin evaluar el resultado.

¿Qué es AngularJS?

AngularJS hace que sea más fácil desarrollar aplicaciones modernas de una sola página (SPAs: Single Page Applications).

  • AngularJS vincula los datos de la aplicación a los elementos HTML.
  • AngularJS puede clonar y repetir elementos HTML.
  • AngularJS puede ocultar y mostrar elementos HTML.
  • AngularJS puede añadir código "detrás" de los elementos HTML.
  • AngularJS admite la validación de entradas.

Directivas de AngularJS

Como puede ver, las directivas de AngularJS sonngatributos HTML con `ng-` como prefijo.

ng-initLa directiva inicializa variables de la aplicación AngularJS.

Ejemplo de AngularJS

<div ng-app="" ng-init="firstName='John'"> <p>El nombre completo es<span ng-bind="firstName"></span></p> </div>

Pruébelo »

Note HTML5 permite atributos extendidos (personalizados), que comienzan condata-el prefijo `data-`.
Los atributos de AngularJS comienzan conng-`ng-`, pero puede usardata-ng-`data-ng-` para que la página sea válida en HTML5.

Con HTML5 válido:

Ejemplo de AngularJS

<div data-ng-app="" data-ng-init="firstName='John'"> <p>El nombre completo es<span data-ng-bind="firstName"></span></p> </div>

Pruébelo »

Expresiones de AngularJS

Las expresiones de AngularJS se escriben entre llaves dobles:{{ expression }}。

Las expresiones de AngularJS vinculan datos a HTML, lo cualng-bindtiene el mismo efecto que la directiva `ng-bind`.

AngularJS "mostrará" los datos en el lugar donde se escribe la expresión.

Las expresiones de AngularJSson muy similares alas expresiones de JavaScript.: pueden contener literales, operadores y variables.

Ejemplo: {{ 5 + 5 }} o {{ firstName + " " + lastName }}

Ejemplo de AngularJS

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>Mi primera expresión: {{ 5 + 5 }}</p> </div> </body> </html>

Pruébelo »

Aplicación de AngularJS

AngularJS Módulo (Module)define la aplicación AngularJS.

AngularJS Controlador (Controller)se utiliza para controlar la aplicación AngularJS.

ng-appLa directiva `ng-app` especifica la aplicación,ng-controllery la directiva `ng-controller` especifica el controlador.

Ejemplo de AngularJS

<div ng-app="myApp" ng-controller="myCtrl">Nombre:<input type="text" ng-model="firstName"><br>Apellido:<input type="text" ng-model="lastName"><br> <br>Nombre completo: {{firstName + " " + lastName}}</div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); </script>

Pruébelo »

El módulo de AngularJS define la aplicación:

Módulo de AngularJS

var app = angular.module('myApp', []);

El controlador de AngularJS controla la aplicación:

Controlador de AngularJS

app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });

En los siguientes tutoriales aprenderá más sobre aplicaciones y módulos.

Usar AngularJS en Cloud Studio

  • Paso 1: visita la plataforma de desarrolladores de Tencent Cloud, registra/inicia sesión en tu cuenta.

  • Paso 2: en el menú de entorno de ejecución de la derecha, selecciona: "ubuntu"

  • Paso 3: en el directorio de código de la izquierda, crea un directorio html y escribe tu código HTML, por ejemplo index.html

  • Paso 4: en el archivo index.html, pega el siguiente código para importar AngularJS:

    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

  • Paso 5: en la terminal, introduce el comando sudo vim /etc/nginx/site-enable/default. Modifica la parte del archivo de configuración marcada en el recuadro rojo como se muestra en la siguiente imagen y, a continuación, introduce el comando: sudo nginx restart para reiniciar el servicio de nginx (después de instalar e iniciar nginx, por defecto escucha en el puerto 80. Necesitamos cambiar el directorio del sitio y el puerto de escucha de nginx a los que necesitamos).

  • Paso 6: haz clic en la pestaña [Enlace de acceso] en el extremo derecho. En el panel de enlace de acceso, escribe el número de puerto: 8080 (coincide con el puerto del archivo de configuración de nginx anterior), haz clic en Crear enlace y podrás hacer clic en el enlace generado para acceder al código que acabamos de escribir y ver el efecto de AngularJS.

Ahora CODING está organizando un concurso basado en el espacio de trabajo de Cloud Studio: [Concurso de selección de mi plugin favorito de Cloud Studio]. Entra en el sitio web oficial del evento: https://studio.qcloud.coding.net/campaign/favorite-plugins/index para obtener más información sobre el evento.

Otras extensiones