Suppose my web app needs to make a http request to get my site title, site description and so on. Since these variables are common to all pages, it makes sense to request those every time a user enter the site.
The question is, where do I make those calls? In run block? Or to create a root controller to do these tasks?
You can use one of these two approaches:
$rootScope and
use anywhere you want,In your states, use resolve to get the page title and details , and
get it in the views , For ease use resolve in root state and use the
resolved variable as a dependency in other child or sibling routes
to get values..
$stateProvider.state('root', {
resolve:{
// Example using function with simple return value.
promiseObj: function($http){
// $http returns a promise for the url data
return $http({method: 'GET', url: '/someUrl'});
}
})
.state('sibling',{
controller:function($scope,promiseObj){
$scope.title = promiseObj.title;
}
})
You could define controller at the <html> level.
<html ng-app="app" ng-controller="initCtrl">
<head>
<title>{{ Page.title() }}</title>
...
You create service: Page and modify from controllers.
myModule.factory('Page', function() {
var title = //Code to get the title
.... //Other vars
return {
title: function() { return title; },
setTitle: function(newTitle) { title = newTitle }
...
};
});
Inject Page and Call 'Page.setTitle()' from controllers.
