我正在Thinkster上遵循MEAN堆栈教程,我遇到了几个问题。
第一种是内联视图,例如,使用id等于"home.html"的脚本标记,然后应该使用UI路由器路由到该标记。这不起作用,但我通过创建单独的文件来解决此问题,其中包含我在脚本标签之间想要的任何标记。
现在我正在进入节点和快速领域,并托管本地服务器。我也在尝试遵循基本的节点结构。我在项目的根目录中有一个app.js文件,以及angularApp.js教程中的代码,它包含在public/javascripts中。我已将视图移动到视图文件夹中。
这是结构:
Root --- app.js
|
--- views --- index.ejs, home.html, posts.html
|
--- public --- javascripts --- angularApp.js
当应用程序启动时,它首先找到angularApp.js(良好),但随后无法加载主页.html。不显示任何内容(屏幕为空白)。
这是我的angularApp.js app.config部分:
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'MainCtrl'
})
.state('/posts', {
url: 'posts/{id}',
templateUrl: 'posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('/views/home');
}]);
这是我的家.html:
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in posts | orderBy: '-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="incrementUpvotes(post)"></span>
{{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<!-- If the link is supplied, make it the href -->
<a ng-show="post.link" href="{{post.link}}">{{post.title}}</a>
<!-- If the link isn't supplied, just display the title -->
<span ng-hide="post.link">{{post.title}}</span>
<span>
<a href="#/posts/{{$index}}">Comments</a>
</span>
- upvotes: {{post.upvotes}}
</span>
</div>
<form ng-submit="addPost()" style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title" ng-model="title"></input>
</div>
<div class="form-group">
<input type="text"class="form-control" placeholder="Link" ng-model="link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
我认为问题在于我对 ui 路由器参数的处理 - 我觉得我已经尝试了每种组合,并且我已经到了尽头。整个代码库的链接在这里:https://github.com/Zombiefruit/mean_test_01。我只是想让景色注入!
谢谢。
您的 Web 根目录是 public
,因此您必须在公共内部创建一个文件夹views
然后移动home.html
并posts.html
其中。
然后将templateUrl
更改为'/views/home.html'
就可以了。
顺便说一句,否则的路线应该是/home
尝试将相对路径添加到模板网址,如模板网址:"/views/home.html"。
编辑:ID 参数应使用 :id 而不是 {id} 进行设置。对不起,我以前没有注意到这一点。:)