角JS NG-视图返回相思的谐音 - 前preSS /玉 [英] angular js ng-view returns blanc partials -- Express/ Jade
问题描述
我写下面的教程角应用。令我惊讶，我跟着正好和我的节点JS是罚款不启动的问题。然而，我的角度不返回模板猜想。我看到了一个类似的问题<一href=\"http://stackoverflow.com/questions/23365044/ng-view-not-working-with-partials-in-angularjs-ex$p$pss\">这里相同的教程和同样的问题。然而，问题不好回答。下面是我的目录结构
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. 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
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
My 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
我main.jade
My main.jade
h1 This is a partial
h2 {{ myVar }}
在我server.js路线设置为
The route in my server.js are set as
app.get('partials/:partialPath',function(req,res){
res.render('partials/' + req.params.partialPath);
});
app.get('*', function(req,res){
res.render('index');
});
我index.jade
my index.jade
extends ../includes/layout
block main-content
section.content
div(ng-view)
我虽然在想，因为我开始这是一个网页的一部分的局部视图不应该是一个问题。当我跑，我的网页回黑色。我检查元素，并确保所有的JS和CSS加载的地方。当我查看源，HTML源代码如下生成。
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. When i view the source, a html source below was generated.
<!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此处
I was suspecting routeProvider from my app.js here
.when('/', { templateUrl: 'partials/main', controller: 'mainCtrl'});
尝试
.when('/', { templateUrl: '/partials/main', controller: 'mainCtrl'});
一切都无济于事。请我在哪里去了？我曾尝试一切可能。我甚至重新启动啧啧但仍相思。任何帮助将是AP preciated。
All to no avail . please where do i go wrong ? I have tried everything possible. I even restarted the tut yet still blanc. any help would be appreciated.
推荐答案
感谢您的时间。原来，问题是我的布局
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
更改为
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='/')
如果你删除它的基础不加载模板。我了解到，从另一个啧啧啧啧视频加[TUTS加]构建Web应用程序从头随着AngularJS视频教程。在presenter特别提到了基地（HREF ='/'）的重要，并警告永远不要忘记。另外，有一个从@Alex Choroshin回答另一个很好的例子，<一个href=\"http://stackoverflow.com/questions/21099992/can-angular-be-used-within-a-jade-template/21100175#21100175\">here 。你应该下载他建议文档。它是一个很好的例子。谢谢
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" . The presenter specifically mentioned the important of the base(href='/') and warned never to forget . Alternatively , there is another good example from @Alex Choroshin answer here . you should download the doc he suggested . Its a perfect example. Thanks
这篇关于角JS NG-视图返回相思的谐音 - 前preSS /玉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
