The method of loading service into the controller as a dependent resource is very similar to the method of loading it into other services.
Since javascript is a dynamic language, DI cannot figure out which service should be injected through static types (like in static typed languages). Therefore, we need to specify the service name through the $inject property, which is an array of strings containing the service names that need to be injected. The importance of service ID order: the order of parameters in the factory method is consistent with the order of service in the array. The parameter names of the factory methods are not important, but as usual they match the service ID one by one, and the benefits of doing so will be discussed below.
1. Explicit dependency injection
function myController($scope,$loc,$log) {
$ = function() {
//Use $location service $();
};
$ = function() {
//Use $log service $(‘…')
};
}
myController.$inject = [‘$location','$log'];
example:
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="MainApp">
<head>
<meta charset="UTF-8">
<title>explicit-inject-service</title>
</head>
<body>
<div ng-controller="MyController">
<input type="text" ng-model="msg"/>
<button ng-click="saveMsg()">save msg</button>
<ul>
<li ng-repeat="msg in msgs">{{msg}}</li>
</ul>
</div>
<script src="../angular-1.0." type="text/javascript"></script>
<script type="text/javascript">
var app = ("MainApp",[],function($provide) {
$("notify",["$window","$timeout",function(win,timeout) {
//This is a service-dependent service. Through this explicit method, the parameter names can be filled in randomly, but the order must be corresponding var msgs = [];
return function(msg) {
(msg);
if(==3) {
timeout(function() {
(("\n"));
msgs = [];
},10);
}
}
}]);
});
function MyController($s,$noti) {
//This is the controller dependency service. Through this explicit method, the parameter names can be filled in randomly, but the order must be corresponding $ = [];
$ = function() {
();
$noti();
= "";
};
}
//Specify the injected thing //You can also refer to the example in /lclao/archive/2012/10/16/ MyController.$inject = ['$scope','notify'];
</script>
</body>
</html>
2. Implicit dependency injection
A new feature of angular DI allows dependencies to be determined by parameter names. Let's rewrite the example above to show how to implicitly inject $window, $scope and notify service.
example:
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="MainApp">
<head>
<meta charset="UTF-8">
<title>implicit-inject-service</title>
</head>
<body>
<div ng-controller="MyController">
<input type="text" ng-model="msg"/>
<button ng-click="saveMsg()">save msg</button>
<ul>
<li ng-repeat="msg in msgs">{{msg}}</li>
</ul>
</div>
<script src="../angular-1.0." type="text/javascript"></script>
<script type="text/javascript">
var app = ("MainApp",[],function($provide) {
$("notify",function($window,$timeout) {
//Service dependency, implicit dependency, the name is the same var msgs = [];
return function(msg) {
(msg);
if(==3) {
$timeout(function() {
$(("\n"));
msgs = [];
},10);
}
}
});
});
function MyController($scope,notify) {
//Service dependency, implicit dependency, the name is the same $ = [];
$ = function() {
();
notify();
= "";
};
}
</script>
</body>
</html>
Although this is very convenient, if we need to compress and obfuscate our code, this may cause the parameter name to be changed. In this case, we still need to use an explicit declaration of dependencies.
The above is the information about AngularJS Injecting Services Into Controllers. We will continue to add relevant information in the future. Thank you for your support for this site!