AngularJS run block

Hello friends !

In this article, we will learn, How to use AngularJS run block ? What is AngularJS run block ? How we can execute functions when AngularJS app starts ?

AngularJS Run block is used to execute the code when AngularJS application is start. Run Block is executed after all of the service have been configured and the injector has been created. It can access to services, values and factories. It prevents to configure system during application run time. AngularJS Run Method is closest thing to AngularJS main method.

In simple words, Run block is used to initialize certain values for further use, register global events and anything that needs to run at the beginning of the application.

Run block is executed only once in the lifetime of an AngularJS application.

We can create AngularJS Run Block as follows.

Suppose we want to execute a service when AngularJS application is kick-start.

Step 1: Create a provider

var ng = angular.module("myApp", []); ng.provider('$myAppService', function () { var service = 'myAppService'; this.registerService = function (value) { service = value; }; this.$get = function () { var that = {}; that.MyAppServiceMethod = function () { console.log(service); }; return that; }; });

Step 2: Initialize Provider in config block

ng.config(['$myAppServiceProvider', function ($myAppServiceProvider) { console.log('AngulrarJs is configuring..'); $myAppServiceProvider.registerService('myAppService Initialize during configuration.'); }]);

Step 3: Consuming Service with controller startup.

ng.controller("MyController", ['$scope', '$myAppService', function ($scope, $myAppService) { angular.element(document).ready(function () { console.log('AngulrarJs controller loading..'); $myAppService.MyAppServiceMethod(); }); }]);

Step 4: Register controller in view.

<div class="container" ng-app="myApp" ng-cloak>     <div ng-controller="MyController"></div>     <div ng-controller="MyController"></div>     <div ng-controller="MyController"></div> </div>

OUTPUT: AngulrarJs is configuring.. AngulrarJs controller loading.. myAppService Initialize during configuration. AngulrarJs controller loading.. myAppService Initialize during configuration. AngulrarJs controller loading.. myAppService Initialize during configuration.

Here every time when controller loads service method is invoked. To invoke service method only once when app is kick-start, we will invoke service in run block.

Step 5: Invoke service during application startup.

ng.run(function ($myAppService) { $myAppService.MyAppServiceMethod(); });

OUTPUT: AngulrarJs is configuring.. myAppService Initialize during configuration.

Copy following entire code and check the result.

<!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <title></title>     <link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />     <script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>     <script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>     <script src="angular-1.7.8/angular.min.js"></script> </head> <body>     <div class="container" ng-app="myApp" ng-cloak>         <div ng-controller="MyController"></div>         <div ng-controller="MyController"></div>         <div ng-controller="MyController"></div>     </div>     <script>         var ng = angular.module("myApp", []);         ng.provider('$myAppService', function () {             var service = 'myAppService';             this.registerService = function (value) {                 service = value;             };             this.$get = function () {                 var that = {};                 that.MyAppServiceMethod = function () {                     console.log(service);                 };                 return that;             };         });         ng.config(['$myAppServiceProvider', function ($myAppServiceProvider) {             console.log('AngulrarJs is configuring..');             $myAppServiceProvider.registerService('myAppService Initialize during configuration.');         }]);         ng.run(function ($myAppService) {             $myAppService.MyAppServiceMethod();         });                  ng.controller("MyController", ['$scope', '$myAppService', function ($scope, $myAppService) {             angular.element(document).ready(function () {                 console.log('AngulrarJs controller loading..');                 $myAppService.MyAppServiceMethod();             });         }]);     </script> </body> </html>

OUTPUT: AngulrarJs is configuring.. myAppService Initialize during configuration. AngulrarJs controller loading.. myAppService Initialize during configuration. AngulrarJs controller loading.. myAppService Initialize during configuration. AngulrarJs controller loading.. myAppService Initialize during configuration.

If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.


Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.

 
 

{{c.Content}}

Comment By: {{c.Author}}  On:   {{c.CreatedDate|date:'dd/MM/yyyy'}} / Reply


Categories