Как отделить angularjs файлов без использования глобального масштаба

Question

Я видел этот пост AngularJS best practices for module declaration? Но я все еще немного запутался о лучшем способе объявить и отдельные angularJS файлов для модулей, контроллеры, услуг и т.д.

Я понимаю это хорошая практика для переноса контроллеров и сервисов в IIFE, потому что это предотвращает их использование из области видимости. И хорошей практикой является разделение ваших контроллеров и модулей на отдельные файлы для организации.

Мой вопрос, если у меня есть файл контроллера

myCtrl.js

(function(){ 
    "use strict"; 

    app.controller("myCtrl", ['$scope', function($scope) { 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 
    }]); 
})(); 

директива файл

myDirective.js

(function(){ 
    "use strict"; 
    app.directive("w3TestDirective", function() { 
    return { 
     template : "I was made in a directive constructor!" 
    }; 
    }); 
})(); 

Что бы лучшая практика для объявления модуля в отдельном файле

myModule.js

Если это оставить в глобальном масштабе, так что ничего может получить доступ к нему следующим образом:

var app = angular.module("myApp", []); 

Или есть способ обернуть это чем-то вроде IIFE, чтобы сохранить его в глобальном масштабе и все же быть доступным для других файлов?

Answer 1

В контрольных и директивных фрагментах IIFE не нужны, потому что ничто не подвергается глобальному охвату.

var app = ... не должен подвергаться глобальному охвату. Вместо этого может использоваться модуль-приемник:

var app = angular.module("myApp") 

Для этого требуется сохранить порядок загруженных файлов JS. Модуль должен быть определен сначала с angular.module("myApp", []), только тогда модули модуля могут быть определены.

Если приложение не использует модули JS (AMD, CommonJS, ES6) для модульности, полезно следовать шаблону «один модуль на файл». Это позволяет значительно улучшить проверяемость и никогда не впадать в модуль, связанные с условиями гонок:

(function(){ 
    "use strict"; 

    var app = angular.module("myApp.myCtrl", []); 

    app.controller("myCtrl", ['$scope', function($scope) { 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 
    }]); 
})(); 

---

angular.module("myApp", ["myApp.myCtrl", "myApp.w3TestDirective"]); 

В данном случае это не имеет значения, в котором загружаются модули порядка файлы.

Answer 2

мы можем построить отношения между угловыми файлами, например

1. контроллеры
2. услуги
3. фабрики
4. и так далее

с угловым модулем

, например: angular.module ("MyApp", [ "зависимости"])

angular.module ("MyApp"). Контроллер ("myCtrl", функция() {}) или angular.module ("MyApp") .Service ("MyService", функция() {})