Статьи

AngularJS Coding Best Practices

Август 23, 2017

В этой статье перечислены некоторые из лучших практик, которые будут полезны для разработчиков, когда они пишут код с помощью AngularJS. Это из моего собственного опыта работы с AngularJS и не гарантирует весь список. Я уверен, что в этом списке может быть что-то еще, и поэтому попросите моих читателей предложить / прокомментировать, чтобы их можно было добавить в список ниже. Найдены некоторые из следующих страниц, на которых представлен набор полезных практик, на которые вы хотели бы сослаться. Спасибо читателям за ценный вклад.

инициализация

  • Надо попытаться поместить тег <script>, включая angular.js и связанные угловые скрипты, внизу страницы, чтобы сократить время загрузки приложения. Это связано с тем, что загрузка HTML не будет заблокирована загрузкой angular.js и связанных скриптов.

Выражения

  • Сложный код JavaScript должен быть создан как метод в контроллере (добавлен как метод в область действия $), а затем вызван из представления. Это не похоже на размещение сложного кода Javascript в виде угловых выражений прямо в представлении.

Контроллеры

  • В реальных приложениях следует избегать создания контроллеров в глобальном масштабе. Скорее следует использовать метод «.controller» углового модуля для работы с объектом $ scope. Посмотрите на пример кода ниже, иллюстрирующий этот момент:

Контроллер, определенный в Global Scope:

function HelloController( $scope ) {
$scope.name = "Guest";
}

Контроллер определяется методом «.controller» (рекомендуемый способ)

var helloApp = angular.module( "helloApp", [] );
helloApp.controller( "HelloController", function($scope){
$scope.name = "Guest";
} );
  • Контроллеры должны использоваться только для установки начального состояния объекта $ scope и добавления одного или нескольких поведений к этому объекту. Следует избегать использования контроллеров для выполнения некоторых из следующих действий:

    • Манипулировать DOM, 
    • Формат ввода, 
    • Выход фильтра, 
    • Совместное использование кода или состояния на разных контроллерах
    • Управление жизненным циклом других компонентов (например, для создания экземпляров службы)
  • Контроллер должен содержать только бизнес-логику, необходимую для одного представления. Функциональность скорее должна быть перенесена в службы, а эти службы должны быть внедрены в контроллеры с помощью внедрения зависимостей.
  • Рекомендуемый способ объявить функцию контроллера — использовать обозначение массива, например, следующее, потому что оно защищает от минимизации.

Создание экземпляра контроллера без обозначения массива

var helloApp = angular.module( "helloApp", [] );
helloApp.controller( "HelloController", function($scope){
$scope.name = "Guest";
} );

Создание экземпляра контроллера с нотацией массива ( рекомендуемый способ )

var helloApp = angular.module( "helloApp", [] );
helloApp.controller( "HelloController", ['$scope', function($scope){
$scope.name = "Guest";
}]);
  • При написании модульных тестов для контроллеров , одним из рекомендуемых способов является внедрение $ rootScope & $ controller . Взгляните на примеры модульных тестов на этой странице:  http://hello-angularjs.appspot.com/angularjs-unit-test-code-example-1 . Ниже приведен пример кода, представляющего внедрение объектов $ rootScope и $ controller.

    beforeEach(
inject(
function( $rootScope, $controller ){
scopeMock = $rootScope.$new();
$controller( 'CompanyCtrl', {$scope: scopeMock} );
}
)
);

Директивы

  • Следует предпочесть использование формата с разделителями тире (например, ng-модель для ngModel). Работая с инструментом проверки HTML, можно вместо этого использовать версию с префиксом данных (например, data-ng-model для ngModel).
  • Предпочитаю использовать директивы через имя тега и атрибуты над комментариями и именами классов. Обычно это облегчает определение того, какие директивы соответствуют данному элементу.
  • При создании директив рекомендуется использовать префикс собственных имен директив, чтобы избежать коллизий с будущими стандартами.

шаблон

  • В случае больших шаблонов (содержимое HTML с директивами Angular) в файле HTML рекомендуется разбить его на собственный файл HTML и загрузить с помощью параметра templateUrl.

Внедрение зависимости

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

  • Создайте его, используя новый оператор.
  • Ищите его в известном месте, также известном как глобальный синглтон.
  • Спросите реестр (также известный как реестр служб) для этого.

Модульное тестирование

  • Как упоминалось выше, следует избегать использования методов контроллера для манипулирования DOM. Это привело бы к коду представления внутри методов и затруднило бы его тестирование.
  • Можно использовать комбинацию жасмин / карма для тестирования методов контроллера.
  • Каркас транспортира может быть использован для тестирования E2E, как рекомендуется. Читайте больше на угловой странице для тестирования E2E .

30
Share: