Angular 无法加载模板答案

【问题标题】：Angular fails to load templateAngular 无法加载模板
【发布时间】：2015-03-23 19:27:26
【问题描述】：

我正在尝试划分一个 Angular 应用程序并遇到问题让 ngView 正常工作。路由似乎配置正确，当我记录它的属性时，我得到：$route、$routeParams 和 $location，我得到：

Object {routes: Object, reload: function, updateParams: function}

Object {}

和

LocationHtml5Url {$$html5: true, $$protocol: "http", $$host: "localhost", $$port: 3000, $$parse: function…}

我读到here$routeParams 可能由于其异步性质而显得空，所以我认为这不是问题，但我不确定我错过了什么。

这是错误消息：

GET http://localhost:3000/partials/projectBlocks404（未找到）

我知道我应该相对于我的应用程序的根进行路由，我相信我是这样，所以我不确定它为什么要在看起来是 ../public/ 的地方寻找部分。 ../ 文件夹（app 是典型的 express 结构）

这是我的代码：

玉观（在./views中）

div(ng-controller='projects')

div(ng-view)

部分视图 (./views/partials)

p hey you found me!

控制器（在 /public/ 目录中）

    angular.module('mean-man')
    .controller('projects', ['$scope', '$http', '$route', '$routeParams', '$location', function($scope, $http, $route, $routeParams, $location){

    console.log($route);
    console.log($routeParams);
    console.log($location);
    this.$route = $route;
    this.$location = $location;
    this.$routeParams = $routeParams;

angular app.js 文件（在 /public/ 目录中）

(function(){
angular.module('mean-man', ['ngRoute','ngAnimate','mm.foundation'])
    .config(['$routeProvider', '$locationProvider',
             function($routeProvider, $locationProvider){
                 $routeProvider
                 .when('/:member', {
                    templateUrl: 'partials/projectBlocks',
                     controller: 'projects',
                     controllerAs: 'project'
                 });
                 $locationProvider.html5Mode({enabled:true,requireBase:false});
             }]);

})();

我离开了 AngularJS 官方文档和 this 网站，所以我的代码可能是两者的混合，感谢任何帮助/参考！

【问题讨论】：

把html5mode的代码注释掉还能用吗？
它没有，实际上我添加了该行，因为我在另一个答案中找到了建议，尽管我现在找不到链接
哦，所以看起来该路径实际不存在，但它不存在。该文件在视图内，对吗？所以 templateUrl 应该是 'views/partials/projectBlocks.html'
是的，就是这样。我的应用程序结构如下：视图位于 ./views/partials 中：./views/partials 并且我的 Angular 应用程序位于：/public/javascripts/app。哦，但是我的文件是 projectBlocks.jade，它需要是 .html 扩展名吗？

标签： angularjs node.js pug

【解决方案1】：

AngularJS 不会为您编译 Jade 模板。您已将其设置为查看“partials/projectBlocks”，并且由于我假设您在静态服务器目录中使用“/public”，因此相对于您的项目的根目录，它需要一个位于“/public/partials/projectBlocks”的文件目录。

为了解决这个问题，你需要设置一些中间件来检查请求是否在partials目录中寻找文件，如果是，使用Jade编译它，这样当请求到达时它就会存在静态服务器中间件，或者，使用HTML2Jade 之类的东西手动将 Jade 编译成 HTML，并在 '/public/partials' 目录中创建一个名为 'projectBlocks' 的新文件。 AngularJS 不会假设一个 HTML 扩展名，所以如果你创建一个名为 'projectBlocks.html' 的文件，你必须将模板 URL 更改为 'partials/projectBlocks.html'

在谷歌快速搜索后，您可以使用Connect Jade 来完成我上面提出的第一个建议。只需按照 README 中的说明进行操作，它将充当该目录的 Jade 编译器和静态服务器。

【讨论】：

是的，我知道它不会编译 Jade。在许多在线示例中，您可以看到他们通过在他们的视图文件夹中指向它们时简单地不添加 .jade 扩展名来引用他们的玉文件。在对另一个问题进行更多挖掘后，我最终找到了解决方案，但感谢您的建议！

【解决方案2】：

我最终在这里的另一个答案中找到了解决方案：

Express and AngularJS - web page freezes when attempting to open home page

简而言之，我对我的 Express 路由器和 Angular 路由器感到困惑。我在调试试图找到正确的文件结构时移动了我的部分/项目块，因为我创建的那个似乎不起作用。但是，当我连接它时，它会停止浏览器。结果我忽略了实际 Angular 请求的处理程序，导致它永远不会通过并超时。

【讨论】：