第一个应用AngularJS

al crear una guíaHola Mundoanterior！Al usar AngularJS, veamos las diferentes partes de una aplicación AngularJS. Una aplicación AngularJS contiene las siguientes tres partes importantes-

ng-app − Esta directiva define la aplicación AngularJS y la vincula a HTML.
ng-model − Esta pseudo-directiva vincula los valores de los datos de la aplicación AngularJS a los controles de entrada HTML.
ng-bind − Esta directiva vincula los datos de la aplicación AngularJS a las etiquetas HTML.

Crear aplicación AngularJS

Paso1：cargar el framework

Como framework de JavaScript puro, se puede agregar con la etiqueta <Script>.

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

Paso2：usando ng-directiva app define la aplicación AngularJS

<div　ng-app　=　">
　　　...</div>

Paso3：usando ng-directiva model define el nombre del modelo

<p>Enter your Name:　<input　type　=　"text"　ng-model　=　"name"></p>

Paso4：usando ng-valores del modelo definidos por la directiva bind

<p>Hello　<span　ng-bind　=　"name"></span>!</p>

Ejecutar aplicación AngularJS

Utilice los tres pasos anteriores en una página HTML.

testAngularJS.htm

Ejemplo

<html>
　　　<head>
　　　　　　<title>AngularJS First Application</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h1>Sample Application</h1>
　　　　　　
　　　　　　<div　ng-app　=　">
　　　　　　　　　<p>Enter your Name:　<input　type　=　"text"　ng-model　=　"name"></p>
　　　　　　　　　<p>Hello　<span　ng-bind　=　"name"></span>!</p>
　　　　　　</div>
　　　　　　
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Prueba para ver‹/›

Cómo se integra AngularJS con HTML

ng-La instrucción app indica el inicio de la aplicación AngularJS.
ng-La instrucción model crea una variable de modelo llamada name, que se puede usar junto con la página HTML y se puede usar en cualquier lugar con ng-se utiliza en el div del comando app.
Luego, cada vez que el usuario ingrese contenido en el cuadro de texto, ng-bind mostrará el nombre del modelo en la etiqueta HTML <span>.
Cierre </ div>etiqueta de marcador indica el final de la aplicación AngularJS.

指令AngularJS 架构MVCAngularJS

Tutorial básico de AngularJS