Вступление к AngularDart: лучший Angular

Компоненты

Компонент, который мы рассмотрим далее, переключает видимость его содержимого, и его можно использовать следующим образом:

<toggle button="Toggle">
  <p>Inside</p>
</toggle>

Это AngularJS реализация этого компонента:

//JS:
directive("toggle", function(){
  return {
    restrict: 'E',

    replace: true,
    transclude: true,

    scope: {button: '@'},

    template: "<div><button ng-click='toggle()'>{{button}}</button><div ng-transclude ng-if='showContent'/></div>",

    controller: function($scope){
      $scope.showContent  = false;
      $scope.toggle = function(){
        $scope.showContent  = !$scope.showContent ;
      };
    }
  }
})

Теперь давайте сопоставим это с версией Dart:

//DART:
@NgComponent(
  selector: "toggle",
  publishAs: 't',
  template: "<button ng-click='t.toggle()'>{{t.button}}</button><content ng-if='t.showContent'/>"
)
class Toggle {
  @NgAttr("button")
  String button;

  bool showContent = false;
  toggle() => showContent = !showContent;
}

• NgComponent говорит Angular, что этот класс является компонентом.
• publishAsэто имя, которое мы можем использовать в шаблоне для доступа к toggleобъекту. Стоит отметить, что tдоступно только в шаблоне этого компонента, а не во вставленном контенте.
• templateНе удивительно, определяет, как этот пользовательский элемент отображается.

Хотя версии JS и Dart выглядят одинаково, под капотом есть важные различия.

Компонент AngularDart использует теневой DOM для визуализации своего шаблона.

AngularJS:

AngularDart:

Shadow DOM предоставляет нам инкапсуляцию DOM и CSS, которая отлично подходит для создания повторно используемых компонентов. Кроме того, API был изменен в соответствии со спецификациями веб-компонентов (например, ng-transcludeбыл заменен на content).

Компонент AngularDart использует элемент шаблона для хранения своего шаблона.

Это устраняет необходимость таких взломов, как ng-src.

Напомним, что директивы используются для расширения элемента DOM. Компоненты — это облегченная версия веб-компонентов, и они используются для создания пользовательских элементов.

Контроллеры

В следующем примере показан очень простой контроллер, реализованный в AngularJS.

//JS:
<div ng-controller="CompareCtrl as ctrl">
  First <input type="text" ng-model="ctrl.firstValue">
  Second <input type="text" ng-model="ctrl.secondValue">

  {{ctrl.valuesAreEqual()}}
</div>


controller("CompareCtrl", function(){
  this.firstValue = "";
  this.secondValue = "";

  this.valuesAreEqual = function(){
    return this.firstValue == this.secondValue;
  };
});

Версия Dart совсем другая.

//DART:
<div compare-ctrl>
  First <input type="text" ng-model="ctrl.firstValue">
  Second <input type="text" ng-model="ctrl.secondValue">

  {{ctrl.valuesAreEqual}}
</div>

@NgController(
  selector: "[compare-ctrl]",
  publishAs: 'ctrl'
)
class CompareCtlr {
  String firstValue = "";
  String secondValue = "";

  get valuesAreEqual => firstValue == secondValue;
}

Как упоминалось выше, контроллеры — это в основном директивы, которые создают новую область видимости в элементе. Все параметры, которые можно использовать при определении новой директивы, также можно использовать при определении контроллера. Сказав это, все же будет хорошей идеей избегать использования какой-либо логики манипулирования DOM в ваших контроллерах, даже если она не поддерживается платформой.

фильтры

Наконец, давайте посмотрим, как вы можете определить фильтр.

//JS:
filter("isBlank", function(){
  return function(value){
    return value.length == 0;
  };
});

и версия Dart:

//DART:
@NgFilter(name: 'isBlank')
class IsBlank {
  call(value) => value.isEmpty;
}

Зоны и $ scope. $ Apply

