节点脚本在localhost与Codepen上的呈现方式不同

时间:2016-08-19 01:31:53

标签: javascript angularjs node.js

我正在尝试更多地使用MEAN,我正在关注Thinkster's Tutorial。我正处于继续使用Node.JS的部分但到目前为止我已经遇到了很多问题,而且我相信它不在我的代码中。

我最终决定通过'npm start'加载它,而在localhost上它仍然看起来不正确。我大部分时间都没有看到评论,有时我会这样做,但{{comments}}等并没有解决。我原先假设它是由于在本地打开文件,所以认为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时真正测试Node / Express的最佳方法是什么?

欣赏任何见解。

(我环顾四周,看到很多与我有类似问题的帖子,但都没有直接回答/更新)

的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

1 个答案:

答案 0 :(得分:0)

它说它无法找到home.html。您在home州的网址可能不对。此网址与您的index.html文件相关,因此请仔细检查。