Send $http.get twice

Question

Edit 1: Guys, I notice that I call $http.get('/posts') (for some special purpose) in my authentication factory. Sorry for the stupid question. I will delete it when the bounty is end.

I have the following code to load a page https://localhost:3000/#/home, which get all the posts from the database and display them.

The problem is that, I realise the log router.get /posts is print twice, whereas here and there are only alerted once.

Does anyone know if it means that $http.get is undertaken twice? If so, where is the problem?

app.config(... ...) {
    $stateProvider
        .state('global', {
            templateUrl: '/htmls/global.html',
            controller: 'GlobalCtrl'
        })
        .state('global.home', {
            url: '/home',
            templateUrl: '/htmls/home.html',
            controller: 'MainCtrl',
            resolve: {
                postPromise: ['posts', function (posts) {
                    return posts.getAll();
                }]
            }
        });
}]);

app.factory('posts', ['$http', 'auth', function ($http, auth) {
    var o = { posts: [] };

    o.getAll = function () {
        alert("before");
        return $http.get('/posts').then(function (res) {
            alert("after");
            angular.copy(res.data, o.posts);
        })
    }
    ... ...
}]);

app.controller('GlobalCtrl', [function () { }]);

app.controller('MainCtrl', ['$scope', 'posts', 'auth', 'postPromise', function ($scope, posts, auth, postPromise) {
    ... ...

In the backend:

router.get('/posts', function (req, res, next) {
    console.log("router.get /posts");
    Post.find(function (err, posts) {
        if (err) return next(err);
        res.json(posts);
    });
});

PS: I just realised one thing: I had set a login and logout on the website. When I am NOT logged in, https://localhost:3000/#/home only shows once router.get /posts; the problem raises when I am logged in.

Talamantes

Is the angular app and the API on a different domain? – Mim

what API do you refer to? I think the angular app is in https://localhost:3000, right? – Talamantes

The API to get the posts. Trying to work out if it is a CORS issue. When looking at network traffic in Chrome, is there an OPTIONS and GET request? – Mim

It is a mean-stack application. I host everything in localhost:3000, I don't think it is CORS... – Talamantes

By searching localhost in the whole project, and I have found mongoose.connect('mongodb://localhost/news');, I tried to change to mongoose.connect('mongodb://localhost:3000/news');, but it raised an error. – Talamantes

Can you mention how the route is activated. i,e href or ui-sref? – Lumen

You can look at console.trace() to find who called it second time. Put it in o.getAll method – Cook

Could you also post your code that handles logging in? And in which state you are when you try to log in? – Deedeeann

@MattTester I think you are onto something, it's most likely preflight call that's not handled properly before getting to router – Crossindex

It may be possible that controller is called twice, one by route & other by template i.e ng-controller ="". Please check that if that is the cause – Pigtail

@MattTester there is no OPTIONS request. – Talamantes

@KannanJ It is always by $stateProvider.state(..., I didn't use href orui-sref. – Talamantes

@Cook I tried to put console.trace() before return $http.get('/posts').then(function (res) { or after. It only displays once, and there is no difference between logged-in mode and logged-out mode. – Talamantes

Guys, I notice that I call $http.get('/posts') (for some special purpose) in my authentication factory. Sorry for the stupid question. I will delete it soon... Thank you... – Talamantes

@Talamantes sooner than later please .... or at least make a note in the original post so others do not waste time thinking about this. – Overtime

Answer 1

Since you are saying that when you are logged the problem occurs...this is because of the fact that since you are using angular-ui-router the two events are very important.

$stataChangeStart(...) , and $stateChangeSuccesss(...)

Please be informed that the resolve which you are using

.state('global.home', {
            url: '/home',
            templateUrl: '/htmls/home.html',
            controller: 'MainCtrl',
            resolve: {
                postPromise: ['posts', function (posts) {
                    return posts.getAll();
                }]
            }
        })

is first resolved before the jump happens to the target url and then the view gets changed/updated.

One solutions is:

Please make sure that you have '&&' condition to be checked here as you are trying to login first and then get the data.

If you are using the angular ui router version 0.12 , please upgrade the version so that the issue resolves. Thanks.

Softa