atributos SRC e HREF
Em AngularJS, o SRC deve ser escrito como NG-SRC, e o HREF deve ser escrito como Ng-Href, por exemplo:
A cópia do código é a seguinte:
<img ng-src = "/imagens/cats/{{favoritecat}}">
<a ng-href = "/shop/category = {{number}}"> algum texto </a>
expressão
Operações matemáticas simples, operações de comparação, operações booleanas, operações de bits, matrizes de referência e símbolos de objetos podem ser realizados em modelos. Embora possamos fazer muitas coisas com expressões, a expressão é executada usando um intérprete personalizado (parte do angular), em vez de usar a função JavaScript Eval (), por isso possui grandes limitações.
Embora as expressões aqui sejam mais rigorosas que o JavaScript de várias maneiras, elas têm melhor tolerância a falhas a indefinidas e nulas. Se um erro for encontrado, o modelo simplesmente não mostra nada e não lançará um erro NullPointerException. Por exemplo:
A cópia do código é a seguinte:
<Div ng-Controller = 'SomeController'>
<div> {{Computer () /10}} </div> // Embora seja legal, coloca a lógica de negócios no modelo, e essa abordagem deve ser evitada
</div>
Distinguir entre as responsabilidades da interface do usuário e do controlador
O controlador está vinculado a um fragmento DOM específico, que é o que eles precisam gerenciar. Existem dois métodos principais para associar o controlador ao nó DOM. Um é declarado através do controlador NG no modelo, e o segundo é ligá-lo a um fragmento de modelo DOM carregado dinamicamente por meio do roteamento. Este modelo é chamado de visualização. Podemos criar controladores aninhados, eles podem compartilhar o modelo de dados e funções herdando a estrutura numérica. O ninho real ocorre no objeto $ SCOPE. Através do mecanismo de herança original interno, o escopo $ do objeto controlador pai será passado para o escopo de $ interno aninhado (todas as propriedades, incluindo funções). Por exemplo:
A cópia do código é a seguinte:
<div ng-controller = "parentcontroller">
<div ng-controller = "Childcontroller"> ... </div>
</div>
Expor dados de modelo usando $ escopo
Você pode exibir a criação do atributo $ scope, como $ scope.count = 5. Você também pode criar indiretamente modelos de dados através do próprio modelo.
Passe a expressão. Por exemplo
A cópia do código é a seguinte:
<Button ng-click = 'count = 3'> defina contagem para três </butut>
Usando o modelo NG em itens de formulário
Semelhante à expressão, os parâmetros do modelo especificados no modelo NG também funcionam dentro do controlador externo. A única diferença é que isso cria uma relação de ligação bidirecional entre o item de formulário e o modelo especificado.
Monitore as alterações nos modelos de dados usando o relógio
A assinatura da função de $ watch é: $ watch (watchfn, watchaction, Deepwatch)
O Watchfn é uma string com uma expressão ou função angular que retorna o valor atual do modelo de dados monitorado. O WatchAction é uma função ou expressão chamada quando o WatchFN muda. Sua assinatura de função é:
função (newValue, OldValue, Scope) Deepwatch Se definido como true, este parâmetro booleano opcional comandará o Angular para verificar se cada propriedade do objeto monitorado mudou. Se você monitorar um valor simples para monitorar elementos na matriz ou todos os atributos do objeto, em vez de valores, poderá usar esse parâmetro. Observe que o Angular precisa atravessar matrizes ou objetos. Se o conjunto for maior, a operação será mais complicada.
A função $ watch retorna uma função. Quando você não precisa receber notificações de alteração, você pode usar a função retornada para sair do monitor.
Se precisarmos monitorar uma propriedade e depois sair do monitoramento, podemos usar o seguinte código: var desreg = $ scope. $ Watch ('somemodel.omeproperty', callbackonchange ());
... Dereg ();
O código de exemplo é o seguinte:
A cópia do código é a seguinte:
<html ng-app>
<head>
<Title> Seu carrinho de compras </ititure>
<script type = "text/javascript">
Função CartController ($ SCOPE) {
$ scope.bill = {};
$ scope.items = [
{Title: 'Paint Pots', Quantidade: 8, Preço: 3,95},
{Title: 'Polka Dots', Quantidade: 17, Preço: 12.95},
{Title: 'Pebbles', Quantidade: 5, Preço: 6.95}
];
$ scope.totalcart = function () {
var total = 0;
for (var i = 0, len = $ scope.items.length; i <len; i ++) {
total = total + $ scope.items [i] .price * $ scope.items [i] .quantity;
}
retorno total;
}
$ scope.subtotal = function () {
retornar $ scope.totalcart () - $ scope.bill.discount;
}
função calculouCount (newValue, OldValue, Scope) {
$ scope.bill.discount = newvalue> 100? 10: 0;
} // a função de relógio aqui
$ scope. $ relógio ($ scope.totalcart, calculouCount); // a função de relógio aqui
}
</script>
</head>
<Body>
<div ng-controller = "CartController">
<div ng-repeat = 'item em itens'>
<pan> {{item.title}} </span>
<Entre ng-model = 'item.quantity'>
<pan> {{item.price | Moeda}} </span>
<pan> {{item.price * item.quantity | Moeda}} </span>
</div>
<div> Total: {{totalCart () | Moeda}} </div>
<div> desconto: {{bill.discount | Moeda}} </div>
<div> subtotal: {{subtotal () | Moeda}} </div>
</div>
<script type = "text/javascript" src = "angular.min.js"> </script>
</body>
</html>
O relógio acima tem problemas de desempenho. A função calculada dos pontos foi executada 6 vezes, três das quais porque o loop foi quebrado. Cada vez que o loop era loop, os dados eram renderizados novamente.
Abaixo está o código modificado
A cópia do código é a seguinte:
<html ng-app>
<head>
<Title> Seu carrinho de compras </ititure>
<script type = "text/javascript">
Função CartController ($ SCOPE) {
$ scope.bill = {};
$ scope.items = [
{Title: 'Paint Pots', Quantidade: 8, Preço: 3,95},
{Title: 'Polka Dots', Quantidade: 17, Preço: 12.95},
{Title: 'Pebbles', Quantidade: 5, Preço: 6.95}
];
var totalCart = function () {
var total = 0;
for (var i = 0, len = $ scope.items.length; i <len; i ++) {
total = total + $ scope.items [i] .price * $ scope.items [i] .quantity;
}
$ scope.bill.totalcart = total;
$ scope.bill.discount = total> 100? 10: 0;
$ scope.bill.subtotal = total - $ scope.bill.discount;
}
$ SCOPE. $ Watch ('itens', TotalCart, True); // Use apenas o relógio para alterar os itens
}
</script>
</head>
<Body>
<div ng-controller = "CartController">
<div ng-repeat = 'item em itens'>
<pan> {{item.title}} </span>
<Entre ng-model = 'item.quantity'>
<pan> {{item.price | Moeda}} </span>
<pan> {{item.price * item.quantity | Moeda}} </span>
</div>
<div> Total: {{Bill.totalCart | Moeda}} </div>
<div> desconto: {{bill.discount | Moeda}} </div>
<div> subtotal: {{bill.subtotal | Moeda}} </div>
</div>
<script type = "text/javascript" src = "angular.min.js"> </script>
</body>
</html>
Para matrizes ITMs grandes, se apenas o atributo de fatura for recalculado sempre que a página for exibida no Angular, o desempenho será muito melhor. Podemos conseguir isso criando uma função $ watch com watchfn.
A cópia do código é a seguinte:
$ scope. $ relógio (
var totalCart = function () {
var total = 0;
for (var i = 0, len = $ scope.items.length; i <len; i ++) {
total = total + $ scope.items [i] .price * $ scope.items [i] .quantity;
}
$ scope.bill.totalcart = total;
$ scope.bill.discount = total> 100? 10: 0;
$ scope.bill.subtotal = total - $ scope.bill.discount;
});
Monitore várias coisas
Se você deseja monitorar várias propriedades ou objetos e executar uma função quando alguma delas muda, você tem duas opções básicas:
Monitore os valores após conectar essas propriedades
Coloque -os em uma matriz ou objeto e depois passe um valor para o parâmetro Deepwatch
Explique separadamente:
No primeiro caso, se houver um objeto de coisas em seu escopo, ele possui duas propriedades A e B e, quando as duas propriedades mudarem, você precisa executar a função callMe (), você pode monitorar essas duas propriedades ao mesmo tempo $ SCOPE.
Quando a lista é muito longa, você precisa escrever uma função para retornar o valor após a conexão.
No segundo caso, você precisa monitorar todas as propriedades do objeto das coisas, você pode fazer isso:
A cópia do código é a seguinte:
$ scope. $ watch ('coisas', callme (...), verdadeiro);
Organize dependências usando o módulo
Provedor (nome, objeto ou construtor ()) Descrição: Um serviço configurável, a criação de lógica é relativamente complexa. Se você passar um objeto como um parâmetro, o objeto deve ter uma função chamada $ get, que precisa retornar o nome do serviço. Caso contrário, o AngularJS pensará que, quando você passar por um construtor, chamando o construtor retornará o objeto da instância do serviço.
Factory (nome, $ get function ()) Descrição: Um serviço não confundível, a lógica de criação é relativamente complicada. Você precisa especificar uma função e, quando essa função é chamada, a instância de serviço será retornada. Pode ser considerado como a forma de provedor (nome, {$ get: $ getFunction ()}).
Serviço (nome, construtor ()) é um serviço não confundível, a criação de lógica é relativamente simples. Semelhante ao parâmetro construtor da função do provedor acima, o Angular o chama para criar uma instância de serviço.
Exemplo de usar o Module Factory
A cópia do código é a seguinte:
<html ng-App = 'ShoppingModule'>
<head>
<Title> Seu carrinho de compras </ititure>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
var shoppingModule = angular.module ('ShoppingModule', []);
ShoppingModule.Factory ('itens', function () {
var itens = {};
items.Query = function () {
Retornar [
{Title: 'Paint Pots', Descrição: 'Pots cheios de tinta', preço: 3,95},
{Title: 'Paint Pots', Descrição: 'Pots cheios de tinta', preço: 3,95},
{Title: 'Paint Pots', Descrição: 'Pots cheios de tinta', preço: 3,95}
];
};
itens de retorno;
});
função shoppingcontroller ($ scope, itens) {
$ scope.items = items.query ();
}
</script>
</head>
<Body ng-Controller = 'ShoppingController'>
<H1> compra !! </h1>
<tabela>
<tr ng-repeat = 'Item em itens'>
<td> {{item.title}} </td>
<td> {{item.description}} </td>
<td> {{item.price | Moeda}} </td>
</tr>
</tabela>
</body>
</html>
Apresentando módulos de terceiros
Na maioria dos aplicativos, crie um único módulo para todo o código e coloque todas as dependências neste módulo, o que funcionará bem. No entanto, se você planeja usar serviços ou instruções fornecidas por pacotes de terceiros, eles geralmente vêm com seus próprios módulos e precisará definir cuidados de dependência no módulo de aplicativo para fazer referência a eles. Por exemplo:
var appMod = angular.module ('app', ['snazzy', 'super']);
Exemplos sobre filtro
A cópia do código é a seguinte:
<html ng-App = 'ShoppingModule'>
<head>
<Title> Seu carrinho de compras </ititure>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
var shoppingModule = angular.module ('ShoppingModule', []);
ShoppingModule.Filter ('TitleCase', function () {
var titleCaseFilter = function (input) {
var words = input.split ('');
for (var i = 0; i <words.length; i ++) {
palavras [i] = palavras [0] .Charat (0) .toupPercase () + palavras [i] .Slice (1);
}
devolver palavras.Join ('');
};
retornar titleCaseFilter;
});
função shoppingcontroller ($ scope) {
$ scope.pageHeading = 'Este é um caso de teste';
}
</script>
</head>
<Body ng-Controller = 'ShoppingController'>
<H1> {{Pageheading | titleCase}} </h1>
</body>
</html>