Как-то давно переводил статью habrahabr.ru/post/190342/. На практике, конечно, не всё ...
... о делегировании в
в контексте ... приемлем в декларативном
. Собственно, последовал ...
Гришковец как бы говорит нам «А давайте разберемся»
В комментариях к статье мною был задан вопрос о делегировании в AngularJS в контексте того, что привычный многим императивный способ назначения обработчика для группы элементов аля
$('ul').on('click', 'li', function(){ // обработчик ....
не совсем приемлем в декларативном AngularJS. Собственно, последовал совет использовать свою директиву, решающую проблему делегирования. На самом деле, на ум мне ничего толкового не пришло, и я решил погуглить, наткнулся на такой вариант: создаем директиву, которую необходимо установить на родительский для группы нужных нам элементов узел, который регистрирует слушателя.
Вот демо.
А вот 2 интересующие нас части кода:html
<ul bn-delegate="li a | selectFriend( friend )">
<li ng-repeat="friend in friends">
<!-- Delegate target. -->
<a href="#">{{ friend.name }}</a>
<!-- Delegate target. -->
</li>
</ul>
//js
element.on(
"click.bnDelegate",
selector,
function( event ) {
// Prevent the default behavior - this is
// not a "real" link.
event.preventDefault();
// Find the scope most local to the target
// of the click event.
var localScope = $( event.target ).scope();
// Invoke the expression in the local scope
// context to make sure we adhere to the
// proper scope chain prototypal inheritance.
localScope.$apply(
function() {
expressionHandler( localScope );
}
);
}
);
Но подождите. В зависимостях получается jQuery (можно обойтись без него, но тем не менее), но это пол беды. В дебрях директивы все тот же императивный подход. Собственно, в этот момент я решил опубликовать пост, с попыткой разобраться в подходах к делегированию в Angular, в комментарии призываются все, кому есть что сказать по этому поводу.
Читать дальше →
Про директивы много написано, но мало о том как писать их правильно. Поделюсь опытом.
Про директивы много написано, но мало о том как писать их правильно. Поделюсь опытом.
Хорошо написанная директива должна
- решать одну задачу
- легко расширяться
- не конфликтовать с другими директивами
Разберем каждый пункт на примере поля для ввода пароля (думаю, всем знакомо поле с глазиком)
<input ng-model="user.password"
ng-minlength="6"
form-password
form-error="Не менее 6 символов">
Сколько директив используется? Читать дальше →
![](http://habrastorage.org/getpro/habr/post_images/69a/dbc/39c/69adbc39c2886a2070b47e1e54f2910a.png)
Хочу поделиться своим билдером для Angular.js приложения.
Вкратце суть.
Есть файл, в котором объявляется наш главный модуль /app.js:
angular.module('App',['/some_path/my_module.js']);
В качестве требуемого модуля у него указан путь к другому файлу /some_path/my_module.js
angular.module('MyModule',[]);
Обращаемся к билдеру
ngbuild app.js app.build.js
И смотрим в файл /app.build.js
angular.module('MyModule',[]);
angular.module('App',['MyModule']);
Под катом будет еще несколько примеров использования и интеграции с gulp и grunt.
Читать дальше →
... поддержка фреймворка
, JavaScript-трейсер ...
Вот и настало время весеннего обновления WebStorm, нашей IDE для front-end разработки и Node.js.
В новом WebStorm 8 появились поддержка фреймворка
AngularJS, JavaScript-трейсер
spy-js, долгожданные
множественные курсоры в редакторе, интеграция
Grunt и
Bower и еще много интересных нововведений и улучшений.
Теперь обо всем по порядку.
![image](http://habrastorage.org/getpro/habr/post_images/014/575/1c7/0145751c7e763df44a298a598daf752b.png)
Читать дальше →