Introducción a AngularJS
AngularJS es un marco de JavaScript . Se puede agregar a una página HTML con una etiqueta <script>.
AngularJS amplía los atributos de HTML con Directivas y vincula datos a HTML con Expresiones .
AngularJS es un marco de JavaScript
AngularJS es un marco de JavaScript escrito en JavaScript.
AngularJS se distribuye como un archivo JavaScript y se puede agregar a una página web con una etiqueta de secuencia de comandos:
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
AngularJS extiende HTML
AngularJS extiende HTML con ng-directives .
La directiva ng-app define una aplicación AngularJS.
La directiva ng-model vincula el valor de los controles HTML (entrada, selección, área de texto) a los datos de la aplicación.
La directiva ng-bind vincula los datos de la aplicación a la vista HTML.
Ejemplo de AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Ejemplo explicado:
AngularJS se inicia automáticamente cuando se carga la página web.
La directiva ng-app le dice a AngularJS que el elemento <div> es el "propietario" de una aplicación AngularJS .
La directiva ng-model vincula el valor del campo de entrada al nombre de la variable de la aplicación .
La directiva ng-bind vincula el contenido del elemento <p> al nombre de la variable de la aplicación .
Directivas de AngularJS
Como ya has visto, las directivas de AngularJS son atributos HTML con un prefijo ng .
La directiva ng-init inicializa las variables de la aplicación AngularJS.
Ejemplo de AngularJS
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Alternativamente con HTML válido:
Ejemplo de AngularJS
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Puede usar data-ng- , en lugar de ng- , si desea que su página HTML sea válida.
Aprenderá mucho más sobre las directivas más adelante en este tutorial.
Expresiones de AngularJS
Las expresiones de AngularJS se escriben entre llaves dobles: {{ expression }} .
AngularJS "dará salida" a los datos exactamente donde está escrita la expresión:
Ejemplo de AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Las expresiones de AngularJS vinculan los datos de AngularJS a HTML de la misma manera que la directiva ng-bind .
Ejemplo de AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Aprenderá más sobre las expresiones más adelante en este tutorial.
Aplicaciones AngularJS
Los módulos de AngularJS definen las aplicaciones de AngularJS.
Los controladores AngularJS controlan las aplicaciones AngularJS.
La directiva ng-app define la aplicación, la directiva ng-controller define el controlador.
Ejemplo de AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
Los módulos de AngularJS definen aplicaciones:
Módulo AngularJS
var app = angular.module('myApp', []);
Los controladores AngularJS controlan las aplicaciones:
Controlador AngularJS
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Aprenderá más sobre módulos y controladores más adelante en este tutorial.