Angular Light 0.11
Angular Light — самостоятельный клиентский MV (C/VM) фреймворк, который построен на идеях Angular.js и Knockout.js, и похож на упрощенный Angular.js
Вышла версия Angular Light 0.11, которая включает много изменений.
В Angular.js, как и в старых версиях Angular Light, Scope — это механизм отслеживания изменений (Change Detector) и в нем располагаются пользовательские данные для отслеживания. Такое смешивание данных и механизма отслеживания в одном объекте породило ряд разных проблем: для таких директив как ng-if/ng-include/ng-repeat фреймворк вынужден создавать дочерние CD с прототипом к родительскому, чтобы иметь доступ к данным — это негативно влияет на расход памяти и скорость работы, но, самое важное, примеры как этот не работают как ожидается:
{{value}}
{{value}}
ng-click=«value=5» и ng-model=«value» изменят переменную дочернего CD, которую создал ng-if, а не ту что выше. Из-за этой проблемы авторы Angular.js сделали рекомендации: не использовать данные в корне Scope (используйте имена с «точкой») и использовать controllerAs.
Так же при создании Angular 2, они учли эту проблему — теперь в нем есть отдельный тип ChangeDetector (отдельный от данных).
В Angular Light 0.11 так же внесены изменения в этом плане: бывшый Scope был разделен на ChangeDetector и пользовательские данные, — это дало дополнительную гибкость и подобные примеры (как выше) работают как ожидается:
{{value}}
{{value}}
Пример на jsfiddle
Так же и с al-repeat, al-click=«active=current» внутри цикла меняет пользовательские данные, а не дочерний Scope.
{{active.name}}
{{current.name}}
Пример на jsfiddle
Т.к. al-repeat создает локльные переменные внутри цикла: current, $index, $last и т.п. и они не должны менять пользовательские данные (как и пересекаться с другими циклами), сделан небольшой трюк, а в Angular 2 для этого создана сложная система компиляции (не даром он весит около 1.7 Мб).
Еще одно важное новшество в Angular Light: теперь в нем есть настоящие асинхронные фильтры. Если сравнивать их с Angular.js $stateful фильтрами то можно заметить, что Angular.js вызывает ваш фильтр на каждом $digest цикле, и когда вам нужно «отправить» новое значение вы его возвращаете на следующем $digest цикле, в то время, как Angular Light не «дергает» ваш фильтр каждый раз, вы можете «отправить» новое значение в любой момент (например когда данные пришли с сервера), пример: {{user.companyId | loadCompanyName}}
al-repeat теперь может итерировать по объекту, в отличие от ng-repeat, вы можете задать сортировку.
У дериктив появился «изолированный режим», при правильном использовании это может снизить нагрузку в 100 раз, для тех кто беспокоится о dirty-checking. Так же «замороженные» массивы через Object.freeze дают ускорение dirty-checking и в планах добавление поддержки популярного immutable.js
Ускорен биндинг, теперь Angular Light стал в 2 раза быстрее чем Angular.js (в некоторых случаях), тест, что удивительно — он стал быстрее чем Basis.js, не говоря о других фреймворках.
Не знаю насколько он был нужен, но al-select был добавлен в стандартную поставку, в отличие от ng-options, al-select работает совместно с al-repeat — это дает дополнительную гибкость. Например, в одном select можно использовать несколько al-repeat циклов, или добавлять пользовательские (одиночные) пункты, пример.
alight.bootstrap был немного изменен для более удобного использования, пример:
Hello {{name}}!
alight.bootstrap('#app', {
name: 'user',
click: function() {
this.name = 'world'
}
})
Пример на jsfiddle
Также внесено несколько меннее значимых улучшений. Для тех кто использовал Angular Light 0.10 и старше, есть список основных отличий.
Предыдущие статьи:
