角度js ng-view返回空白部分— Express / Jade

Question

I am writing an angular application following a tutorial. 我正在按照教程编写角度应用程序。 To my surprise, i followed exactly and my node js is starting fine without an issue. 令我惊讶的是，我完全遵循了我的要求，而我的node js正常运行没有问题。 However, my angular is not returning the template as suppose to . 但是，我的角度未按预期返回模板。 I saw a similar problem here same tutorial and the same issue. 我在同一教程和同一问题中看到了类似的问题。 However, the question was not answered . 但是，这个问题没有得到回答。 Below is my dir structure 下面是我的目录结构

app.js 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";
});

My layout.jade 我的layout.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

My main.jade 我的主玉

h1 This is a partial
h2 {{ myVar }}

The route in my server.js are set as 我的server.js中的路由设置为

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

my index.jade 我的index.jade

extends ../includes/layout

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

Althought i am thinking that shouldn't be an issue because i am starting with a partial view which is part of a page. 尽管我认为这不应该成为问题，因为我从页面的局部视图开始。 When i run, my page return black. 运行时，页面返回黑色。 I inspect the element and ensured that all the js and css where loaded. 我检查了元素，并确保所有js和CSS都已加载。 When i view the source, a html source below was generated. 当我查看源代码时，生成了以下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>

I was suspecting routeProvider from my app.js here 我在这里从我的app.js中怀疑routeProvider

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

tried 试着

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

All to no avail . 一切都无济于事。 please where do i go wrong ? 请问我哪里出错了？ I have tried everything possible. 我已尽一切可能。 I even restarted the tut yet still blanc. 我什至重新启动了tut，但仍然很白。 any help would be appreciated. 任何帮助，将不胜感激。

Answer 1

Thank you for your time. 感谢您的时间。 It turns out the issue is in my layout 原来问题出在我的布局中

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

Changed to 变成

 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

What was missing is 缺少的是

base(href='/')

It does not load the templates if you remove that base. 如果删除该基础，则不会加载模板。 I learnt that from another tut video by tut plus "[Tuts Plus] Building a Web App From Scratch With AngularJS Video Tutorial" . 我从tut的另一个tut视频中了解到这一点，以及“ [Tuts Plus]使用AngularJS Video Tutorial从头开始构建Web应用程序”。 The presenter specifically mentioned the important of the base(href='/') and warned never to forget . 演示者特别提到了base(href='/')的重要性，并警告不要忘记。 Alternatively , there is another good example from @Alex Choroshin answer here . 另外，还有来自@Alex Choroshin回答另一个很好的例子在这里。 you should download the doc he suggested . 您应该下载他建议的文档。 Its a perfect example. 这是一个完美的例子。 Thanks 谢谢

角度js ng-view返回空白部分— Express / Jade

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-05-09 10:30:51

角度js ng-view返回空白部分— Express / Jade

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-05-09 10:30:51

解决方案1
0 已采纳 2015-05-09 10:30:51