AngularJS es un marco de desarrollo de MVC front-end de alta gama desarrollado por Google.
Sitio web oficial de AngularJS: https://angularjs.org/ El sitio web oficial tiene demostración, y se puede requerir FQ para acceder a él
Comunidad china de AngularJS: http://www.angularjs.cn/ adecuado para principiantes
Archivo de referencia: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js
Notas al usar angular
Cita la biblioteca Angularjs: https: //github.com/litengdesign/angularjstest/blob/master/angular-1.0.1 .... puede descargarlo en el github en el ejemplo de esta sección.
Debe agregar ng-app = "appname" al área que está utilizando o directamente ng-app (global).
Establezca el controlador ng-controller = "Ctrl".
Tenga en cuenta los siguientes puntos al probar el ejemplo
Debe introducir el código AngularJS antes de la cabeza. El autor usa Angular-1.0.1.min.js. Preste atención a la diferencia de versión.
Todos los pequeños ejemplos se ejecutan en las siguientes áreas, recuerde agregar Ng-App al área activa.
Los siguientes son algunos casos pequeños para ilustrar las instrucciones y el uso comunes de los valores predeterminados de AngularJS.
Hello World Program (enlace de datos dual)
Use ng-model = {{name}} para vincular los datos
La copia del código es la siguiente:
<etiqueta for = "name"> nombre: </selebel>
<input type = "text" ng-model = "name" id = "name"/>
<hr>
Hola: {{nombre || 'liteng'}}
http://2.liteng.sinaapp.com/angularjstest/helloangularjs.html
Pequeño caso de uso de eventos.
La copia del código es la siguiente:
<div>
Precio unitario: <input type = "número" min = 0 ng-model = "precio" ng-init = "precio = 299">
Cantidad: <input type = "número" min = 0 ng-model = "cantidad" ng-init = "cantidad = 1">
<br>
Precio total: {{(precio) * (cantidad)}}
<dt>
<dl> nota: </dl>
<dd> entrada que involucra html5: <a href = "http://www.w3school.com.cn/html5/att_input_type.asp"> http://www.w3school.com.cn/html5/att_input_type.asp </a> </dd>
<dd> ng-init: establecer valor inicial </dd>
</dt>
</div>
http://2.liteng.sinaapp.com/angularjstest/event-bind.html
ng-init: el valor del atributo se puede especificar de forma predeterminada
La copia del código es la siguiente:
<p ng -init = "value = 'Hello World'"> {{value}} </p>
http://2.liteng.sinaapp.com/angularjstest/ng-init.html
Ng-Repeat: se usa para iterar datos similares a I para información en JS
La copia del código es la siguiente:
<div ng-init = "amigos = [{nombre: 'jhon', edad: 25}, {nombre: 'Mary', edad: 28}]"> </div>
<p> Tengo {{amigos.length}} amigos. Ellos son </p>
<ul>
<li ng-repeat = "amigo en amigos">
[{{$ index+1}}]: {{amigo.name}} edad es: {{amigo.age}}
</li>
</ul>
http://2.liteng.sinaapp.com/angularjstest/ng-repeat.html
H-CLIC: DOM Haga clic en el evento
La copia del código es la siguiente:
<div ng-confontroller = "Ctrl">
<botón ng-dblclick = 'showmsg ()'> {{a}} </boton>
</div>
<script>
función ctrl ($ alcope) {
$ scope.a = 'hola';
$ scope.showmsg = function () {
$ Scope.a = 'World';
}
}
</script>
http://2.liteng.sinaapp.com/angularjstest/ng-click.html
ng-show: establecer la pantalla del elemento
Nota: ng-show = "! Xx": ¡agregue antes del valor del atributo! ¡Significa que seguramente se mostrará, si no se agrega! No se muestra si es incierto
La copia del código es la siguiente:
<div ng-show = "! show">
ng-show = "! Mostrar"
</div>
<div ng-show = "show">
ng-show = "show"
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-show.html
Hide Ng: Establecer el elemento oculto
La copia del código es la siguiente:
<div ng-hide = "aaa">
ng-hide = "aaa"
</div>
<div ng-hide = "! aaa">
ng-show = "! aaa"
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-hide.html
Use Ng-show para crear efectos de alternar
La copia del código es la siguiente:
<h2> toggle </h2>
<a href ng-click = "showlog =! showlog"> show logo </a>
<div ng-show = "showlog">
<img ng-src = "http://liteng.org/sites/default/files/logo.png">
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-toggle.html
estilo Ng: similar al estilo predeterminado
Tenga en cuenta el formato de escritura aquí: las cadenas deben incluirse en las citas
La copia del código es la siguiente:
<div ng-style = "{ancho: 100+'px', altura: 200+'px', backgroundColor: 'rojo'}">
caja
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-style.html
Filtro: campo de filtro
La copia del código es la siguiente:
<Div> {{9999 | número}} </div> <!-9,999->
<Div> {{9999+1 | Número: 2}} </div> <!-10,000.00->
<Div> {{9*9 | moneda}} </div> <!-$ 81.00->
<Div> {{'Hola mundo' | uppercase}} </div> <!-Hello World->
http://2.liteng.sinaapp.com/angularjstest/filter.html
Ng-plantilla: puede cargar plantillas
La copia del código es la siguiente:
<div ng-incluye = "'tpl.html'"> </div>
tpl.html
La copia del código es la siguiente:
<h1> hola </h1>
http://2.liteng.sinaapp.com/angularjstest/show-tpl.html
$ http: un método similar a AJAX funciona muy bien
La copia del código es la siguiente:
<div ng-confontroller = "testCtrl">
<H2> http-Method de solicitud 1 </h2>
<ul>
<li ng-repeat = "x en nombres">
{{x.name}}+{{x.country}}
</li>
</ul>
</div>
<h2> Método 2 </h2>
<div ng-confontroller = "testCtrl2">
<ul>
<li ng-repeat = "y en info">
{{y.aid}}+{{y.title}}
</li>
</ul>
</div>
<script>
// Método 1
var testCtrl = function ($ scope, $ http) {
var p = $ http ({
Método: 'Get',
URL: 'json/date.json'
});
P.Success (función (respuesta, estado, encabezados, configuración) {
$ scope.names = respuesta;
});
P.Error (función (estado) {
console.log (estado);
});
}
// Método 2
función testCtrl2 ($ alcance, $ http) {
$ http.get ('json/yiqi_article.json'). éxito (función (respuesta) {
$ scope.info = respuesta;
});
}
</script>
http://2.liteng.sinaapp.com/angularjstest/ajax.html
Todos los códigos anteriores: https://github.com/litengdesign/angularJstest
La demostración implementada: http://2.liteng.sinaapp.com/angularjstest/index.html
En cuanto al enrutador y la directiva de Angularjs, lo sacaré por separado la próxima vez.