Implementing Configuration and Run Blocks
Listing 3.5 shows an example of implementing very basic configuration and run blocks. In lines 2–8, the config() method is used to implement two providers, configTime and runTime, that are JavaScript Date objects. Notice that in lines 5–7 a simple loop is implemented to inject a delay simulating a delay that might be caused during configuration.
In lines 9–11 the run() method is implemented. Notice that it accepts the configTime and runTime instances that were created during configuration and updates the runTime value to the current time. Then in Lines 12–16 a controller is implemented that sets the configTime and runTime values in the scope.
Listing 3.6 shows HTML that implements the myApp module and displays the configTime and runTime values. You can see that the injected delay results in different times for the values. Figure 3.3 shows the resulting web page.
Figure 3.3 Implementing configuration and run blocks that set and utilize JavaScript Date objects to display the time executed for each.
Listing 3.5 config_run_blocks.js: Implementing Configuration and Run Blocks in an AngularJS Module
01 var myModule = angular.module('myApp', []);
02 myModule.config(function($provide) {
03 $provide.value("configTime", new Date());
04 $provide.value("runTime", new Date());
05 for(var x=0; x<1000000000; x++){
06 var y = Math.sqrt(Math.log(x));
07 }
08 });
09 myModule.run(function(configTime, runTime) {
10 runTime.setTime((new Date()).getTime());
11 });
12 myModule.controller('controllerA',['$scope', 'configTime', 'runTime',
13 function($scope, configTime, runTime){
14 $scope.configTime = configTime;
15 $scope.runTime = runTime;
16 }]);
Listing 3.6 config_run_blocks.html: Using HTML Code to Display the configTime and runTime Values Generated in the Configuration and Run Blocks of the AngularJS Module
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS Configuration and Run Blocks</title>
05 </head>
06 <body>
07 <div ng-controller="controllerA">
08 <hr>
09 <h2>Config Time:</h2>
10 {{configTime}}
11 <hr>
12 <h2>Run Time:</h2>
13 {{runTime}}
14 </div><hr>
15 <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
16 <script src="js/config_run_blocks.js"></script>
17 </body>
18 </html>