Замедление вокруг зависимостей AngularJS

Question

У меня есть проект, который стал слишком большим для монолитных файлов контроллера/сервиса, поэтому я начал разбивать их на более мелкие компоненты, а затем использовать систему ввода модулей/зависимостей, чтобы все работало.

У меня возникли проблемы с пониманием того, что такое Angular с зависимостями, потому что я нахожу вещи, работающие в модулях, даже если я не объявил зависимость. Вот простой пример:

// a simpler app that uses 2 controllers 
 
angular.module("myApp", ["controller", "controller2"]); 
 

 
// controller has a dependency on 
 
// module1 to access the constant 
 

 
angular.module("controller", ["module1"]) 
 
.controller("newController", ["$scope", "mod1Constant", function ($scope, mod1Constant) { 
 
\t $scope.myText1 = mod1Constant; 
 
}]); 
 

 
// controller2 doesn't declare a dependency 
 
// on module1 but can still access the constant 
 

 
angular.module("controller2", []) 
 
.controller("newController2", ["$scope", "mod1Constant", function ($scope, mod1Constant) { 
 
\t $scope.myText2 = mod1Constant; 
 
}]); 
 

 

 
angular.module("module1", []) 
 
.constant("mod1Constant", "module 1 constant");

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
<div ng-controller="newController"> 
 
    {{myText1}} 
 
</div> 
 
<div ng-controller="newController2"> 
 
    {{myText2}} 
 
</div> 
 

 

 
</div>

Мой вопрос заключается в основном: почему controller2 работу?

Ни в коем случае не module1 впрыскивается в controller2, но, похоже, контроллер имеет доступ к пространству имен.

Кажется, что, вводя модуль в любом месте, вы можете получить доступ к нему повсюду, что заставляет меня задаться вопросом, что такое точка модулей. Является ли инъекция зависимостей более похожей на сброс всех зависимостей в общий ведро, а не на создание дерева зависимостей? или я пропустил что-то реальное?

Answer 1

Вы правы. В Angular, когда вы ввели модуль в родительский модуль, все его службы доступны повсюду в этом родительском модуле. Я согласен, что это не очень модульное поведение, и одна из точек боли Угловая 1.

В Angular 2 (в настоящее время в стадии бета-тестирования) это несколько улучшилось, и вы должны указать для каждого Component, какие услуги будет injected.

Answer 2

Я просто добавил еще несколько кодов, которые помогут вам лучше понять !!!

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

Контроллеры будут созданы после фазы конфигурации, поэтому константы доступны для родительского контроллера.

цикла Жизни: дочерних константы модуля ----> родительские Module1 константы -------------> Родитель Module2 константа -----> Родитель Module3 constants-- ---> родительские контроллеры Module1 ------> родительские контроллеры Module2 --------> родительские контроллеры Module3 --------> контроллеры дочерних модулей

константы создаются перед контроллерами , так что вы можете использовать их в родительских контроллерах

из консоли:

MYAPP константа

module1 константа

контроллер: модуль 1 константа

controller2: модуль 1 константа

controller3: модуль MYAPP константа

myAppController: MYAPP Модуль постоянной

// a simpler app that uses 3 controllers 
 
angular.module("myApp", ["controller", "controller2","controller3"]); 
 

 

 
angular.module("myApp").constant('myAppConstant',{'name':'myApp module constant','log':console.log('myApp constant')}); 
 

 
angular.module('myApp').controller('myAppController',['$scope','myAppConstant',function($scope,myAppConstant){ 
 
    console.log('myAppController:'+myAppConstant.name); 
 
    $scope.myText = myAppConstant.name; 
 
}]); 
 

 

 

 
// controller has a dependency on 
 
// module1 to access the constant 
 

 
angular.module("controller", ["module1"]) 
 
.controller("newController", ["$scope", "mod1Constant", function ($scope, mod1Constant) { 
 
    console.log('controller:'+mod1Constant.name); 
 
\t $scope.myText1 = mod1Constant.name; 
 
}]); 
 

 
// controller2 doesn't declare a dependency 
 
// on module1 but can still access the constant 
 

 
angular.module("controller2", []) 
 
.controller("newController2", ["$scope", "mod1Constant", function ($scope, mod1Constant) { 
 
    console.log('controller2:'+mod1Constant.name); 
 
\t $scope.myText2 = mod1Constant.name; 
 
}]); 
 

 

 

 
angular.module("controller3", []) 
 
.controller("newController3", ["$scope","myAppConstant", function ($scope,myAppConstant) { 
 
    console.log('controller3:'+myAppConstant.name); 
 
\t $scope.myText3 = myAppConstant.name; 
 
}]); 
 

 

 

 

 
angular.module("module1", []) 
 
.constant("mod1Constant", {'name':"module 1 constant",'log':console.log('module1 constant')});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
<div ng-controller="newController"> 
 
    {{myText1}} 
 
</div> 
 
<div ng-controller="newController2"> 
 
    {{myText2}} 
 
</div> 
 

 
<div ng-controller="newController3"> 
 
    {{myText3}} 
 
</div> 
 

 
    <div ng-controller="myAppController"> 
 
    {{myText}} 
 
</div> 
 

 
</div>