Автор оригинала: Faizan Haider.
При разработке приложения, используя конкретную рамку/библиотеку, вам нужно знать о том, что это лучшие практики и стиль для создания чистого и краткого кода.
Они основаны на моем опыте работы в команде и https://docs.angularjs.org/guide. Вы можете использовать эти практики любым там, где некоторые более конкретные для Angularjs, как «Ручная аннотация для инъекций зависимости»
Небольшие и чистые функции
Используйте небольшие функции, потому что их легко проверить и поддерживать. Чистые функции возвращают выходные данные в зависимости от некоторого ввода. Эти функции не изменяют входные данные каким-либо образом и только задание – создать вывод.
// Pure function
function add (a, b) {
return a + b;
}
// Not pure function
function add (a, b) {
var x = a + b;
console.log(x); // Doing other job than returning output
return x;
}
Модули и ответственность
Разделите свой код в отдельных модулях, а каждые модули должны быть ответственны за одну функциональность. Это повышает удобство использования. Например, вы создаете почтовое приложение, как Gmail. Вы разделяете функциональность на трех частях (фильтрам, поисковой панели и списке электронной почты). Когда вы разрабатываете модули на основе одной ответственности, вы можете легко управлять и тестировать свой код.
Используйте Controlleras Syntax
При использовании контроллера в любом месте в вашем приложении Angularjs попробуйте использовать контроллер в виде синтаксиса.
{{ user.name }}
Это более контекстуально, легче прочитать и избегать использования, отличных от пунктирного объекта, в виду, как {{name}} вместо {{user.name}}.
Тонкие контроллеры
Используйте контроллер только для создания конкретных данных, доступных для объема, который используется в поле зрения. Использовать бизнес и другую логику в услугах; При этом эта логика может быть использована в нескольких контроллере и может быть легко протестирована. Это удаляет зависимости и скрыть реализацию от контроллера
//avoid
angular.module('app').controller(function ($http, $q) {
let _this = this;
this.userDetails = {};
this.getUserDetails = function () {
return $http.get(_url)
.then(function (data) {
_this.userDetails = data;
}).catch(function (erro)) {
});
};
});
//recommended
angular.module('app').controller(function (userService) {
let _this = this;
this.userDetails = {};
this.getUserDetails = function () {
return userService.getUserDetail()
.then(function (data) {
_this.userDetails = data;
}).catch();
};
});
В приведенном выше примере получения данных с сервера делегированы на сервис, и наш контроллер не нужно вводить $ http, $ q и другие зависимости. Используйте услуги для бизнес-логики.
Используйте контроллер для единого представления для лучшего тестирования и обслуживания.
Возврат обещаний от вызовов данных
При использовании услуг и выполнение вызовов данных оттуда. Затем попробуйте вернуть обещания. Таким образом, пользователь может цеплять обещания и принимать дальнейшие действия после того, как вызов либо отклонен, либо разрешен.
Директивы только для манипуляций DOM
Используйте директивы только для Maninpatces DOM. Когда вы думаете, что вы не используете функцию Compile/Link в директивах, используйте только компоненты. Компоненты доступны после Angularjs 1.5. А также при создании директив используют ограничение: «EA».
Вручную определить зависимости
Когда вы пытаетесь министерзировать код Angularjs, то это отличная помощь.
//avoid
angular.module('app').controller(function ($http, $q) {
});
Это будет полезно
angular.module('app').controller(function(a,b){});
и сломал бы код. Вместо этого попробуй так;
angular.module('app').controller(['$http', '$q', function ($http, $q) {
}]);
//minified
angular.module('app').controller(['$http',$q',function(a,b){}]);
Кортус исключения
Создайте фабрику, которая обнажает интерфейс для уловления и ручки EroRRS/исключения. Используйте $ RouteChangeError, чтобы обрабатывать ошибки маршрутизации и перенаправить пользователя на действительный экран ошибок.
Я надеюсь, что вы найдете это полезным. Я бы попытался быть более подробно с кодом и примером в будущем.