Atributos SRC y HREF
En AngularJS, SRC debe escribirse como NG-SRC, y HREF debe escribirse como NG-HREF, por ejemplo:
La copia del código es la siguiente:
<img ng-src = "/images/gats/{{favoritecat}}">
<a ng-href = "/shop/category = {{número}}"> algún texto </a>
expresión
Las operaciones matemáticas simples, las operaciones de comparación, las operaciones booleanas, las operaciones de bits, las matrices de referencia y los símbolos de los objetos se pueden realizar en plantillas. Aunque podemos hacer muchas cosas con expresiones, la expresión se ejecuta utilizando un intérprete personalizado (parte de Angular), en lugar de usar la función JavaScript Eval (), por lo que tiene grandes limitaciones.
Aunque las expresiones aquí son más estrictas que JavaScript de muchas maneras, tienen una mejor tolerancia a fallas para indefinidos y nulos. Si se encuentra un error, la plantilla simplemente no muestra nada y no lanza un error NullPointerException. Por ejemplo:
La copia del código es la siguiente:
<div ng-confontroller = 'somecontroller'>
<div> {{informat () /10}} </div> // Aunque es legal, pone la lógica comercial en la plantilla, y este enfoque debe evitarse
</div>
Distinguir entre la interfaz de usuario y las responsabilidades del controlador
El controlador está vinculado a un fragmento DOM específico, que es lo que necesita administrar. Hay dos métodos principales para asociar el controlador al nodo DOM. Uno se declara a través del controlador NG en la plantilla, y el segundo es unirlo a un fragmento de plantilla DOM cargado dinámicamente a través del enrutamiento. Esta plantilla se llama vista. Podemos crear controladores anidados, pueden compartir el modelo de datos y las funciones heredando la estructura de números. La verdadera anidación ocurre en el objeto $ alcance. A través del mecanismo de herencia original interno, el alcance $ del objeto del controlador principal se pasará al alcance de $ anidado interno (todas las propiedades, incluidas las funciones). Por ejemplo:
La copia del código es la siguiente:
<div ng-confontroller = "ParentController">
<div ng-confontroller = "ChildController"> ... </div>
</div>
Exponer datos del modelo usando $ alcance
Puede mostrar la creación del atributo $ Scope, como $ scope.count = 5. También puede crear indirectamente modelos de datos a través de la plantilla misma.
Pasar la expresión. Por ejemplo
La copia del código es la siguiente:
<botón ng-click = 'count = 3'> set Count en tres </botón>
Uso de Modelo ng en elementos de formulario
Similar a la expresión, los parámetros del modelo especificados en el modelo NG también funcionan dentro del controlador externo. La única diferencia es que esto crea una relación vinculante bidireccional entre el elemento de formulario y el modelo especificado.
Monitorear los cambios en los modelos de datos utilizando Watch
La firma de la función de $ Watch es: $ Watch (WatchFn, WatchAction, Deepwatch)
WatchFN es una cadena con una expresión o función angular que devuelve el valor actual del modelo de datos monitoreado. WatchAction es una función o expresión llamada cuando WatchFn cambia. Su firma de función es:
Función (NewValue, OldValue, Alcope) Deepwatch Si se establece en True, este parámetro booleano opcional se reiniciará Angular para verificar si cada propiedad del objeto monitoreado ha cambiado. Si monitorea un valor simple para monitorear elementos en la matriz, o todos los atributos en el objeto, en lugar de valores, puede usar este parámetro. Tenga en cuenta que Angular necesita atravesar matrices u objetos. Si el conjunto es más grande, la operación será más complicada.
La función $ reloj devuelve una función. Cuando no necesita recibir notificaciones de cambio, puede usar la función devuelta para cerrar la sesión del monitor.
Si necesitamos monitorear una propiedad y luego iniciar sesión en el monitoreo, podemos usar el siguiente código: var dreeg = $ scope. $ Watch ('somemodel.someproperty', callbackonchange ());
... dreeg ();
El código de ejemplo es el siguiente:
La copia del código es la siguiente:
<html ng-app>
<Evista>
<title> su carrito de compras </title>
<script type = "text/javaScript">
function CartController ($ alcope) {
$ scope.bill = {};
$ scope.Items = [
{Título: 'Pintar Pots', Cantidad: 8, Precio: 3.95},
{Título: 'Polka Dots', Cantidad: 17, Precio: 12.95},
{Título: 'guijarros', cantidad: 5, precio: 6.95}
];
$ scope.totalCart = function () {
var en total = 0;
para (var i = 0, len = $ scope.items.length; i <len; i ++) {
Total = Total + $ Scope.Items [i] .price * $ scope.Items [i] .cantidad;
}
Total de retorno;
}
$ scope.subtotal = function () {
return $ scope.totalCart () - $ scope.bill.discount;
}
función calculadaiscount (NewValue, OldValue, Alcope) {
$ scope.bill.discount = newValue> 100? 10: 0;
} // La función de WatchAction aquí
$ alcance. $ watch ($ scope.totalcart, calculadoiscount); // la función de reloj aquí
}
</script>
</ablo>
<Body>
<div ng-confontroller = "CartController">
<div ng-repeat = 'item in items'>
<span> {{item.title}} </span>
<input ng-model = 'item.quantity'>
<span> {{item.price | moneda}} </span>
<span> {{item.price * item.quantity | moneda}} </span>
</div>
<Div> Total: {{TotalCart () | moneda}} </div>
<Div> Descuento: {{Bill.Discount | moneda}} </div>
<div> subtotal: {{subtotal () | moneda}} </div>
</div>
<script type = "text/javaScript" src = "angular.min.js"> </script>
</body>
</html>
El reloj anterior tiene problemas de rendimiento. La función de ttotals calculados se ejecutó 6 veces, tres de las cuales se debieron a que el bucle estaba roto. Cada vez que se bucle en bucle, los datos se volvieron a renderizar.
A continuación se muestra el código modificado
La copia del código es la siguiente:
<html ng-app>
<Evista>
<title> su carrito de compras </title>
<script type = "text/javaScript">
function CartController ($ alcope) {
$ scope.bill = {};
$ scope.Items = [
{Título: 'Pintar Pots', Cantidad: 8, Precio: 3.95},
{Título: 'Polka Dots', Cantidad: 17, Precio: 12.95},
{Título: 'guijarros', cantidad: 5, precio: 6.95}
];
var totalCart = function () {
var en total = 0;
para (var i = 0, len = $ scope.items.length; i <len; i ++) {
Total = Total + $ Scope.Items [i] .price * $ scope.Items [i] .cantidad;
}
$ scope.bill.totalCart = total;
$ scope.bill.discount = total> 100? 10: 0;
$ scope.bill.subtotal = total - $ scope.bill.discount;
}
$ alcance. $ watch ('elementos', totalCart, verdadero); // Solo use el reloj para cambiar los artículos
}
</script>
</ablo>
<Body>
<div ng-confontroller = "CartController">
<div ng-repeat = 'item in items'>
<span> {{item.title}} </span>
<input ng-model = 'item.quantity'>
<span> {{item.price | moneda}} </span>
<span> {{item.price * item.quantity | moneda}} </span>
</div>
<Div> Total: {{bill.totalcart | moneda}} </div>
<Div> Descuento: {{Bill.Discount | moneda}} </div>
<Viv> Subtotal: {{Bill.Subtotal | moneda}} </div>
</div>
<script type = "text/javaScript" src = "angular.min.js"> </script>
</body>
</html>
Para matrices grandes de ITM, si solo se recalcula el atributo de factura cada vez que la página se muestra en Angular, el rendimiento será mucho mejor. Podemos lograr esto creando una función de vigilancia $ con WatchFn.
La copia del código es la siguiente:
$ alcance. $ reloj (
var totalCart = function () {
var en total = 0;
para (var i = 0, len = $ scope.items.length; i <len; i ++) {
Total = Total + $ Scope.Items [i] .price * $ scope.Items [i] .cantidad;
}
$ scope.bill.totalCart = total;
$ scope.bill.discount = total> 100? 10: 0;
$ scope.bill.subtotal = total - $ scope.bill.discount;
});
Monitorear múltiples cosas
Si desea monitorear múltiples propiedades u objetos y ejecutar una función cuando cualquiera de ellos cambia, tiene dos opciones básicas:
Monitorear los valores después de conectar estas propiedades
Póngalos en una matriz u objeto, y luego pase un valor al parámetro Deepwatch
Explicar por separado:
En el primer caso, si hay un objeto de cosas en su alcance, tiene dos propiedades A y B, y cuando ambas propiedades cambian, debe ejecutar la función CallMe (), puede monitorear estas dos propiedades al mismo tiempo $ alcance.
Cuando la lista es muy larga, debe escribir una función para devolver el valor después de la conexión.
En el segundo caso, debe monitorear todas las propiedades del objeto de cosas, puede hacer esto:
La copia del código es la siguiente:
$ alcance. $ watch ('cosas', callme (...), verdadero);
Organizar dependencias utilizando el módulo
Provider (nombre, objeto o constructor ()) Descripción: un servicio configurable, crear lógica es relativamente compleja. Si pasa un objeto como parámetro, el objeto del objeto debe tener una función llamada $ get, que debe devolver el nombre del servicio. De lo contrario, AngularJS pensará que cuando pase un constructor, llamar al constructor devolverá el objeto de instancia de servicio.
Factory (nombre, $ get function ()) Descripción: un servicio no configurable, la lógica de creación es relativamente complicada. Debe especificar una función, y cuando se llama a esta función, se devolverá la instancia del servicio. Se puede considerar como la forma de proveedor (nombre, {$ get: $ getFunction ()}).
El servicio (nombre, constructor ()) es un servicio no configurable, la creación de la lógica es relativamente simple. Similar al parámetro del constructor de la función del proveedor anterior, Angular lo llama para crear una instancia de servicio.
Ejemplo de uso de la fábrica de módulos
La copia del código es la siguiente:
<html ng-app = 'shoppingModule'>
<Evista>
<title> su carrito de compras </title>
<script type = "text/javaScript" src = "angular.min.js"> </script>
<script type = "text/javaScript">
var comprakmodule = angular.module ('compatingmodule', []);
ShoppingModule.Factory ('elementos', function () {
VAR items = {};
items.query = function () {
Devolver [
{Título: 'Pintar Pots', Descripción: 'Pots Full of Paint', Precio: 3.95},
{Título: 'Pintar Pots', Descripción: 'Pots Full of Paint', Precio: 3.95},
{Título: 'Pintar Pots', Descripción: 'Pots Full of Paint', Precio: 3.95}
];
};
devolver elementos;
});
Function ShoppingController ($ alcance, elementos) {
$ scope.items = items.query ();
}
</script>
</ablo>
<Body Ng-Controller = 'ShoppingController'>
<h1> shop !! </h1>
<Table>
<tr ng-repeat = 'elemento en elementos'>
<TD> {{item.title}} </td>
<TD> {{item.description}} </td>
<TD> {{item.price | moneda}} </td>
</tr>
</table>
</body>
</html>
Introducción de módulos de terceros
En la mayoría de las aplicaciones, cree un solo módulo para todo el código y coloque todas las dependencias en este módulo, lo que funcionará bien. Sin embargo, si planea usar servicios o instrucciones proporcionadas por paquetes de terceros, generalmente vienen con sus propios módulos, y debe definir la atención de dependencia en el módulo de aplicación para hacer referencia a ellos. Por ejemplo:
var appmod = angular.module ('app', ['snazzy', 'super']);
Ejemplos sobre el filtro
La copia del código es la siguiente:
<html ng-app = 'shoppingModule'>
<Evista>
<title> su carrito de compras </title>
<script type = "text/javaScript" src = "angular.min.js"> </script>
<script type = "text/javaScript">
var comprakmodule = angular.module ('compatingmodule', []);
ShoppingModule.Filter ('TitLecase', function () {
var titLeCaseFilter = function (input) {
Var Words = input.split ('');
para (var i = 0; i <words.length; i ++) {
palabras [i] = palabras [0] .charat (0) .touppercase () + palabras [i] .slice (1);
}
devolver palabras.Join ('');
};
return titLeCaseFilter;
});
Function ShoppingController ($ alcance) {
$ scope.pageheading = 'Este es un caso de prueba';
}
</script>
</ablo>
<Body Ng-Controller = 'ShoppingController'>
<h1> {{pageHeading | TITLECASE}} </h1>
</body>
</html>