Alexe Bogdan
Web Developer, JavaScript Lover, User Experience Professional, working in the web and mobile application development industry.
Angular modules have the opportunity to configure themselves before the module actually bootstraps and starts to run.
This phase is the only part of the Angular flow that can be modified before the app starts up.
The only services that can be injected in this block are constants and providers;
angular
.module('myApp', [])
.config(['provider', 'constant', function(provider, constant){
//Configuration logic
}]);
angular
.module('myApp', [])
.config(function(){})
.run(['$rootScope', function($rootScope){
$rootScope.globalValue = 'Global Foo';
});
angular
.module('myApp', [])
.constant('apiUrl', 'http://localhost:8080')
.config(['apiUrl', function(apiUrl){
//apiUrl can be used here
}])
.run(['$rootScope', function($rootScope){
//apiUrl can be used here
}]);
angular
.module('myApp', [])
.value('objectValue', {
foo: 'bar',
setFoo: function(val){
this.foo = val;
}
})
.config(function(){
//objectValue can not be injected here
})
.run(['$rootScope', 'objectValue',
function($rootScope, objectValue){
$rootScope.foo = objectValue.foo;
$rootScope.changeFoo = function(val){
objectValue.setFoo(val);
};
}
]);
angular
.module('myApp', [])
.factory('myFactory', function(){
var data; //private variable
return {
fetchData: function(){
//business to populate data
},
getData: function(){
return data;
}
}
})
.run(['$rootScope', 'myFactory',
function($rootScope, myFactory){
myFactory.fetchData();
$rootScope.data = myFactory.getData()
}
]);
angular
.module('myApp', [])
.service('myService', function(){
var data; //private variable
this.fetchData= function(){
//business to populate data
};
this.getData= function(){
return data;
};
})
//Same as
.factory('myService', function(){
var Service = function(){
var data; //private variable
this.fetchData= function(){
//business to populate data
};
this.getData= function(){
return data;
};
};
return new Service();
});
angular
.module('myApp', [])
.provider('myFactory', function(){
var configVar = 'value';
//The factory Service - can have any dependency
this.$get = [function(){
var data; //private variable
return{
fetchData: function(){
//business to populate data
},
getData: function(){
return data;
}
};
}];
//Config method
this.config = function(config){
configVar = config;
};
})
.config(['myFactoryProvider', function(myFactoryProvider){
myFactoryProvider.config('Overriden value');
}])
.run(['$rootScope', 'myFactory',
function($rootScope, myFactory){
myFactory.fetchData();
$rootScope.data = myFactory.getData()
}
]);
angular
.module('myApp', [])
.factory('myFactory', function(){
//implementation here
})
.config(['$provide', function($provide){
$provide.decorator('myFactory', ['$delegate', function($delegate){
//$delegate is the original service instance
//add a new method
$delegate.newMethod = function(){
return 'This method was added by the decorator';
};
//return the original decorated method
return $delegate;
}]);
}]);
ngRoute module provides the ng-view directive, in order to render the routes template.
Any time the route is changed are taken the following actions:
To create routes on a specific module or app, ngRoute module exposes the $routeProvider.
To add a specific route, $routeProvider has the when() method.
$routeProvider
.when('path', {
template: 'Html string or a function that returns Html string',
templateUrl: 'path or function that returns a path to an html template that should be used by ngView',
controller: 'Controller fn that should be associated with newly created scope or the name of a registered controller if string',
controllerAs: 'A controller alias name',
resolve: 'An optional map of dependencies which should be injected into the controller',
redirectTo: 'value to update the path with and trigger route redirection.'
})
.otherwise(routeConfigObj);
angular
.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
template: '<h2>{{page}}</h2>',
controller: ['$scope', function($scope){
$scope.page = 'home';
}]
})
.when('/about', {
template: '<h2>{{page}}</h2>',
controller: ['$scope', function($scope){
$scope.page = 'about';
}]
})
.otherwise({redirectTo: '/'});
}]);
<html ng-app="myApp">
<head>...</head>
<body>
<header>
<h1>My app</h1>
<ul>
<li><a href="#/">Home</a></li>
<li><a href="#/about">About</a></li>
</ul>
</header>
<div class="content">
<div ng-view></div>
</div>
</body>
</html>
By Alexe Bogdan
Angular Framework: Services and ngRoute
Web Developer, JavaScript Lover, User Experience Professional, working in the web and mobile application development industry.