ITVDN logo
Видеокурсы по
программированию

Доступ более чем к 7700 видеоурокам от $19.99

Подписка
ITVDN logo
Видеокурсы по
программированию

Доступ более чем к 7700 видеоурокам от $19.99

Подписка

Введение

Давайте рассмотрим практику написания 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 () {};

};

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

СТАТЬИ ПО СХОЖЕЙ ТЕМАТИКЕ
ВИДЕО КУРСЫ ПО СХОЖЕЙ ТЕМАТИКЕ

КОМЕНТАРИИ И ОБСУЖДЕНИЯ

ОЦЕНИТЕ ДАННЫЙ МАТЕРИАЛ

ПОДПИСКА НА ITVDN ВЫГОДА ДО 29.95$ НА ОБУЧЕНИЕ ПРЕСТИЖНЫМ ПРОФЕССИЯМ!

1 месяц19.99$
подписка

легкий старт в обучении

3 месяца49.99$
подписка

выгода от подписки до9.98$

6 месяцев89.99$
подписка

выгода от подписки до29.95$