Введение

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

 

AngularJS


 

Итак, начнем.

1) Создавая новое приложение, старайтесь разделять модуль, контроллер, фабрику, вынося их в отдельные файлы. Этот прием имеет ряд приимуществ:

  • улучшается читаемость приложения
  • улучшается рефакторинг приложения
  • легче производить дебаггинг приложения

 

//плохая практика

angular

       .module('app', ['ngRoute'])

       .controller('myController', myController)

       .factory('myFactory', myFactory);

function myController() { };

function myFactory() { };

 

 

//рекомендуется

//myapp.module.js – файл модуля

angular

       .module('app', ['ngRoute']);

 

//mycontroller.js – файл контроллера

angular

.module('app')

.controller('myController', myController);

function myController() { };

 

 

//myfactory.js – файл фабрики

angular

       .module('app')

       .factory('myFactory', myFactory);

function myFactory() { };

 

2) Старайтесь оборачивать код в самовызывающиеся функции.

Это позволяет :

  • сохранить переменные от глобального объекта scope
  • предотвратить перетирание глобальных переменных (т.к. они локальны)
  • при минификации кода помогает избежать путаницы переменных

 

//плохая практика

angular

       .module('app')

       .factory('myfactory', myfactory);

function myfactory() { };

 

//рекомендуется

(function () {

    'use strict';

    angular

        .module('app')

        .factory('myfactory', myfactory);

    function myfactory() { };

})();

 

3) Старайтесь придерживаться иерархии именования. Это поможет правильно структурировать приложение, что в итоге приведет к правильной архитектуре программы.

Избегайте создания модуля через переменную и используйте цепочный синтаксис (в виде цепочки)

 

//плохая практика

var app = angular.module('app', [

       'ngAnimate',

       'ngCookies',

       'firebase'

]);

 

//рекомендуется

angular

       .module('app', [

       'ngAnimate',

       'ngCookies',

       'firebase'

]);

 

4) Используйте именованные функции. Код становится более читабельным и куда лучше тестируется. 

 

//плохая практика

angular

       .module('app')

       .controller('mycontroller', function () { });

 

//рекомендуется (обратите внимание на контроллер он вынесен в отдельный файл

//от модуля)

 

//myapp.module.js – файл модуля

angular

       .module('app', ['ngRoute']);

 

//mycontroller.js – файл контроллера

angular

.module('app')

.controller('myController', myController);

function myController() { };

 

5) Используйте controller as нотацию вместо просто controller. Она более читабельна, помогает не запутаться в коде 

 

    //плохая практика

    <div ng-controller=”myController”>{{title}}div>

 

    //используем

    <div ng-controller=”myController as mycontroller”>{{mycontroller.name}}div>

 

6) Используйте слово vm(ViewModel) внутри контроллера вместо ключевого слова this. Это поможет избежать подмены контекста внутри функции. 

 

//антипаттерн

function mycontroller () {

       this.name = {};

       this.deleteSome = function () {};

};

 

//паттерн

function mycontroller () {

       var vm =  this;

       vm.name = {};

       vm.deleteSome = function () {};

};

 

Это лишь базовые приемы, которые вы можете использовать в своей практике. Они помогут вам избежать некоторых проблем в вашей роботе и сделать код вашего приложения чище и понятнее. Желаю вам хорошего кода и светлых идей.