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

Question

我正在按照教程編寫角度應用程序。 令我驚訝的是，我完全遵循了我的要求，而我的node 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";
});

我的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

我的主玉

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，但仍然很白。 任何幫助，將不勝感激。

Answer 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的另一個tut視頻中了解到這一點，以及“ [Tuts Plus]使用AngularJS Video Tutorial從頭開始構建Web應用程序”。 演示者特別提到了base(href='/')的重要性，並警告不要忘記。 另外，還有來自@Alex Choroshin回答另一個很好的例子在這里。 您應該下載他建議的文檔。 這是一個完美的例子。 謝謝

角度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