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

Question

this is a jsbin showing the problem，不过，我会在这里解释一下。我试图在进入路线之前使用 resolve 到运行一些代码，但是，它不会运行（因为 console.log 语句提供了更多详细信息）。（因为它没有运行，我不确定我是否正确设置了模板中 resolve 的 return 值）。为什么 resolve 运行ning 没有？

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 提供程序，因为不存在这样的 provider/service。它是由 angular 路由器注入的特殊依赖项，只有路由器知道如何将 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>

设置路由配置：

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

JSBin

另请参阅，虽然它使用angular ui-router，但概念是相同的。

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

resolve not running before entering route

javascript

angularjs

angularjs-routing