Опытные разработчики Angular оценят следующую функцию. Можно утверждать, что это оказывает наибольшее влияние из тех, которые я рассмотрел в этой статье:

Нет необходимости звонить $scope.$applyпри интеграции со сторонними компонентами.

Позвольте мне проиллюстрировать это следующим примером.

<div ng-controller="CountCtrl as ctrl">
  {{ctrl.count}}
</div>

CountCtrl это контроллер, который просто увеличивает countпеременную.

//JS:
controller("CountCtrl", function(){
  var c = this;
  this.count = 1;

  setInterval(function(){
    c.count ++;
  }, 1000);
})

Опытный разработчик AngularJS сразу заметит, что код не работает. Angular просто не может видеть, что countпеременная была изменена в обратном вызове. Чтобы исправить эту проблему, вы должны обернуть ее $scope.$applyследующим образом:

//JS:
controller("CountCtrl", function($scope){
  var c = this;
  this.count = 1;

  setInterval(function(){
    $scope.$apply(function(){
      c.count ++;
    });
  }, 1000);
})

Это фундаментальное ограничение AngularJS — вам нужно сообщить Angular для проверки изменений. Фреймворки стараются свести к минимуму количество мест, где вам нужно это сделать, связав библиотеку фьючерсов и предоставив $intervalсервис. Но в тот момент, когда вы начнете использовать какую-то другую библиотеку фьючерсов или, в общем случае, будете интегрироваться с асинхронными сторонними компонентами, вам придется это использовать $scope.$apply.

Теперь давайте сопоставим это с версией Dart.

//DART:
<div count-ctrl>
  {{ctrl.count}}
</div>

@NgController(
    selector: "[count-ctrl]",
    publishAs: 'ctrl'
)
class CountCtrl {
  num count = 0;

  CountCtrl(){
    new Timer.periodic(new Duration(seconds: 1), (_) => count++);
  }
}

Версия Dart работает, хотя ее нет $apply, и Timerничего не знает об Angular. Это фантастика! Чтобы понять, как это работает, нам нужно узнать о концепции зон.

Dart Docs: A Zone represents the asynchronous version of a dynamic extent. Asynchronous callbacks are executed in the zone they have been queued in. For example, the callback of a future.then is executed in the same zone as the one where the then was invoked.

Вы можете представить Зону как локальную переменную потока в среде, основанной на событиях. Среда всегда имеет текущую зону, и все обратные вызовы всех асинхронных операций проходят через текущую зону. Это дает Angular место для проверки изменений.

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

Завершение

• API AngularDart основаны на классах.
• Фреймворк использует инъекцию по типу вместо инъекции по имени.
• Типы объектов отделены от того, как они зарегистрированы в системе DI.
• Аннотации, такие как NgControllerи NgDirective, используются для настройки объектов для инъекций.
• Директивы, фильтры, компоненты, контроллеры и услуги все могут быть зарегистрированы с помощью value, typeи factory.
• Директивы используются для расширения элементов DOM.
• Компоненты — это облегченная версия веб-компонентов, и они используются для создания пользовательских элементов.
• Компоненты используют теневой DOM для визуализации своих шаблонов.
• Контроллеры — это директивы, которые создают новую область видимости для элемента, к которому они применяются.
• Прицел автоматически переваривается через зоны дротиков, что исключает необходимость scope.$apply.

Что будет перенесено на JS

Основываясь на выступлении Миско и Игоря в Devoxx, похоже, что большинство изменений будут перенесены в AngularJS, в частности:

• Тип на основе инъекций
• Использование аннотаций для определения объектов
• Использование теневого DOM
• зон

Учить больше

Я надеюсь, что эта статья даст вам достаточно информации, чтобы начать. Если вы хотите узнать больше, проверьте:

• DartCasts Episode 19: Создание приложения с AngularDart.
• DartCasts Episode 20: AngularDart, часть 2.
• Пример приложения AngularDart.