【发布时间】：2016-11-03 21:27:33
【问题描述】：
我正在做关于 MEAN 堆栈和 Flapper News 的 thinkster.io 教程。 https://thinkster.io/mean-stack-tutorial/ 我在 Beginning Node 部分之前停了下来。我的代码一直工作到本教程前半部分的后半部分。我希望有人能帮助我找出问题所在，因为我只是 MEAN 的初学者。
我的index.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 src="app.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 posts | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="upvote(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="theTitle"></input>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Link"
ng-model="theLink"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
<script type="text/ng-template" id="/posts.html">
<div class="page-header">
<h3>
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</h3>
</div>
<div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="incrementUpvotes(comment)"></span>
{{comment.upvotes}} - by {{comment.author}}
<span style="font-size:20px; margin-left:10px;">
{{comment.body}}
</span>
</div>
</script>
</body>
</html>
我的app.js
var app = angular.module('flapperNews', ['ui.router']);
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('home');
}])
app.factory('posts', [function(){
var o = {
posts: []
};
return o;
}]);
app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
$scope.posts = posts.posts;
$scope.addPost = function(){
if(!$scope.theTitle || $scope.theTitle === '') { return; }
$scope.posts.push({
title: $scope.theTitle,
link: $scope.theLink,
upvotes: 0
comments: [
{author: 'Joe', body: 'Cool post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
]
});
$scope.theTitle = '';
$scope.theLink = '';
}
$scope.upvote = function(post){
post.upvotes++;
}
}]);
app.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts){
$scope.post = posts.posts[$stateParams.id];
$scope.addComment = function(){
if($scope.body === '') { return; }
$scope.post.comments.push({
body: $scope.body,
author: 'user',
upvotes: 0
});
$scope.body = '';
};
}]);
我目前通过在 chromium 中打开 index.html 来运行这个骨架。
【问题讨论】：
-
该指南也有问题。你得到什么错误？
-
您的实际问题是什么？发布大量代码并声明它不起作用并不能完全回答这个问题......
-
当你说你在chromium中打开了index.html，你的意思是你去了
c:/mywebiste/index.html，还是http://localhost/index.html？一个会工作，另一个可能不会工作。 -
@Claies 一般来说，你是对的。但是，如果没有本地服务器实例，这个可以正常工作。 ;)
-
@kiswa 这就是我说可能的原因，尽管我没有花很多时间分析代码以查看它在做什么或哪里可能存在语法错误....
标签： javascript angularjs