AngularJS: How do I get data from a server before changing routes

Question

Angular 1.3 question: I've read many Stack Overflow questions and tutorials but haven't been able to get my specific code working. I want to have a view with a button (page1.html). When the button is clicked, it will get data from the server and render it in a second view (page2.html).

Here is the basic code:

var app = angular.module("app", ["ngRoute", "ngResource"]);

app.config(["$routeProvider", function ($routeProvider) {
    var baseTemplatePath = "/static/templates/";

    $routeProvider
        .when("/", {
            templateUrl: baseTemplatePath + "page1.html",
            controller: mainController
            // Don't render the next route's template until data comes back
            // from the ng-click function on this view.
        })
        .when("/page2", {
            templateUrl: baseTemplatePath + "page2.html",
            controller: mainController,
            resolve: mainController.resolve
        })
        .otherwise({ redirectTo: "/" });
}]);

app.factory("mainFactory", ["$resource", function ($resource) {
    return $resource("/api/:arg1/:arg2", {}, {
        query: { method:"GET", params: { arg1: "somthing", arg2: "something-else" }}
    });
}]);

var mainController = app.controller("mainController", ["$scope", "mainFactory", "myData", function ($scope, mainFactory, myData) {

    // When user clicks a button, it should get the data and go to the next route.
    $scope.getData = function () {
        $scope.myData = this.resolve;
    };
}]);

mainController.resolve = {
    myData: function (mainFactory, $q) {
        var deferred = $q.defer();
        mainFactory.query(function (successData) {
            deferred.resolve(successData); 
        }, function (errorData) {
            deferred.reject();
        });
        return deferred.promise;
    },
    delay: function ($q, $defer) {
        var delay = $q.defer();
        $defer(delay.resolve, 1000);
        return delay.promise;
    }
};

This is from the template with the ng-click on the link:

<a class="btn btn-primary btn-lg" ng-click="getData()" href="#/page2">Start</a>

The second view renders the data with ng-repeat.

I've tried borrowing some code from this question, and don't understand exactly what I'm doing wrong.

score 0 · Answer 1 · answered Dec 18 '14 at 06:21

0

Just reviewing your code and the first thing that comes to mind is that href="#/page2" is referencing an named anchor '/page2' (ie ...) not the relative url "/page2" (ie ...). The javascript code .when("/page2") is not being called because there is no matching request for "/page2".

answered Dec 18 '14 at 06:21

Dwight Spencer

1,472
16
22

Would that matter in Angular? It worked before I tried to do the "resolve" thing. I'm able to click through several views via links like that. – R891 Dec 18 '14 at 06:54

score 0 · Answer 2 · answered Dec 18 '14 at 06:22

0

what about using resolve property on the route? you have your factory return the promise, the in the route's resolve, you inject that factory (or service), and only then will the route change:

$routeProvider
    .when("/news", {
        templateUrl: "newsView.html",
        controller: "newsController",
        resolve: {
            message: function(messageService){
                return messageService.getMessage();
        }
    }
})

full reference: http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx

update:

you'd remove the ng-click from your anchor to do this

answered Dec 18 '14 at 06:22

edamon

74
4

If I remove the `ng-click`, will it cause the JSON to be requested each time `/page2` is loaded? I only want it to be requested when the link is clicked, but not if the page is accessed directly or reloaded. – R891 Dec 18 '14 at 06:55
sorry it was late and I didn't read your question well. you are attempting to use resolve, and yes it would get reloaded. Your issue is that you are attempting to use resolve, AND have a controller function that uses your mainFactory. you only need one. why do you only want it to be loaded when the user clicks? if they navigate directly to that page, how does it retrieve data? – edamon Dec 18 '14 at 15:20
It's a sequence of screens that can't be entered from the middle. That's why I don't want the data to load if the URL is accessed directly. It should only load if a button is clicked on a previous URL. I only tried adding resolve, because the data was loading every time the view changed or not coming back before the next view was trying to render. – R891 Dec 18 '14 at 19:29

AngularJS: How do I get data from a server before changing routes

2 Answers2