Question

this is a jsbin showing the problem但是，我会在这里解释一下。我试图在输入路由之前使用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',的控制器属性中设置控制器别名。
当您使用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中也有拼写错误。

总的来说，它看起来像这样。

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

<强> JSBin

另见this answer尽管它使用了角度ui-router，但概念是相同的。

在进入路线之前解决不运行

1 个答案: