【问题标题】:angular js ng-view returns blanc partials -- Express/ Jadeangular js ng-view 返回 blanc partials -- Express/ Jade
【发布时间】:2015-07-16 16:29:16
【问题描述】:

我正在按照教程编写一个角度应用程序。令我惊讶的是,我完全遵循了,我的节点 js 开始正常没有问题。但是,我的角度没有像假设的那样返回模板。我看到了类似的问题 here 相同的教程和相同的问题。但是,这个问题没有得到回答。下面是我的目录结构

app.js

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

angular.module('app').config(function($routeProvider, $locationProvider){
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/', { templateUrl: 'partials/main', controller: 'mainCtrl'});
});


angular.module('app').controller('mainCtrl', function($scope){
    $scope.myVar = "Hello Angular";
});

我的布局.jade

doctype html
head
   link(rel="styleSheet",href="css/bootstrap.css")
   link(rel="styleSheet",href="vendor/toastr/toastr.css")
   link(rel="styleSheet",href="css/site.css")
body(ng-app='app')
   block main-content
   include scripts

我的主玉

h1 This is a partial
h2 {{ myVar }}

我 server.js 中的路由设置为

app.get('partials/:partialPath',function(req,res){
    res.render('partials/' + req.params.partialPath);
});
app.get('*', function(req,res){
    res.render('index');
});

我的 index.jade

extends ../includes/layout

block main-content
    section.content
       div(ng-view)

虽然我认为这不应该是一个问题,因为我从作为页面一部分的部分视图开始。当我运行时,我的页面返回黑色。我检查了元素并确保加载了所有 js 和 css。当我查看源代码时,生成了下面的 html 源代码。

<!DOCTYPE html>
<head><link rel="styleSheet" href="css/bootstrap.css">
<link rel="styleSheet" href="vendor/toastr/toastr.css">
<link rel="styleSheet" href="css/site.css">
</head>
<body ng-app="app">
  <section class="content">
   <div ng-view></div></section>
   <script type="text/javascript" src="vendor/jquery/dist/jquery.js"></script><script type="text/javascript" src="vendor/angular/angular.js"></script>
<script type="text/javascript" src="vendor/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="vendor/angular-route/angular-route.js"></script><script type="text/javascript" src="app/app.js"></script>
</body>

我在这里怀疑我的 app.js 中的 routeProvider

.when('/', { templateUrl: 'partials/main', controller: 'mainCtrl'});

试过了

.when('/', { templateUrl: '/partials/main', controller: 'mainCtrl'});

一切都无济于事。请问我哪里错了?我已经尝试了所有可能的方法。我什至重新启动了 tut 仍然是 blanc。任何帮助将不胜感激。

【问题讨论】:

  • 在路径中添加 .html 是否有效?
  • @MatthewBrown 我的路径在 .jade 中。我试过 .jade 和 .html ,都失败了。我很困惑。
  • 你在使用像 grunt 这样的构建系统吗?
  • @MatthewBrown 从未听说过。我正在运行节点服务器,角度和玉引擎,手写笔等。没有咕噜声。
  • 嗯嗯,一定是有东西将jade编译成html,据我所知,angular不能直接处理jade文件,我想你必须有一些东西来转换它

标签: javascript angularjs node.js express pug


【解决方案1】:

感谢您的宝贵时间。原来问题出在我的布局中

doctype html
head
   link(rel="styleSheet",href="css/bootstrap.css")
   link(rel="styleSheet",href="vendor/toastr/toastr.css")
   link(rel="styleSheet",href="css/site.css")
body(ng-app='app')
   block main-content
   include scripts

改为

 doctype html
    head
       base(href='/')
       link(rel="styleSheet",href="css/bootstrap.css")
       link(rel="styleSheet",href="vendor/toastr/toastr.css")
       link(rel="styleSheet",href="css/site.css")
    body(ng-app='app')
       block main-content
       include scripts

缺少的是

base(href='/')

如果您删除该基础,它不会加载模板。我从 tut plus “[Tuts Plus] 从头开始​​使用 AngularJS 视频教程构建 Web 应用程序” 的另一个 tut 视频中了解到这一点。主持人特别提到了base(href='/')的重要性,并警告不要忘记。或者,@Alex Choroshin 回答 here 还有另一个很好的例子。你应该下载他建议的文档。它是一个完美的例子。谢谢

【讨论】:

    猜你喜欢
    • 2015-11-25
    • 1970-01-01
    • 2014-12-16
    • 2014-06-29
    • 2016-12-20
    • 1970-01-01
    • 2014-09-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多