javascript - Express 后端的 Angular Routing templateUrl 无法正常工作

Question

我在使用 Angular 路由和快速显示部分时遇到问题。我正在尝试进行设置，以便我仍然可以使用 pug (以前的 jade)来编写简短的 html。据我所知，一切都应该正常，没有错误，一切都正确。我的应用程序的大多数其他部分都在工作(API 调用、 Controller 等)。我的主页如下:

    doctype html
    html(ng-app='myapp')
        head
            base(href='/')
            script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js")
            script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.js")

        body
             header#main

            .content(ng-view)


             script(src="/js/app.js")
             script(src="/js/controllers/adminController.js")
             script(src="/js/routes.js")

这是我的路线文件

angular.module('myapp')
.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/admin', {
            templateUrl: '/templates/admin',
            controller: 'AdminController',
            caseInsensitiveMatch: true
        })
        .otherwise({
            template: '<h1>Page not found</h1>'
        })
    ;
    $locationProvider.html5Mode(true);
});

最后，快速路线:

router.get('/templates/:name', function(req, res, next) {
     var name = 'templates/' + req.params.name;
     console.log('Express: ' + name);
     res.render(name, function(err, html){
        //this callback function can be removed. It's just for debugging.
        if(err)
            console.log("Error: " + err);
        else
            console.log("We're good!");
        res.send(html);
     });
 });

最后，这是 Node 服务器输出:

Express: index
GET /admin 304 68.962 ms - -
GET /js/app.js 304 0.994 ms - -
GET /js/controllers/adminController.js 304 0.751 ms - -
GET /js/routes.js 304 14.590 ms - -
Express: templates/admin
We're good!
GET /templates/admin 304 368.081 ms - -

正如您所看到的，索引加载，调用部分，并且模板被调用并呈现，正如您所期望的那样。

问题是 ng-view 没有被替换或更新。如果我将路由更改为模板而不是 templateUrl，并且只打印一行文本，那么一切都会正常工作，所以我知道路由正在工作，这不是应用程序配置问题。

我已经被这个问题困扰了几天，并且没有任何错误消息，我完全不知道为什么这不起作用。

此外，当我在 Controller 中检查以下内容时，我得到了部分内容，因此它可以正常通过:

angular.module('buriedcinema.controllers')
    .controller('AdminController', ['$templateCache', function(Movies, Users, $templateCache){
    console.log($templateCache.get('templates/admin'));
}
console:
<h1> this is my partial </h1>

Answer 1

通过向我的路由添加“controllerAs:”选项并通过对象名称引用我的 Controller 来修复。

.when('/admin', {
            templateUrl: 'templates/admin',
            controller: 'AdminController',
            controllerAs: 'adminCtrl',
            caseInsensitiveMatch: true
        })

更技术性的解释是，我没有实例化具有状态的对象，而是尝试静态使用我的 Controller ，因此它永远不会更新。希望这可以帮助其他人。