На прошлой неделе я посетил хакатон и, чтобы познакомиться с ES6 в сочетании с Angular 1.x, решил использовать именно его. И это было намного проще, чем я ожидал!
Допустим, у нас есть следующая структура приложения
/ приложение
- / example (главный файл компонента)
example-controller (компонентный контроллер)
example-directive (компонентная директива)
example-service (компонентный сервис)
Мы хотим использовать классы ES6 везде, где это возможно, и я объясню, как это сделать для каждого файла.
Контроллеры и сервисы
Контроллеры и службы проще всего писать на ES6.
пример-контроллер
пример-сервис
Вы могли заметить две вещи. Во-первых, это «экспорт по умолчанию», это означает, что мы можем просто написать
импортировать ExampleService из ‘./example-service/example-service.js’;
Вместо того
импортировать {ExampleService} из "./example-service/example-service.js";
Другая вещь, которую вы могли заметить, - это ExampleService. $ Inject, который сообщает angular, какие зависимости внедрять в наш класс. Вы также можете использовать что-то вроде ngAnnotate, если хотите, чтобы
Директивы
Директивы немного сложнее писать в синтаксисе ES6, потому что Angular ожидает литерал объекта, а не функцию-конструктор. Однако это легко исправить.
пример-директива
Как видите, мы все еще можем использовать передовые методы, такие как controllerAs и синтаксис bindToController, чтобы предотвратить использование области видимости. Контроллер директивы определяется как другой класс.
Определим наш компонент
Теперь, когда мы определили все подкомпоненты нашего файла компонента, мы можем определить их в основном файле.
Как видите, отличается только синтаксис директивы, потому что Angular ожидает литерал объекта, а не функцию-конструктор.
Используйте загрузчик модулей
Мы можем использовать такой пакет, как webpack, чтобы объединить весь код в один пакет. Преимущество использования веб-пакета заключается в том, что мы также можем скомпилировать наш код для ES5 при объединении для поддержки текущих браузеров.
