Question

Angular 1.3问题：我已阅读了许多Stack Overflow问题和教程，但未能使我的特定代码正常工作。我想要一个带按钮的视图（page1.html）。单击该按钮时，它将从服务器获取数据并在第二个视图（page2.html）中呈现它。

以下是基本代码：

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;
    }
};

这是来自链接上ng-click的模板：

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

第二个视图使用ng-repeat呈现数据。

我尝试从this question借用一些代码，但并不完全明白我做错了什么。

Answer 1

只需查看您的代码，首先想到的是href =＆＃34;＃/ page2＆＃34;正在引用一个命名锚点＆＃39; / page2＆＃39; （即......）不是相对网址＆＃34; / page2＆＃34; （即...）。 javascript代码.when（＆＃34; / page2＆＃34;）未被调用，因为＆＃34; / page2＆＃34;没有匹配的请求。

Answer 2

在路线上使用resolve属性怎么样？你让你的工厂退还承诺，在路线的决心，你注入那个工厂（或服务），然后才会改变路线：

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

完整参考：http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx

更新

您要从锚点中移除ng-click以执行此操作

AngularJS：如何在更改路由之前从服务器获取数据

2 个答案: