Home > Developer > Web Develop
This article is also posted in my public number " My Sky "
Dependency Injection
Dependency Injection is not angularjs unique concept, but the scope of modern software development and architecture, but in Angularjs "dependency injection" is one of its core ideas, so we specialize in learning.
Observing the controller code in addition to the "Angularjs Routing" section, we found that we wrote all the business logic in the Controller Code section, when the code was small enough to handle, and as the code was scaled up, it quickly made the code difficult to maintain, and the controller turned into a code dump, Everything we have to do will fall into it, they will become very difficult to understand and difficult to modify. In this case, we will naturally think of code separation, the function of similar code extracted to write a separate module, as we will be the JS extracted as a single JS external file, the use of the time it can be introduced.
To observe the code in the section "Angularjs Routing", we refer to the module in a significantly different way than before:
var app=angular.module ("MyApp", ['ngroute']);
For the second parameter of the Angular.mmodule () method, we have always been an empty array, and in the implementation of the routing function, because we want to rely on the Ngroute module in Angular-route.min.js to implement the routing function, the second parameter is set to [ ' Ngroute '], the array parameter is to place the other module name we want to rely on, if we want to rely on more than one module, then continue to add the module name to the array is OK, similar to [' Module1 ', ' module2 ' ...].
Once we have quoted the dependent Ngroute, we can use the $routeprovider and use its config () function to implement the routing function. We don't need to call any functions to create $routeprovider, and we don't have to worry about how the object is generated and how it works internally, as long as it is used, just like injecting $routeprovider into our code. We have always used the $scope, the implementation of HTTP service $http and other objects are implemented this purpose. So in layman's terms, "dependency Injection" is the ability to inject the modules we rely on into the program when needed.
Next we write a module ourselves and inject it into the program:
var app=angular.module ("mathservice", [])
App.factory ('mymath', function () {
var my={};
My.add=function (A, b) {
return a+b;
}
return my;
});
Math.js
<script src= "Angular.js" ></script>
<script src= "math.js" ></script>
<body ng-app= "myApp" ng-controller= "Ctr" >
{{result}}
</body>
<script>
var app=angular.module ("MyApp",[' MathService ']);
App.controller ("Ctr", Function ($scope,MyMath) {
$scope. result=mymath. Add (1,21);
})
</script>
Sample Code Angularjs_26.html
In Math.js, we first defined the module with the name "mathservice" and then used Factory () to define the "mymath" service, In fact, the service in Angularjs is a singleton object (that is, an object that creates only one instance), in which an add () method is implemented, and a two-digit number is returned.
Next look at how this module is used in example 26. First we introduced the math.js. In the module declaration, we set the value of the second parameter to "[' MathService ']", this is the module we are going to rely on to implement the function, and then in the Controller code we inject the MyMath service, and use the Mymath.add () method to achieve the sum of two numbers.
In Angularjs, the method of creating the service, in addition to factory (), has the value (), provider (), service () and constant (), and other methods, the scope and function of the application are different, please consult the relevant documentation.
The whole ANGULARJS series came to an end, in fact the series just introduced the Angularjs of the introduction, the learning process to write it out. For more in-depth knowledge, I need to continue to study as much as everyone else.
Sample code for this series
Https://github.com/panyongwow/angularJS
AngularJS (10): Dependency Injection
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
