атрибуты SRC и Href
В AngularJs SRC должен быть написан как NG-SRC, а HREF должен быть написан как NG-HREF, например:
Кода -копия выглядит следующим образом:
<img ng-src = "/images/cats/{{bestiTecat}}">
<a ng-href = "/shop/category = {{number}}"> немного текста </a>
выражение
Простые математические операции, операции сравнения, логические операции, операции битов, эталонные массивы и символы объекта могут быть выполнены в шаблонах. Хотя мы можем сделать много вещей с выражениями, выражение выполняется с использованием пользовательского интерпретатора (часть углового), а не использование функции javaScript eval (), поэтому он имеет большие ограничения.
Хотя выражения здесь более строгие, чем JavaScript во многих отношениях, они имеют лучшую терпимость к неисправности к неопределенным и нулевым. Если возникает ошибка, шаблон просто не показывает ничего и не бросает ошибку NullPointerException. Например:
Кода -копия выглядит следующим образом:
<div ng-controller = 'SomeController'>
<div> {{computer () /10}} < /div> // Хотя это законно, он помещает бизнес -логику в шаблон, и этого подхода следует избегать
</div>
Различать обязанности пользователя и контроллера
Контроллер связан с конкретным фрагментом DOM, который им нужно управлять. Существует два основных метода, чтобы связать контроллер с узлом DOM. Один из них объявляется через NG-контроллер в шаблоне, а второе-привязывать его с динамически загруженным фрагментом шаблона DOM посредством маршрутизации. Этот шаблон называется представлением. Мы можем создавать вложенные контроллеры, они могут делиться моделью данных и функций, унаследовав структуру чисел. Настоящее гнездование происходит на объекте $ Scope. Благодаря внутреннему первоначальному механизму наследования, объем $ родительского объекта контроллера будет передаваться во внутреннюю вложенную область $ (все свойства, включая функции). Например:
Кода -копия выглядит следующим образом:
<div ng-controller = "parentController">
<div ng-controller = "ChildController"> ... </div>
</div>
Разоблачить данные модели, используя $
Вы можете отобразить создание атрибута $ Scope, например, $ scope.count = 5. Вы также можете косвенно создавать модели данных через сам шаблон.
Проходное выражение. Например
Кода -копия выглядит следующим образом:
<кнопка ng-click = 'count = 3'> установить count на три </button>
Использование NG-модели в элементах формы
Подобно выражению, параметры модели, указанные на NG-модели, также работают во внешнем контроллере. Единственное отличие состоит в том, что это создает двустороннюю связь между элементом формы и указанной моделью.
Мониторинг изменений в моделях данных с помощью WATCH
Подпись функции $ watch: $ watch (Watchfn, WatchAction, DeepWatch)
WatchFN - это строка с угловым выражением или функцией, которая возвращает текущее значение моделируемой модели данных. WatchAction - это функция или выражение, вызываемое при изменении watchFN. Его функция подпись:
Функция (NewValue, OldValue, Scope) DeepWatch Если установлен на TRUE, этот необязательный логический параметр будет командовать угловым, чтобы проверить, изменилось ли каждое свойство контролируемого объекта. Если вы отслеживаете простое значение, чтобы контролировать элементы в массиве или все атрибуты на объекте, а не значения, вы можете использовать этот параметр. Обратите внимание, что угловой необходим для прохождения массивов или объектов. Если набор больше, то операция будет более сложной.
Функция $ Watch возвращает функцию. Если вам не нужно получать уведомления об изменениях, вы можете использовать возвращенную функцию для выхода из монитора.
Если нам нужно отслеживать свойство, а затем выйти из мониторинга, мы можем использовать следующий код: var dereg = $ scope. $ Watch ('somemodel.someproperty', callbackonchange ());
... DEREG ();
Пример кода заключается в следующем:
Кода -копия выглядит следующим образом:
<html ng-app>
<голова>
<название> Ваша корзина по магазинам </title>
<script type = "text/javascript">
Функция CartController ($ accope) {
$ scope.bill = {};
$ scope.items = [
{название: 'Paint Pots', количество: 8, цена: 3,95},
{заголовок: «Полька точки», количество: 17, цена: 12,95},
{заголовок: 'Pebbles', количество: 5, цена: 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;
}
вернуть общее количество;
}
$ scope.subtotal = function () {
return $ scope.totalcart () - $ scope.bill.discount;
}
Функция Расчеты (NewValue, OldValue, Scope) {
$ scope.bill.discount = newvalue> 100? 10: 0;
} // функция WatchAction здесь
$ scope. $ watch ($ scope.totalcart, colductionScount); // функция часов здесь
}
</script>
</head>
<тело>
<div ng-controller = "cartcontroller">
<div ng-repeat = 'item в элементах'>
<pan> {{item.title}} </span>
<input ng-model = 'item.quantity'>
<pan> {{item.price | валюта}} </span>
<pan> {{item.price * item.quantity | валюта}} </span>
</div>
<div> total: {{otatcart () | валюта}} </div>
<div> дисконтирование: {{bill.discount | валюта}} </div>
<div> subtotal: {{subtotal () | валюта}} </div>
</div>
<script type = "text/javascript" src = "angular.min.js"> </script>
</body>
</html>
Приведенные выше часы имеют проблемы с производительностью. Функция рассчитанных домов была выполнена 6 раз, три из которых были потому, что петля была сломана. Каждый раз, когда петля была зациклена, данные были повторно разъедали.
Ниже приведен модифицированный код
Кода -копия выглядит следующим образом:
<html ng-app>
<голова>
<название> Ваша корзина по магазинам </title>
<script type = "text/javascript">
Функция CartController ($ accope) {
$ scope.bill = {};
$ scope.items = [
{название: 'Paint Pots', количество: 8, цена: 3,95},
{заголовок: «Полька точки», количество: 17, цена: 12,95},
{заголовок: 'Pebbles', количество: 5, цена: 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 ('items', totalcart, true); // Используйте только часы, чтобы изменить элементы
}
</script>
</head>
<тело>
<div ng-controller = "cartcontroller">
<div ng-repeat = 'item в элементах'>
<pan> {{item.title}} </span>
<input ng-model = 'item.quantity'>
<pan> {{item.price | валюта}} </span>
<pan> {{item.price * item.quantity | валюта}} </span>
</div>
<div> total: {{bill.totalcart | валюта}} </div>
<div> дисконтирование: {{bill.discount | валюта}} </div>
<div> subtotal: {{bill.subtotal | валюта}} </div>
</div>
<script type = "text/javascript" src = "angular.min.js"> </script>
</body>
</html>
Для больших массивов ITMS, если только атрибут счета пересчитывается каждый раз, когда страница отображается в угловой степени, производительность будет намного лучше. Мы можем достичь этого, создав функцию $ Watch с WatchFN.
Кода -копия выглядит следующим образом:
$ scope. $ watch (
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;
});
Следите за несколькими вещами
Если вы хотите отслеживать несколько свойств или объектов и выполнить функцию, когда кто -либо из них изменится, у вас есть два основных параметра:
Следите за значениями после подключения этих свойств
Поместите их в массив или объект, а затем передайте значение параметру DeepWatch
Объясните отдельно:
В первом случае, если в вашей области есть объект вещей, он имеет два свойства A и B, и когда оба свойства изменяются, вам необходимо выполнить функцию CallMe (), вы можете отслеживать эти два свойства одновременно);
Когда список очень длинный, вам нужно написать функцию, чтобы вернуть значение после соединения.
Во втором случае вам нужно отслеживать все свойства объекта вещей, вы можете сделать это:
Кода -копия выглядит следующим образом:
$ scope. $ watch ('вещи', callme (...), true);
Организовать зависимости с использованием модуля
Поставщик (имя, объект или конструктор ()) Описание: настраиваемая служба, создание логики является относительно сложной. Если вы передаете объект в качестве параметра, то объект объекта должен иметь функцию с именем $ get, которая должна вернуть имя службы. В противном случае, AngularJS будет думать, что при прохождении конструктора, вызывая конструктор вернет объект экземпляра службы.
Factory (name, $ get function ()) Описание: неконфигурируемая услуга, логика создания относительно сложна. Вам необходимо указать функцию, и когда эта функция вызвана, экземпляр службы будет возвращен. Его можно рассматривать как форму провайдера (имя, {$ get: $ getFunction ()}).
Service (name, constructor ())-это неконфигурируемый сервис, создание логики относительно просто. Подобно параметру конструктора функции поставщика выше, угловые вызывает его для создания экземпляра службы.
Пример использования модульной фабрики
Кода -копия выглядит следующим образом:
<html ng-app = 'ShoppingModule'>
<голова>
<название> Ваша корзина по магазинам </title>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
var ShoppingModule = angular.Module ('ShoppingModule', []);
ShoppingModule.factory ('items', function () {
var elects = {};
items.query = function () {
Возвращаться [
{заголовок: «Paint Pots», описание: «горшки, полные краски», цена: 3,95},
{заголовок: «Paint Pots», описание: «горшки, полные краски», цена: 3,95},
{заголовок: «Paint Pots», описание: «горшки, полные краски», цена: 3,95}
];
};
вернуть предметы;
});
Функция ShoppingController ($ acpope, items) {
$ scope.items = item.query ();
}
</script>
</head>
<body ng-controller = 'ShoppingController'>
<h1> магазин !! </h1>
<Таблица>
<tr ng-repeat = 'item в элементах'>
<td> {{item.title}} </td>
<td> {{item.description}} </td>
<td> {{item.price | валюта}} </td>
</tr>
</table>
</body>
</html>
Представление сторонних модулей
В большинстве приложений создайте один модуль для всего кода и вставьте все зависимости в этот модуль, который будет работать хорошо. Однако, если вы планируете использовать услуги или инструкции, предоставленные сторонними пакетами, они обычно поставляются со своими собственными модулями, и вам необходимо определить уход за зависимостями в модуле приложения, чтобы ссылаться на них. Например:
var appmod = angular.module ('app', ['snazzy', 'super']);
Примеры фильтра
Кода -копия выглядит следующим образом:
<html ng-app = 'ShoppingModule'>
<голова>
<название> Ваша корзина по магазинам </title>
<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 ++) {
слова [i] = words [0] .charat (0) .touppercase () + words [i] .slice (1);
}
возвращать слова.join ('');
};
вернуть Tittlecasefilter;
});
Функция ShoppingController ($ accope) {
$ scope.pageheading = 'Это тестовый пример';
}
</script>
</head>
<body ng-controller = 'ShoppingController'>
<h1> {{pageheading | TITTELECASE}} </H1>
</body>
</html>