So, I'm following the Angular tutorial on Thinkster located here. I got to the part where you refractor the posts into a service, and all of a sudden my app is broken. Here's my code (app.js):
所以，我在跟踪这个关于Thinkster的角度教程。当你将文章重新转换成服务时，我的应用程序突然就坏了。这是我的代码(app.js):
var app = angular.module('flapperNews', []);
app.factory('posts', [function(){
var o = {
posts: [];
};
return o;
}]);
app.controller('MainCtrl', [
'$scope', 'posts',
function($scope,posts){
$scope.test = 'Hello world!';
$scope.posts = posts.posts;
$scope.addPost = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.posts.push({
title: $scope.title,
upvotes: 0,
link: $scope.link
});
$scope.title = '';
$scope.link = '';
}
$scope.incrementUpvotes = function(which){
which.upvotes += 1;
}
}]);
and the HTML (index.html):
和HTML(index . HTML):
<html>
<head>
<title> First Angular App </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="app.js"></script> <!-- Angular app -->
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<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;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</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>
</div>
</div>
</body>
</html>
I've tried plenty of different stuff, moving around posts that I had, etc. (the code listed above doesn't have my posts in it; i took them out) Where is my bug?
我尝试过很多不同的东西，在我有过的帖子周围移动，等等(上面列出的代码没有我的帖子;我拿出它们)我的虫子在哪里?
If it helps at all, here is how the code looks in my browser: image
如果有用的话，下面是我的浏览器中的代码:image
1 个解决方案
#1
2
Please, remove ; from posts: [];
请删除;从文章:[];
var app = angular.module('flapperNews', []);
app.factory('posts', [
function() {
var o = {
posts: []
};
return o;
}
]);
app.controller('MainCtrl', ['$scope', 'posts',
function($scope, posts) {
$scope.test = 'Hello world!';
$scope.posts = posts.posts;
$scope.addPost = function() {
if (!$scope.title || $scope.title === '') {
return;
}
$scope.posts.push({
title: $scope.title,
upvotes: 0,
link: $scope.link
});
$scope.title = '';
$scope.link = '';
}
$scope.incrementUpvotes = function(which) {
which.upvotes += 1;
}
}
]);<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="flapperNews">
<div ng-controller="MainCtrl">
<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;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</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" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Link" ng-model="link" />
</div>
<button type="submit" class="btn btn-primary" ng-click='addPost()'>Post</button>
</form>
</div>
</div>#1
2
Please, remove ; from posts: [];
请删除;从文章:[];
var app = angular.module('flapperNews', []);
app.factory('posts', [
function() {
var o = {
posts: []
};
return o;
}
]);
app.controller('MainCtrl', ['$scope', 'posts',
function($scope, posts) {
$scope.test = 'Hello world!';
$scope.posts = posts.posts;
$scope.addPost = function() {
if (!$scope.title || $scope.title === '') {
return;
}
$scope.posts.push({
title: $scope.title,
upvotes: 0,
link: $scope.link
});
$scope.title = '';
$scope.link = '';
}
$scope.incrementUpvotes = function(which) {
which.upvotes += 1;
}
}
]);<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="flapperNews">
<div ng-controller="MainCtrl">
<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;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</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" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Link" ng-model="link" />
</div>
<button type="submit" class="btn btn-primary" ng-click='addPost()'>Post</button>
</form>
</div>
</div>