AngularJS es un marco de JavaScript. Puede ser agregado a una página HTML con una etiqueta <script>.
AngularJS extiende atributos HTML con las Directivas, y se une a los datos HTML con expresiones.
AngularJS es un framework JavaScript
AngularJS es un marco de JavaScript. Es una biblioteca escrito en JavaScript.
AngularJS se distribuye como un archivo JavaScript, y se puede agregar a una página web con una etiqueta de script:
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>Extiende AngularJS HTML
AngularJS extiende HTML con NG-directivas.
La directiva ng aplicación define una aplicación AngularJS.
La directiva ng-modelo se une el valor de los controles HTML (input, select, textarea) para datos de aplicación.
La directiva ng-bind enlaza datos de la aplicación a la vista HTML.
Ejemplo AngularJS
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
Inténtalo tú mismo " Ejemplo explicó:
AngularJS se inicia automáticamente cuando la página web se ha cargado.
La directiva ng-app dice AngularJS que el elemento <div> es el "dueño" de una aplicación AngularJS.
La directiva ng-modelo se une el valor del campo de entrada para el nombre de variable de aplicación.
La directiva ng-bind se une el innerHTML del elemento <p> al nombre de variable de aplicación.
AngularJS Directivas
Como ya se ha visto, AngularJS directivas son atributos HTML con un prefijo ng.
La directiva ng-init inicializa las variables de aplicación AngularJS.
Ejemplo AngularJS
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Inténtalo tú mismo " Alternativamente con HTML válido:
Ejemplo AngularJS
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Inténtalo tú mismo "  | Puede utilizar los datos-ng-, en lugar de ng-, si usted desea hacer su página HTML válido. |
|---|
Usted va a aprender mucho más acerca de las instrucciones más adelante en este tutorial.
Expresiones AngularJS
AngularJS expresiones se escriben entre llaves dobles: {{}} expresión.
AngularJS serán los datos de "salida" exactamente donde la expresión se escribe:
Ejemplo AngularJS
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Inténtalo tú mismo " AngularJS expresiones se unen los datos AngularJS a HTML del mismo modo que la directiva ng-bind.
Ejemplo AngularJS
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Inténtalo tú mismo " Va a aprender más acerca de las expresiones más adelante en este tutorial.
Aplicaciones AngularJS
AngularJS módulos definen aplicaciones AngularJS.
AngularJS controladores controlan las aplicaciones AngularJS.
La directiva ng aplicación define la aplicación, la directiva ng-controlador define el controlador.
Ejemplo 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>
Inténtalo tú mismo " AngularJS módulos definen aplicaciones:
Módulo AngularJS
var app = angular.module('myApp', []);
AngularJS aplicaciones de control de los controladores:
controlador AngularJS
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Va a aprender más acerca de los módulos y los controladores más adelante en este tutorial.