Sunday, 20 November 2016

javascript - Attaching global functions and data to $rootScope on initialization in AngularJS



I'd like to have a "Global function" called the first time I launch my AngularJS application, or every time I refresh the page.




This function will call my server with $http.get() to get global information necessary to use my application. I need to access $rootScope in this function. After that, and only after this request finished, I'm using app.config and $routeProvider.when() to load the good controller.



app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/',
{
/**/
});
}]);



I don't want the application do something before this action is finished. So I guess I have to use a "resolve", but I don't really know how to use it.



Any idea?



Thanks!


Answer



It's not the best way to solve your given problem, but here is a proposed solution for your question.




Anything inside run(...) will be run on initialization.



angular.module('fooApp').run(['$http', '$rootScope' function($http, $rootScope) {
$http.get(...).success(function(response) {
$rootScope.somedata = response;
});

$rootScope.globalFn = function() {
alert('This function is available in all scopes, and views');
}


}]);


Now an alert can be triggered in all your views, using ng-click="globalFn()".



Be aware that directives using a new isolate scope will not have access to this data if not explicitly inherited: $scope.inheritedGlobalFn = $rootScope.globalFn


No comments:

Post a Comment

c++ - Does curly brackets matter for empty constructor?

Those brackets declare an empty, inline constructor. In that case, with them, the constructor does exist, it merely does nothing more than t...