Магия AngularJS — Еще один взгляд на директивы

в 5:38, , рубрики: Песочница, метки: , ,

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

Итак, что такое директива AngularJS?

В двух словах — это тег или атрибут тега в документе HTML, плюс немного магии.

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

Рассмотрим пример — фрагмент из готового приложения.

        <!-- Галерея картинок продукта -->
        <div ng-controller="GalleryController as gallery"  ng-show="product.images.length">
          <div class="img-wrap">
            <img ng-src="{{product.images[gallery.current]}}" />
          </div>
          <ul class="img-thumbnails clearfix">
            <li class="small-image pull-left thumbnail" ng-repeat="image in product.images">
              <img ng-src="{{image}}" ng-click="gallery.setCurrent($index)"/>
            </li>
          </ul>
        </div>

Сейчас мы увидим магию и наш пример превратится в лаконичное «ку»:

   <!-- Галерея картинок продукта -->
   <product-gallery></product-gallery>

Теперь разберемся, какие зелья нам нужно использовать, чтобы получилась такая красотища.

// Главный модуль приложения
(function(){
var app = angular('appName', []);

// Колдовство начинается!

// Название директивы автоматически преобразуется в строку типа camelCase
// Это значит, что вместо дефиса следующая буква становится заглавной 
// Поэтому в HTML пишем тег "product-gallery", а в определении директивы "productGallery"

app.directive('productGallery', function() {

   // По сути директива это лишь настройки отображения нашего нового тега
   return {

      restrict: 'E', // E - Element если определяем новый тег, и A - Attribute если новый атрибут

      templateUrl: 'product-gallery.html', // указываем файл шаблона, который будет подставляться вместо тега директивы. Простые шаблоны можно указывать прямо здесь. Для этого потребуется свойство template вместо templateUrl

      // теперь прикрепим к директиве собственный контроллер. Это оказывается очень просто
      controller: function() {
         this.current = 0;

         this.setCurrent = function(imageNumber){
           this.current = imageNumber || 0;
         };
      },

      // И еще приятный сюрприз! Зададим контроллеру алиас - короткое имя
     controllerAs: 'gallery'
   };

});
})();

Вторым компонентом естественно будет сам шаблон. Как мы помним, это файл product-gallery.html:

        <div ng-show="product.images.length">
          <div class="img-wrap">
            <img ng-src="{{product.images[gallery.current]}}" />
          </div>
          <ul class="img-thumbnails clearfix">
            <li class="small-image pull-left thumbnail" ng-repeat="image in product.images">
              <img ng-src="{{image}}" ng-click="gallery.setCurrent($index)"/>
            </li>
          </ul>
        </div>

Вау? Не знаю, как вам, а по мне так фантастика.

Соответственно после некоторых усилий приложение может принять вид:

<!-- Заголовок и цена -->
<product-title></product-title>

<!-- Описание и характеристики  -->
<product-info></product-info>

<!-- Галерея картинок продукта -->
<product-gallery></product-gallery>

И все бы хорошо, но мучает вопрос — как быть с SEO? Но это вопрос уже другой статьи.

Всем хорошего дня!


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js