Question

设置：jade，angular，express，node。

在我routeProvider的角度中，我遇到了一些问题。我正在请求一个没有捕获的参数的URL。

var app = angular.module('myApp', ['ngRoute']);

     app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
      $routeProvider
         //... omitted some url/pages here
         //start of SPA
         .when('/dashboard/', {
            templateUrl: 'partials/index',
            controller: 'dashIndexCtrl'
        })
        .when('/dashboard/class/:id',{
            templateUrl: 'partials/class',
            controller: 'classCtrl'
        })
        .otherwise({
            redirectTo: '/'
        }); 

        $locationProvider.html5Mode(true);
    }]);

当我致电localhost/dashboard/class/TEST

时

我被重定向到root。

我在服务器端声明我的路由如下：

app.get('/dashboard', routes.dashboard);
app.get('/dashboard/partials/:name', routes.partials);
app.get('/api/class/:id', api.classGet);

我的控制器名称与routeProvider匹配。在这种情况下，控制器代码如下：

app.controller('classCtrl', function($scope, $http, $routeParams){
    $http.get('/api/class/' + $routeParams.id)
        .success(function(dataJson){
            console.log(dataJson);
        });
});

为什么routeProvider错过了这个网址？我在我的控制器中设置了断点，所以我确定它没有被调用。我的partials/class.jade也未被调用。如果您需要更多代码或目录信息，请与我们联系。提前谢谢。

<小时/> 经过进一步调查：
如果我去：localhost/dashboard/partials/class它将加载该玉文件。所以它绝对是控制器。

目录结构，我相信这是我的问题....

+---\
|   +---\views
    |   +---index.jade
    |   +---dashboard.jade
    |   +---\partials
        |   +---index.jade
        |   +---class.jade

Answer 1

查看控制台并观察AngularJS尝试从/partials/index然后从/dashboard/partials/index加载模板

解决方案

在配置部分将 templateUrl 路径设置为/dashboard/partials/index。

原因：angular-route.js

templateUrl = $sce.getTrustedResourceUrl(templateUrl);

if (angular.isDefined(templateUrl)) {
    next.loadedTemplateUrl = templateUrl;
    template = $http.get(templateUrl, {cache: $templateCache}).
        then(function(response) { return response.data; });
}

templateUrl与route path没有连接 - 只需从应用程序的Angular根加载tempalteUrl。

$ routeProvider.when（..）没有捕获所有的URL

1 个答案:

解决方案

原因：angular-route.js