Inject various AngularJS object to AngularJS controller

We know that angularJS is google’s framework which helps to implement MVC architecture in client side.  Each and every bit and piece of angular is highly pluggable and we can inject the dependency of one component over another. In this article we will see how to inject dependency of various Angular objects to controller.

Inject value to controller

In this example we will inject value to angularJS controller. Value in angularJS is a simple object .It can be number, string or another JavaScript object.  In this example we have created value called “myAge” and attached to app module.

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

app.value("myAge", 26);

app.controller('myController', function ($scope, myAge) {

    $scope.getdata = function () {

        alert(myAge);

    }

});

In controller we are injecting myAge and within getdata function we can able to access the value. Here is sample output.

Inject service to controller

In this example we will inject service of angularJS to controller. We know that service in angularJS is singleton object which we can share across various controllers or other modules. In this example we have created “myService” and attach the service with module. Here is implementation of service.

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

app.service('myService', function () {

    var name = [];

    var messageService = function () {

       

        name.push({ name: 'Sourav' });

        name.push({ name: 'Ram' });

        name.push({ name: 'Shyam' });

        return name;

    };

    return {

        messageService: messageService

    }

});

Here we have created one controller and injecting the service. Once we inject service, we can able to call messageService function within controller which is defined in myService.

app.controller('myController', function ($scope, myService) {

    $scope.getdata = function () {

        var returnData = myService.messageService();

        alert(JSON.stringify(returnData));

    }

});

Here is sample output of above code. 

Inject factory to controller

Here, we will see to inject factory to controller. The implementation is very similar with the above one. Just in place of service, we are creating factory. Here is the implementation of factory.

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

app.factory('myFactory', function () {

    var data = [];

    var dataFactory = function () {

        data.push({ 'framework': 'Angular' });

        data.push({ 'framework': 'Backbone' });

        return data;

    }

    return {

        dataFactory : dataFactory

    }

});

Here is the implementation of controller where we will inject factory.

app.controller('myController', function ($scope, myFactory) {

    $scope.getdata = function () {

        var returnData = myFactory.dataFactory();

        alert(JSON.stringify(returnData));

    }

});

Another style to injection is like below.

app.controller('myController', ['$scope','myFactory',  function ($scope, myFactory) {

    $scope.getdata = function () {

        var returnData = myFactory.dataFactory();

        alert(JSON.stringify(returnData));

    }

}]);

Here is the output of above example.

Conclusion:-

In this article we have learned to inject various dependencies in controller of AngularJS. In coming post we will learn few interesting stuff of AngularJS.