Question

我试图划分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由于其不确定的性质而显得空洞，所以我不认为这是一个问题，但我不确定我是什么＆＃39}我失踪了。

这是错误的信息：

获取http://localhost:3000/partials/projectBlocks 404（未找到）

我知道我应该相对于我的应用程序的根目录进行路由，我相信我是，所以我不确定为什么它会在看起来像是... /public/.../ folder（app是典型的快递结构）

继承我的代码：

玉视图（在./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网站，所以我的代码可能是两者的混合，感谢任何帮助/参考！

Answer 1

AngularJS不会为您编译Jade模板。您可以设置它来查看＆partial; / projectBlocks＆＃39;，因为我假设您正在使用＆＃39; / public＆＃39;对于您的静态服务器目录，它会在＆＃39; / public / partials / projectBlocks＆＃39;相对于项目的根目录。

要解决此问题，您需要设置一些中间件来检查请求是否在partials目录中查找文件，如果是，请使用Jade进行编译，以便在请求到达静态服务器中间件，或者使用类似HTML2Jade之类的东西手动将Jade编译为HTML，并在＆＃39; / public / partials＆＃39;中创建一个新文件。目录名为＆＃39; projectBlocks＆＃39;。 AngularJS不会假定HTML扩展名，因此如果您创建名为＆＃39; projectBlocks.html＆＃39;的文件，则必须将模板网址更改为＆part; / projectBlocks.html＆＃39;

快速搜索Google后，您可以使用Connect Jade来完成我上面提到的第一个建议。只需按照自述文件中的说明操作，它将充当该目录的Jade编译器和静态服务器。

Answer 2

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

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

缺点是我在Express路由器和Angular路由器之间感到困惑。在调试尝试找到正确的文件结构时，我已经移动了我的partials / projectBlocks，因为我创建的那个似乎没有用。但是，当我连接它时，它将阻止浏览器。事实证明，我遗漏了实际Angular请求的处理程序，导致它永远不会通过并超时。

Angular无法加载模板

2 个答案: