Run a function only the first time when AngularJS gets loaded - angularjs

I'm using angular-seed template (AngularJS) and I have routeProvider setup and such, now I want to execute a function (which resides in a factory), but only the very first time when the page gets loaded. I found many solutions for this, but I don't want to execute the code each time the users switches between tabs (via routeProvider of course, page doesn't get reloaded) - the code must be executed only when the whole page gets (re)loaded.
How should I approach this? I tried to call the function from run and then broadcast the event when page gets loaded, but there are no event listeners - I guess that is because the run part gets executed before the controllers are setup, so there are no listeners attached at the time when the event gets broadcast.
So, any suggestions how to approach this?
UPDATE
Use case:
when user types the url in the page, the page gets loaded
when pages gets loaded, a $http.get request is performed, which gets a random content
this content can be changed only by clicking a button, to explicitly request a change of content.
if users clicks to a different page e.g. view2 (routeProvider) and then back to the view1, the content must not change
when users refreshes the page (F5), the content changes again (or as already stated, by a click of a button)

Use the run method:
app.run(function(yourService){
yourService.cacheRandomContent();
});
It runs only once after the app is bootstrapped and services are created.
To access the data in controller, just inject the same service:
app.controller('someCtrl',function($scope, yourService){
yourService.getCachedRandomContent().then(function(resp){
$scope.data = resp.data;
});
});
Your service would be something like:
app.service('yourService',function($http){
var promise;
return {
cacheRandomContent: function(){
promise = $http.get();
},
getCachedRandomContent : function(){
return promise;
}
}
});

Related

Loading message shown on $routeChangeStart disappears as soon as LESS CSS starts compiling

I've created a pretty heavy AngularJS application which has many dependencies (JS libraries and LESS css). When the application URL is hit, it determines the route based on login status and redirects to login route if not logged in. The problem is, until the route is redirected to, and the HTML is loaded, the page remains completely blank for almost 4-5 seconds, which looks really confusing.
I tried to implement some message using $routeChangeStart but it's not giving me the desired results. I want the 'loading..." message as soon as URL is hit and until app is routed and HTML is fully loaded. But the message is disappearing after a couple of milliseconds.
$rootScope.$on('$routeChangeStart', function() {
$rootScope.layout.loading = true;
});
$rootScope.$on('$routeChangeSuccess', function() {
$rootScope.layout.loading = false;
});
UPDATE: The problem seems to be the LESS CSS which is being compiled and loaded to get the page ready. The loading indicator text correctly works without LESS CSS (see this Plunker)
In the actual application, I have put the loading indicator text after the body tag, and there are many JS scripts (including LESS.js) after the indicator text. The loading indicator shows until LESS starts compiling, and disappears as after compilation starts. Any solution to this?
I believe .run() method of angular can solve your issue, Run blocks are the closest thing in Angular to the main method. A run block is the code which needs to run to kick start the application. It is executed after all of the services have been configured and the injector has been created.
You can try the following to show/hide loader when your application is loading.
.run(['$location', function ($location) {
// if your application URL os https://myApplication/Login/loginStatus
if ($location.path() === '' && $location.$$absUrl.indexOf('/loginStatus') > -1) {
// show loading
// some code here to return route based on login status for example,
var promise = getLoginStatus();
promise.then(function (result) {
// redirect to the route as per login status
$location.path(result); //Where result is route url.
// hide loading
});
}
}]);

google analytics page views are being incremented incorrectly for each page change (angularjs)

I'm using Google analytics for my website (built using AngularJS) to track page views. For some reason though, the page views are incremented incorrectly. For example, when I'm on home page and I switch to the about page, about page gets 1 view, which is correct, but when I switch to another page, that page gets 2 views when it should just get 1. When I switch to another page, that page gets 3 views and so on until I reload the website. Reloading the website will reset the incrementation back to 1, and it'll start counting up again, which means there appears to be a count that is incremented with each state change.
I have this code in all the controllers for each page:
$rootScope.$on('$stateChangeSuccess', function(event) {
if (!$window.ga)
return;
$window.ga('send', 'pageview', { page: $location.path() });
});
What is the cause of the tracking error and how can I resolve it?
$stateChangeSuccess is a global event, which means that if you include the above code in every controller, every time a new controller is instantiated, you are creating a new listener for the event. When a state change occurs, every listener you have registered gets fired, thus the increasing number of calls that are happening.
You actually only need to do this once, probably in your main module run() method, rather than in all of your controllers.

Why $http in ng-init is not getting called everytime the view is loaded - AngularJS

I have modified my question as per my observation.$http request on server side is not happening whenever the view is called second or third or so on times although initWishList (ng-init) is getting called. The scenario is as below:
I have a My Account tab in the nav-bar, which opens a view having options like MyWishlist, My Address etc. When My wishlist is clicked for the first time, $http request happens, but when I again click on My Account (this time I don't see any call on server side when the .html view is loaded) , and then if I click My Wishlist , the controller is called but $http isn't called (this time I again dont see any call on server side from $http) but I can see the alert Init Called
Why so?
$scope.initWishList = function(){
alert('Init called')
$http.get("/get_wish_list/")
.success(function (response) {
$scope.refreshWishList(JSON.parse(response["products_json"]));
})
.error(function(){
console.log('Error');
});
};
Hope I have explained the scenario properly.
Controllers gets intialized only once when angular parses ng-controller directive. Since controller is initialized once, ng-init will also run once.
For your satisfaction, add a break point in the your controller on the first line, see when you hit that break point. Are you hitting that break point, every time you click the tab ? If not, ng-init will not be called every time

Browser back button doesn't trigger reload after using Angular's $location.path() update

Situation:
On one of the views of my AngularJS app I have two pagination buttons that use $http to request the next and previous data. I'm using ng-click="getNext(url)" rather than an anchor tag with href="#/items/:itemId". The reason I'm doing this is so that I can quickly page through my content asynchronously w/o triggering a page reload. This works just fine, but using this method bypasses updating the page's URL so its possible to have your current content out of sync with your URL's id (i.e. path is #/items/3 but you're currently viewing item 9). This can be easily fixed by updating the URL in the JS using $location.path('items/' + rsp.id). Now I can fetch data in an async manner and still be able to refresh, bookmark, send links and have the correct/current item display.
Problem:
The problem with this is if a user hits getNext() a few times and then tries to go back using the browser's back button the URL updates like it should but for some reason the browser doesn't perform a refresh–it just sits there and updates the URL. This only occurs with when the item in history is from the same view and I have updated the ID with the location service.
Any ideas would be appreciated.
What I tried so far
Promises + Flags
I've been playing with window.onpopstate, but as of right now I don't have any way to have window.onpopstate differentiate between a browser click and a UI click that updates the URL with $location.path(); Right now it fires the event regardless of the source. So I tried setting a flag to assume that every time this event fires its a browser event, but when its a UI-based event I can disabled that flag because my _myRequestFn() will handle it. Even with this promise setup it still fires the window.onpopstate when _myRequestFn() is fired.
var flag = true; // Assume all requests are browser-based
window.onpopstate = function() {
if (flag) {
$route.reload();
}
console.log('onpopstate fired');
};
_myRequestFn = function(id) {
someService.getMyData(id)
.then(function(rsp) {
// Do a bunch of stuff including...
$location.path('items/' + rsp.id);
return rsp;
})
.then(function() {
// Everything is done reset flag
flag = true;
});
};
$scope.getNext(url) {
flag = false;
_myRequestFn(url);
};
Spoofing
Hitting back through #/item/5 > #/item/4 > #/item/3 just updates the URL and not the path, but if the history has a different param #/thing/2 > #/item/2 that triggers a page refresh. Since the browser back button works if the history is from a different param I wanted to see if I loaded a different param it would work. So I created an #/item-a and #/item-b route that loaded the same template and used the same controllers, just toggled from a/b with each request. I would never recommend this solution to someone, I was more just seeing if I could get the refresh to trigger.
Update
Lots of people on IRC are suggesting that I use UI-Router. I'm really trying to use the out of the box Angular solution. Refactoring my whole routing setup to use UI-Router is not an optimal solution.
app.config(['$locationProvider',
function($locationProvider) {
// Enable html5 mode
$locationProvider.html5Mode(true);
}]);
From the docs:
In HTML5 mode, the $location service getters and setters interact with the browser URL address through the HTML5 history API. This allows for use of regular URL path and search segments, instead of their hashbang equivalents.

$locationChangeStart never broadcasted; $browser.onUrlChange never called after page load

My angular app is non-standard in that we don't use route provider or UI router. WE use a durandal style of navigation that swaps out views using $http.
locationChangeStart never fires I think due to the fact that we are not changing our URL once in the SPA (though we plan to do so in the future sometimes). I can't test this, but if we remain in the SPA and we change the URL to point to a new view thru code (again, not using routeProvider/UiRouter) should I expect this event to fire?
My main issue is that I cannot handle these events: manual url change, back/forward/history buttons, external link clicks
I see $browser#onUrlChange is the function that broadcasts the $locationChangeStart event but that function only gets called on page load for me, but it seems to be exactly the code that should be getting called.
Documentation:
$browser#onUrlChange
It's only called when the url is changed from outside of angular:
user types different url into address bar
user clicks on history (forward/back) button
user clicks on a link
It's not called when url is changed by $browser.url() method
It says this part also:
NOTE: this api is intended for use only by the $location service. Please use the {#link ng.$location $location service} to monitor url changes in angular apps.
I don't know how to 'use $location service to monitory url changes', so I am listening to the $locationChangeStart event:
$rootScope.$on('$locationChangeStart', function(event, next, current) {
// Breakpoint hit here on page load only
var x = 0;
}
Why doesn't the onUrlChange/$locationChangeStart functions run for me?
thanks!

Resources