We know that Dependency
injection is a software design pattern which talks about the dependency between
software modules. It’s everyone’s goal
to implement de-couple and less dependency modules. Angular is a JavaScript framework where
dependency injection is handle very smoothly and we can design each and every
module in Angular without depending on other module and this is the beauty of
AngujarJS framework.
In this article we will
discuss dependency injection in controller of AngularJS . If you are very new
in AngularJS then I will suggest you to go through the documentation of AngularJS
before continue this article.
We know that AnjularJS
is great MVC framework in client which truly separates data, business logic and
presentation logic into different modules. The controller is responsible to
implement business logic which often take data from service (service in
angular) and push to view. So, in general Controller is gule between model and
view.
Those who are server
side developer (like c# or Java programmer) they might aware from Dependency
injection and the various ways to implement it. Yes, I am talking about
controller injection, property injection and function injection but dependency
injection in Angular is bit different than this. We will see in practical.
Dependency injection in controller of AngularJS
Let’s start with baby
step, we will implement the view at first , which is nothing but simple HTML
page like below and give reference of Angular library. In this example
Dependency.js is my external js file where I will define controller, you are
free to define controller in same page if you wish.
<html ng-app>
<head>
<script src="angular.min.js" type="text/javascript"></script>
<script src="Dependency.js" type="text/javascript"></script>
</head>
<body ng-controller="myController">
{{message}}
</body>
</html>
Let’s implement controller
Yes, as we
know controller in AngularJS is nothing but normal JavaScript function and here
the controller is dependent on $scope because within controller we are setting
property of $scope object. Now, the beauty of the controller is , we are
injecting $scope to the controller externally.
function myController($scope) {
$scope.message = 'Welcome in AngularJS';
}
Angular's Dependency Injection allows you to write code like
the following without taking into account where $scope comes from. In this
case, $scope gets injected by Angular whenever this controller is instantiated.
Angular uses this approach because it allows for a clear
separation of concerns and for a higher degree of focused unit-testing. You can
for example configure the DI framework to use mock-objects for underlying
components instead of real services during your unit tests. This approach
allows you to focus on testing only one particular piece of functionality - one
unit - instead of testing all the underlying services as well.
Once we run the application , we will see below output .
Create controller and
attach it to module
The previous controller implementation is much similar with class
JavaScript function , but there is official way to define controller in
AngularJS. In this example we will create module at first and then we will attach
controller to this module and we will inject same $scope to the controller.
Here is the view implementation.
Just we have added ng –app directive in page which will bootstrap
the Angular framework in document.
Here , we are creating module at first
var app = angular.module('myApp', []);
and we are attaching ‘myController’
controller with the module and injecting $scope to the controller.
app.controller('myController',['$scope', function ($scope) {
$scope.message = 'Welcome in AngularJS';
}]);
Inject Angular service
to controller
In this example, we will create one simple service in
AngularJS and then we will inject the service to controller. So, let’s create
service at first. Have a look on below code.
var app = angular.module('myApp', []);
//Implement
and attach service to module
app.service('dataService', function () {
var message = function () {
return 'Data from service';
};
return {
message:message
};
});
Now, we will create controller
and we will inject service to the controller. Within controller , we are just retrieving
message from service and setting to scope.
So, in this controller we are
injecting two objects one is $scope and another is dataService.
//Controller
implementation
//inject
dataService to controller
app.controller('myController', ['$scope', 'dataService', function ($scope, dataService) {
$scope.message = dataService.message();
}]);
Once we run the application, we should see the below
message.
Inject Factory to
AngularJS controller
This is very similar with service injection. In this example
we will inject factory to controller. Here is the implementation of factory. It’s
very simple and we have added two message sending function within messageFactory.
var app = angular.module('myApp', []);
app.factory('messageFactory', function () {
var alretMessage = function () {
return 'Alert message';
};
var warningMessage = function () {
return 'Warning message';
};
return {
alretMessage : alretMessage,
warningMessage :
warningMessage
};
});
In same way, we can inject
factory to controller. Have a look one below code.
app.controller('myController', ['$scope', 'messageFactory', function ($scope, messageFactory) {
$scope.message = messageFactory.alretMessage()
+ ' , ' + messageFactory.warningMessage();
}]);
And here is the output message.
Border line
In this example we have seen to implement dependency injection
within controller of AngularJS. Normally every component in AngularJS is very
much de-couple and pluggable. It can say that , strong dependency injection
made AngularJS one of the most popular front end framework.
Hello Sourav an Interesting blog, I like the way you started it "Talk in Computer Language" - Informative and unique among others. Here is an blog about AngularJS which also looks Useful.
ReplyDelete