進入路線前解析未運行

Question

這是一個顯示問題的jsbin ，但是，我將在這里進行解釋。 我正在嘗試使用resolve在輸入路由之前運行一些代碼，但是它無法運行（因為console.log語句提供了更多詳細信息）。 （由於它沒有運行，所以我不確定是否要正確設置模板中resolve的返回值）。 為什么不resolve運行？

var app = angular.module('jsbin', ['ngRoute'])
    .config(function ($routeProvider) {
        'use strict';
        console.log("this runs");

        var routeConfig = {
            controller: 'DemoCtrll',
            resolve: {
                store: function (demoStorage) {
                console.log("this doesn't log");
                    return demoStorage;
                }
            }
        };

        $routeProvider
            .when('/', routeConfig)
            .otherwise({
                redirectTo: '/'
            });
});

app.controller('DemoCtrl', function($scope, $routeParams, store) { 
  this.name = store;
});

app.factory('demoStorage', function () {
        'use strict';
        return "World";
});

html

<body ng-app="jsbin">
  <div ng-controller="DemoCtrl as demo">
    <h1>Hello {{name}}</h1>
  </div>

Answer 1

您需要進行一些更改：

您不能將ng-controller指令與ng-view的路由綁定控制器一起使用，即在路由配置controller: 'DemoCtrl as demo',的controller屬性中設置控制器別名controller: 'DemoCtrl as demo',
當您使用ng-controller指令實例化控制器時，它不知道什么是store提供程序，因為不存在這樣的提供程序/服務。 這是由角度路由器注入的特殊依賴關系，只有路由器知道如何將store作為依賴關系注入到控制器中。 這就是使用ng-controller時發生錯誤的原因。
您需要定義模板html或模板，並將其綁定到routeConfig上的templateUrl屬性。 即templateUrl:'demo.html',
從視圖中刪除ng-controller 。
您需要使用ng-view指令來呈現視圖。 即在您的index.html <ng-view></ng-view>
由於您使用的是控制器別名，因此可以在路由渲染的視圖中將該屬性稱為demo.name 。
您在控制器名稱@ DemoCtrl1也有一個錯字。

總的來說，它將是這樣。

在say Demo.html定義您的模板（在演示示例中，我使用了方便的腳本type="text/ng-template" ）

<div>
  <h1>Hello {{demo.name}}</h1>
</div>

設置routeConfig：

  var routeConfig = {
      templateUrl:'demo.html',
        controller: 'DemoCtrl as demo',
        resolve: {
            store: function (demoStorage) {
                console.log("this doesn't log");
                return demoStorage;
            }
        }
    };

聯合會

雖然它使用了角度ui路由器，但也看到了這個答案，但是概念是相同的。

進入路線前解析未運行

問題描述

1 個解決方案

解決方案1
2 已采納 2015-01-20 01:23:59

進入路線前解析未運行

問題描述

1 個解決方案

解決方案1 2 已采納 2015-01-20 01:23:59

解決方案1
2 已采納 2015-01-20 01:23:59