Introducción a AngularJS
- Página anterior Tutoriales de AngularJS
- Página siguiente Expresiones AngularJS
AngularJS es un Framework JavaScript. Puede agregarse a la página HTML con una etiqueta <script>.
AngularJS medianteinstrucciónextiende las propiedades HTML y utilizaExpresiónune los datos con HTML.
AngularJS es un framework JavaScript
AngularJS es un framework JavaScript escrito en JavaScript.
AngularJS se distribuye en forma de archivo JavaScript y se puede agregar a la página web con la etiqueta script:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
AngularJS extiende HTML
AngularJS utiliza ng-instrucciónExtiende HTML.
ng-app La instrucción define una aplicación AngularJS.
ng-model La instrucción une el valor de los controles HTML (input, select, textarea) con los datos de la aplicación.
ng-bind La instrucción une los datos de la aplicación con la vista HTML.
Ejemplos AngularJS
<!DOCTYPE html> <html> <script src="https://cdn.staticfile.net/angular.js/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 de explicación:
Después de que se complete la carga de la página web, AngularJS se iniciará automáticamente.
ng-app La instrucción le dice a AngularJS que el elemento <div> es un elemento AngularJS Aplicacióndel "propietario".
ng-model La instrucción une el valor del campo de entrada con la variable de aplicación. name.
ng-bind La instrucción binds el contenido del elemento <p> a la variable de la aplicación. name.
Directivas AngularJS
Como puede ver, las instrucciones AngularJS tienen ng propiedades HTML con prefijo.
ng-init La instrucción inicializa la variable de aplicación AngularJS.
Ejemplos AngularJS
<div ng-app="" ng-init="firstName='Bill'"> <p>El nombre es <span ng-bind="firstName"></span></p> </div>
o use HTML válido:
Ejemplos AngularJS
<div data-ng-app="" data-ng-init="firstName='Bill'"> <p>El nombre es <span data-ng-bind="firstName"></span></p> </div>
Si desea que el HTML de la página sea válido, puede usar data-ng- en lugar de ng-.
Obtendrá más información sobre las instrucciones en la parte posterior de este tutorial.
Expresiones AngularJS
Las expresiones AngularJS se escriben dentro de dobles corchetes:{{ expression }}.
AngularJS "saldrá" los datos en el lugar de la expresión:
Ejemplos AngularJS
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Mi primera expresión:{{ 5 + 5 }}</p>
</div>
</body>
</html>
Las expresiones AngularJS binds los datos AngularJS a HTML, con ng-bind La forma de instrucción es la misma.
Ejemplos AngularJS
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/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>
Obtendrá más información sobre las expresiones en la parte posterior de este tutorial.
Aplicaciones AngularJS
AngularJS MóduloDefinición de aplicación AngularJS.
AngularJS ControladorControl de aplicación AngularJS.
ng-app Definición de aplicación de instrucción,ng-controller Definición de controlador de instrucción.
Ejemplos AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
<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= "Bill";
$scope.lastName= "Gates";
});
</script>
Los módulos AngularJS definen la aplicación:
Módulos AngularJS
var app = angular.module('myApp', []);
Los controladores AngularJS controlan la aplicación:
Controladores AngularJS
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
En este tutorial, aprenderá más sobre módulos y controladores.
- Página anterior Tutoriales de AngularJS
- Página siguiente Expresiones AngularJS
