0
私はMEANでもっと混乱させようとしており、私は次のようになっていますThinkster's Tutorial。私はNode.JSに移動する部分にいますが、私はこの時点までにかなりの問題を抱えていましたが、私はそれが私のコードにないとかなり確信しています。localhostとCodepenのノードスクリプトのレンダリングが異なっている
私は最終的に 'npm start'経由でロードすることに決めました。そしてlocalhostではまだ間違っています。私は時間の大多数のコメントを見ていない、時々私は行うが、{{コメント}}などは解決していない。私は元々それがローカルでファイルを開くことによると仮定したので、NPMがそれを修正できると思った。
私は 'Brackets'を使用しています。これはEJSに変わるまでうまくいきました。タイトルをクリック除き戻っインデックスに行きませんが、私は私たちが今までそのコントローラを作ったとは思わない（私を混乱させているもの
私はCodepenにそれを掲載され、サイトはかなり正常に作動している。
マイIndex.ejs
<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="javascripts/angularApp.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
</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>
<form ng-submit="addComment()"
style="margin-top:30px;">
<h3>Add a new comment</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Comment"
ng-model="body"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
<body ng-app="flapperNews" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
<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>
<a href="#/posts/{{$index}}">Comments</a>
</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>
マイangularApp.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.title || $scope.title === '') { return; }
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0,
comments: [
{author: 'Joe', body: 'Cool post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
]
});
$scope.title = '';
$scope.link = '';
}
$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 = '';
};
}]);
元々私はそれがローカルなのだと仮定しましたが、NPMはそれを解決しませんでしたか？そうでない場合、Node/Expressを実際にテストする最善の方法は何ですか？
洞察力があれば分かります。
（私の周りSOを見てきたし、私は私と同様の問題を持つ投稿の多くを見るが、どれも直接/更新答えていない）
package.json
{
"name": "flapper-news",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.15.1",
"cookie-parser": "~1.4.3",
"debug": "~2.2.0",
"ejs": "~2.4.1",
"express": "~4.13.4",
"mongoose": "^4.5.9",
"morgan": "~1.7.0",
"serve-favicon": "~2.3.0"
}
}
に追加しますConsole.Log
マイコンソールは404 GET応答を返します。理由がわからない。
angular.js:9818GET http://localhost:3000/home.html 404 (Not Found)(anonymous function) @ angular.js:9818m @ angular.js:9619Ke.$get.f @ angular.js:9335(anonymous function) @ angular.js:13175$eval @ angular.js:14388$digest @ angular.js:14204$apply @ angular.js:14493(anonymous function) @ angular.js:1449e @ angular.js:4182d @ angular.js:1447sc @ angular.js:1467Jd @ angular.js:1361(anonymous function) @ angular.js:26086a @ angular.js:2741c @ angular.js:3011
angular.js:9818 GET http://localhost:3000/home.html 404 (Not Found)(anonymous function) @ angular.js:9818m @ angular.js:9619Ke.$get.f @ angular.js:9335(anonymous function) @ angular.js:13175$eval @ angular.js:14388$digest @ angular.js:14204$apply @ angular.js:14493l @ angular.js:9650O @ angular.js:9840w.onload @ angular.js:9781
ここで 'npm start'を参照しているので、実際に何が実行されているかを知るためにpackage.jsonをインクルードすると良いでしょう。私は何かが動作していないが、何が明確ではないことを知っていますネットワーク・インスペクタを調べて、どのような負荷がかかっているか、コンソールに何もエラーがないかを確認しました。何が起こっているのでしょうか？ （これはビュー内の{{}}のような補間ブレースが表示されているのでしょうか？通常はコンソールに角度エラーがあり、ページが解析されなかったか、またはページが処理されなかったため角度がロードされませんでした） – shaunhusain
Hey @ shaunhusain - それは全くレンダリングされません。トピック名 'foo'を表示するのではなく、{{post.title}を表示し、リンクにコントローラも反映されません。 – DNorthrup
コンソールにエラーがありますか？コンソールにエラーがない場合、次のことは、angular.jsのネットワークタブフィルタをチェックし、応答が実際にangular.jsソースをロードするかどうかを確認することです。DOMContentReadyのための角度待ちは、ng-appディレクティブを探してページを解析し始めます。最初に見つかったのは、ブートストラッププロセスをトリガーします（configを実行してブロックを実行し、処理するディレクティブを探し始めます）。 – shaunhusain