[英]angularjs ui-view element not rendering content
I'm following this tutorial to get familiar with the MEAN
stack. 我正在学习本教程以熟悉
MEAN
堆栈。 I got to the point where they start using a routing configuration using ui-router
. 我到了他们开始使用
ui-router
的路由配置的地步。 I've set everything up like they have it, but my page isn't rendering anything in my <ui-view>
element. 我已经设置了所有内容,但是我的页面没有在我的
<ui-view>
元素中呈现任何内容。
(this was working before I added the routing config) (这在我添加路由配置之前有效)
Here's what my files look like: 这是我的文件的样子:
index.html: index.html的:
<!DOCTYPE html>
<html>
<head>
<title>Flapper News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script scr="indexHomeState.js"></script>
<script src="indexController.js"></script>
<script src="postsService.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id='/home.html'>
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in indexCtrl.getPosts() | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="indexCtrl.incrementUpvotesForPost(post)"></span>
{{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
</div>
<form ng-submit="indexCtrl.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="indexCtrl.title"></input>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Link"
ng-model="indexCtrl.link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
</body>
</html>
routingConfig (indexHomeState.js) routingConfig(indexHomeState.js)
angular.module('flapperNews')
.config('indexHomeState', indexHomeState);
indexHomeState.$inject = ['$stateProvider', '$urlRouterProvider'];
function indexHomeState($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'indexController as indexCtrl'
});
$urlRouterProvider.otherwise('home');
}
my angular app/controller declaration: 我的角度app /控制器声明:
angular.module('flapperNews', ['ui.router'])
.controller('indexController', indexController);
indexController.$inject = ['postsService'];
function indexController(postsService) {
var vm = this;
vm.test = 'Hello world';
vm.getPosts = postsService.getPosts;
vm.addPost = postsService.addPost(vm.title, vm.link);
vm.incrementUpvotesForPost = postsService.incrementUpvotesForPost;
}
post service 邮政服务
angular.module('flapperNews')
.factory('postsService', postsService);
function postsService() {
var serv = this;
var posts = [
{title: 'post 1', upvotes: 5},
{title: 'post 2', upvotes: 2},
{title: 'post 3', upvotes: 15},
{title: 'post 4', upvotes: 9},
{title: 'post 5', upvotes: 4}
];
function getPosts() {
return posts;
}
function addPost(title, link) {
if(!title || title === '') { return; }
posts.push({
title: vm.title,
link: vm.link,
upvotes: 0
});
vm.title = '';
vm.link = '';
}
function incrementUpvotesForPost(post) {
post.upvotes ++;
}
return {
getPosts: getPosts,
addPost: addPost,
incrementUpvotesForPost: incrementUpvotesForPost
}
}
Your code looks good only the thing you are missing is, you need to change 你的代码看起来很好,只有你缺少的东西,你需要改变
$urlRouterProvider.otherwise('home');
to 至
$urlRouterProvider.otherwise('/home');
Also you have misspelled the src
to scr
for indexHomeState.js
, That restricting your JS files from loading 你还拼错了
src
to scr
for indexHomeState.js
,这限制你的JS文件加载
Scripts 脚本
<script src="indexController.js"></script>
As you don't have indexHomeState
provider in your app, you shouldn't add indexHomeState
as a string inside config block. 由于您的应用程序中没有
indexHomeState
提供程序,因此不应将indexHomeState
作为配置块内的字符串添加。
angular.module('flapperNews')
.config('indexHomeState', indexHomeState);
It would be simply 这很简单
angular.module('flapperNews')
.config(indexHomeState); //removed `'indexHomeState',` from config
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.