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

时间:2015-01-20 01:13:15

标签: javascript angularjs angularjs-routing

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>

1 个答案:

答案 0 :(得分:2)

您需要进行一些更改:

  • 您不能将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,但概念是相同的。