我正在学习 Thinkster 上的 MEAN 堆栈教程,但遇到了一些问题。
第一个是内联 View ,例如使用 id 等于“home.html”的脚本标记,然后应该使用 ui 路由器将其路由到。这不起作用,但我通过创建单独的文件来解决这个问题,其中包含脚本标记之间我想要的任何标记。
现在我正在进入节点和 express 领域,并托管本地服务器。我也试图遵循基本的节点结构。我的项目根目录中有一个 app.js 文件,以及 angularApp.js 中教程中的代码,该代码包含在 public/javascripts 中。我已将 View 移至 View 文件夹中。
这是结构:
Root --- app.js
|
--- views --- index.ejs, home.html, posts.html
|
--- public --- javascripts --- angularApp.js
当应用程序启动时,它首先找到 angularApp.js(良好),但随后无法加载 home.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');
}]);
这是我的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 。我只想注入(inject) View !
谢谢。
最佳答案
您的网络根目录是 public
,因此您必须在 public 内创建一个文件夹 views
,然后移动 home.html
和 posts.html
进入其中。
然后将 templateUrl
更改为 '/views/home.html'
即可。
顺便说一句,否则路线应该是/home
关于javascript - 无法使用 ui 路由器注入(inject) View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38341645/