ng – Stepan Suvorov Blog https://stepansuvorov.com/blog Release 2.0 Wed, 22 Feb 2017 09:02:34 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.1 angular-cli + `ng eject` => webpack welcome back https://stepansuvorov.com/blog/2017/02/angular-cli-ng-eject-webpack-welcome-back/ https://stepansuvorov.com/blog/2017/02/angular-cli-ng-eject-webpack-welcome-back/#comments Wed, 22 Feb 2017 09:02:34 +0000 http://stepansuvorov.com/blog/?p=3270 Continue reading ]]> Наконец-то(начиная с 1.0.0-beta.32) разработчики angular-cli дали доступ к более тонким настройкам webpack и теперь не нужно выбирать между двумя инструментами. Выполнив команду:

[shell]
ng eject
[/shell]

у вас появится файл вебпак конфига в корне проекта, и теперь вместо команды ng вы запускаете старую добрую npm:

[shell]
ng serve -> npm start
ng build -> npm run build

[/shell]

 

P.S.: Уже наткнулся на проблему с поломанной подстановкой environment файла (issue).

]]>
https://stepansuvorov.com/blog/2017/02/angular-cli-ng-eject-webpack-welcome-back/feed/ 1
ngDirective – директива для загрузки директив https://stepansuvorov.com/blog/2014/02/ng-directive/ https://stepansuvorov.com/blog/2014/02/ng-directive/#respond Mon, 10 Feb 2014 22:11:29 +0000 http://stepansuvorov.com/blog/?p=1404 Continue reading ]]> Суть:

директива типа “атрибут”, значением идет имя поддирективы, которую необходимо динамически подгрузить. Может быть удобно в случае, когда в зависиомти от условия мы должны выводить различные компоненты.

Предистория:

В проекте (на AngularJS) стала задача вывести список сущностей, каждая из которых имеет свойства и представление (директивы). Но сложность заключается в том, что сущности могут буть разных типов, совершенно разных: с различным представлением и поведением. Вопрос: “что делать, если хочется все вывести через ng-repeat?”. Одну директиву в духе god-antipattern, где будет сразу все возможные варианты поведения и отображения, лепить не хотелось. Хотелось использовать разные, чтобы потом еще можно было делать новые и они автоматически подхватывались. Но как их подгружать?

Решение:

Для динамической сборки директивы нам нужен сервис $compile. В итоге получилось такое( выкладываю упрощенный вариант):

html:

<div ng-repeat="item in items">
  <itemDirective></itemDirective>
</div>

а внутри директивы itemDirective:

element.append($compile(angular.element('<' + $scope.item.type + '/>'))($scope));

После чего пришла мысль “а почему бы это не оформить в виде директивы, которая будет подгружать в себя в зависимости от параметра другую директиву“.

И код преобразился следующим образом:

<div ng-repeat="item in items">
  <itemDirective ng-directive="{{item.type}}"></itemDirective>
</div>

А в директиве:

element.append($compile(angular.element('<' +  attrs.ngDirective + '/>'))($scope));
Так же не помешает наблюдение за состояние атрибута, чтобы было в духе Ангуляра, поэтому добавим $observe:
attrs.$observe('ngDirective', function(directive) {
    element.html('');
    element.append($compile(angular.element('<' + directive + '/>'))($scope));
});

 

Вот код и демо.

Очень бы хотелось услышать конструктивную критику.

Идея пришла под вдохновлением от прочтения этой статьи.

 

UPD: как подсказали в сообществе:

  1. лучше не смешивать логику с представлением(хранить имя директивы в контролере)
  2. следить за утечками памяти, ибо в данном случае новая директива создает много вотчеров, которые потом никто не зачищает
  3. использовать для данной задачи ngSwitch

 

]]>
https://stepansuvorov.com/blog/2014/02/ng-directive/feed/ 0