rapp

rapp

关注
发信
关注(28)粉丝(399)

Thinkster MEAN堆栈教程

本文介绍了Thinkster MEAN堆栈教程的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在做MEAN堆栈和挡板新闻上thinkster.io教程。 我节前刚刚停止开始节点。我的code的工作，直到本教程的前半部分的后面部分。我希望有人能帮助我确定哪些是错误的，因为我只是意味着一个初学者。

我的 index.html的 

 ＆LT; HTML和GT;
＆LT; HEAD＆GT;
    ＆LT;标题＆GT;挡板新闻＆LT; /标题＆GT;
    ＆LT;链接HREF =htt​​p://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css的rel =stylesheet属性＆GT;    ＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js＆GT;＆下; /脚本＆GT;
    ＆LT;脚本src=\"http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js\"></script>
    ＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;
    ＆LT;风格＆GT; .glyphicon-竖起大拇指{光标：指针}＆LT; /风格＆GT;
＆LT; /头＆GT;＆LT;机身NG-应用=flapperNews＆GT;
    ＆LT; D​​IV CLASS =行＆GT;
        ＆LT; D​​IV CLASS =COL-MD-6 COL-MD-偏移3＆GT;
            ＆LT; UI的视图＆gt;＆LT; / UI的视图＆gt;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT;脚本类型=文/ NG-模板ID =/ home.html做为＆GT;
    ＆LT; D​​IV CLASS =页面页眉＆GT;
        ＆LT; H1＆GT;挡板新闻＆LT; / H1＆GT;
    ＆LT; / DIV＆GT;    ＆LT; D​​IV NG重复=帖子在帖子|排序依据：' -  upvotes'＆GT;
        ＆LT;跨度类=glyphicon glyphicon-竖起大拇指
            NG-点击=给予好评（岗位）＆GT;＆LT; / SPAN＆GT;
        {{post.upvotes}}
        ＆LT;跨度风格=FONT-SIZE：20px的;保证金左：10px的;＆GT;
            ＆LT;一个NG秀=post.link的href ={{post.link}}＆GT;
                {{post.title}}
            ＆所述; / A＆GT;
            ＆LT;跨度NG隐藏=post.link＆GT;
                {{post.title}}
            ＆LT; / SPAN＆GT;
        ＆LT; / SPAN＆GT;
    ＆LT; / DIV＆GT;    ＆LT;形式NG提交=addPost（）
        风格=的margin-top：30PX;＆GT;
        ＆LT; H3＆gt;添加一个新的职位 -  LT; / H3 GT＆;        ＆LT; D​​IV CLASS =表单组＆GT;
            ＆LT;输入类型=文本
                类=表格控
                占位=标题
                NG-模式=theTitle＆GT;＆LT; /输入＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =表单组＆GT;
            ＆LT;输入类型=文本
                类=表格控
                占位=链接
                NG-模式=theLink＆GT;＆LT; /输入＆GT;
        ＆LT; / DIV＆GT;
        ＆LT;按钮式=提交级=BTN BTN-小学＆GT;邮政和LT; /按钮＆GT;
    ＆LT; /表及GT;
＆LT; / SCRIPT＆GT;＆LT;脚本类型=文/ NG-模板ID =/ posts.html＆GT;
  ＆LT; D​​IV CLASS =页面页眉＆GT;
    ＆LT; H3＆GT;
      ＆LT;一个NG秀=post.link的href ={{post.link}}＆GT;
        {{post.title}}
      ＆所述; / A＆GT;
      ＆LT;跨度NG隐藏=post.link＆GT;
        {{post.title}}
      ＆LT; / SPAN＆GT;
    ＆LT; / H3 GT＆;
  ＆LT; / DIV＆GT;  ＆LT; D​​IV NG重复=在post.comments评论|排序依据：' -  upvotes'＆GT;
    ＆LT;跨度类=glyphicon glyphicon-竖起大拇指
      NG-点击=incrementUpvotes（评论）＆GT;＆LT; / SPAN＆GT;
    {{comment.upvotes}}  - 由{{comment.author}}
    ＆LT;跨度风格=FONT-SIZE：20px的;保证金左：10px的;＆GT;
      {{comment.body}}
    ＆LT; / SPAN＆GT;
  ＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;

我的 app.js 

  VAR应用= angular.module（'flapperNews'，['ui.router']）;的app.config（[
'$ stateProvider'，
'$ urlRouterProvider'，
功能（$ stateProvider，$ urlRouterProvider）{    $ stateProvider
        .STATE（'家'，{
            网址：'/家，
            templateUrl：/home.html
            控制器：'MainCtrl
        }）;
        .STATE（'职位'，{
            网址：'/职位/ {ID}
            templateUrl：/posts.html'，
            控制器：'PostsCtrl
        }）;    $ urlRouterProvider.otherwise（'家'）;
}]）app.factory（'职位'，[功能（）{
    变种O = {
        帖：[]
    };
    返回O;
}]）;app.controller（'MainCtrl'，[
'$范围'，
帖子，
功能（$范围，职位）{
    $ scope.posts = posts.posts;
    $ scope.addPost =功能（）{
        如果（$ scope.theTitle || $ scope.theTitle ===''！）{返回; }
        $ scope.posts.push（{
            标题：$ scope.theTitle，
            链接：$ scope.theLink，
            upvotes：0
            注释： [
                {作者：'乔'，身上：爽！邮报，upvotes：0}，
                {作者：'鲍勃'，身上：好主意，但一切都错了！'，upvotes：0}
            ]
        }）;
        $ scope.theTitle ='';
        $ scope.theLink ='';
    }
    $ scope.upvote =功能（POST）{
        post.upvotes ++;
    }
}]）;app.controller（'PostsCtrl'，[
'$范围'，
'$ stateParams'，
帖子，
功能（$范围，$ stateParams，职位）{
    $ scope.post = posts.posts [$ stateParams.id];
    $ scope.addComment =功能（）{
        如果（$ scope.body ===''）{返回; }
        $ scope.post.comments.push（{
            身体：$ scope.body，
            作者：用户，
            upvotes：0
        }）;
        $ scope.body ='';
    };
}]）;

我目前通过打开 index.html的铬运行这个骨架。

谢谢！

最大


解决方案

有在将prevent从工作app.js错别字。在未来，打开浏览器的开发工具与 F12 键，然后按照错误提供看什么线改变的链接。

具体而言，有一个额外的; 和失踪， S IN一些地方

\r
\r

VAR应用= angular.module（'flapperNews'，['ui.router ]）;\r
\r
的app.config（[\r
'$ stateProvider'，\r
'$ urlRouterProvider'，\r
功能（$ stateProvider，$ urlRouterProvider）{\r
\r
    $ stateProvider\r
        .STATE（'家'，{\r
            网址：'/家，\r
            templateUrl：/home.html'，\r
            控制器：'MainCtrl\r
        }）\r
        .STATE（'职位'，{\r
            网址：'/职位/ {ID}\r
            templateUrl：/posts.html'，\r
            控制器：'PostsCtrl\r
        }）;\r
\r
    $ urlRouterProvider.otherwise（'家'）;\r
}]）\r
\r
app.factory（'职位'，[功能（）{\r
    变种O = {\r
        帖：[]\r
    };\r
    返回O;\r
}]）;\r
\r
app.controller（'MainCtrl'，[\r
'$范围'，\r
帖子，\r
功能（$范围，职位）{\r
    $ scope.posts = posts.posts;\r
    $ scope.addPost =功能（）{\r
        如果（$ scope.theTitle || $ scope.theTitle ===''！）{返回; }\r
        $ scope.posts.push（{\r
            标题：$ scope.theTitle，\r
            链接：$ scope.theLink，\r
            upvotes：0，\r
            注释： [\r
                {作者：'乔'，身上：爽！邮报，upvotes：0}，\r
                {作者：'鲍勃'，身上：好主意，但一切都错了！'，upvotes：0}\r
            ]\r
        }）;\r
        $ scope.theTitle ='';\r
        $ scope.theLink ='';\r
    }\r
    $ scope.upvote =功能（POST）{\r
        post.upvotes ++;\r
    }\r
}]）;\r
\r
app.controller（'PostsCtrl'，[\r
'$范围'，\r
'$ stateParams'，\r
帖子，\r
功能（$范围，$ stateParams，职位）{\r
    $ scope.post = posts.posts [$ stateParams.id];\r
    $ scope.addComment =功能（）{\r
        如果（$ scope.body ===''）{返回; }\r
        $ scope.post.comments.push（{\r
            身体：$ scope.body，\r
            作者：用户，\r
            upvotes：0\r
        }）;\r
        $ scope.body ='';\r
    };\r
}]）;

\r

＆LT; HTML和GT;\r
＆LT; HEAD＆GT;\r
    ＆LT;标题＆GT;挡板新闻＆LT; /标题＆GT;\r
    ＆LT;链接HREF =htt​​p://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css的rel =stylesheet属性＆GT;\r
\r
    ＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js＆GT;＆下; /脚本＆GT;\r
    ＆LT;脚本src=\"http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js\"></script>\r
    ＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;\r
    ＆LT;风格＆GT; .glyphicon-竖起大拇指{光标：指针}＆LT; /风格＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;脚本类型=文/ NG-模板ID =/ home.html做为＆GT;\r
    ＆LT; D​​IV CLASS =页面页眉＆GT;\r
        ＆LT; H1＆GT;挡板新闻＆LT; / H1＆GT;\r
    ＆LT; / DIV＆GT;\r
＆LT; / SCRIPT＆GT;\r
\r
＆LT;脚本类型=文/ NG-模板ID =/ posts.html＆GT;\r
  ＆LT; D​​IV CLASS =页面页眉＆GT;\r
    ＆LT; H3＆GT;\r
      ＆LT;一个NG秀=post.link的href ={{post.link}}＆GT;\r
        {{post.title}}\r
      ＆所述; / A＆GT;\r
      ＆LT;跨度NG隐藏=post.link＆GT;\r
        {{post.title}}\r
      ＆LT; / SPAN＆GT;\r
    ＆LT; / H3 GT＆;\r
  ＆LT; / DIV＆GT;\r
\r
  ＆LT; D​​IV NG重复=在post.comments评论|排序依据：' - upvotes'＆GT;\r
    ＆LT;跨度类=glyphicon glyphicon-竖起大拇指\r
      NG-点击=incrementUpvotes（评论）＆GT;＆LT; / SPAN＆GT;\r
    {{comment.upvotes}} - 由{{comment.author}}\r
    ＆LT;跨度风格=FONT-SIZE：20px的;保证金左：10px的;＆GT;\r
      {{comment.body}}\r
    ＆LT; / SPAN＆GT;\r
  ＆LT; / DIV＆GT;\r
\r
 ＆LT;形式NG提交=addComment（）\r
  风格=的margin-top：30PX;＆GT;\r
  ＆LT; H3＆gt;添加一个新的注释和LT; / H3 GT＆;\r
\r
  ＆LT; D​​IV CLASS =表单组＆GT;\r
    ＆LT;输入类型=文本\r
    类=表格控\r
    占位=注释\r
    NG-模式=身体与GT;＆LT; /输入＆GT;\r
  ＆LT; / DIV＆GT;\r
  ＆LT;按钮式=提交级=BTN BTN-小学＆GT;邮政和LT; /按钮＆GT;\r
 ＆LT; /表及GT;\r
\r
＆LT; / SCRIPT＆GT;\r
\r
＆LT;机身NG-应用=flapperNewsNG控制器=MainCtrl＆GT;\r
    ＆LT; D​​IV CLASS =行＆GT;\r
        ＆LT; D​​IV CLASS =COL-MD-6 COL-MD-偏移3＆GT;\r
            ＆LT; UI的视图＆gt;＆LT; / UI的视图＆gt;\r
\r
            ＆LT; D​​IV NG重复=帖子在帖子|排序依据：' - upvotes'＆GT;\r
                ＆LT;跨度类=glyphicon glyphicon-竖起大拇指\r
                    NG-点击=给予好评（岗位）＆GT;＆LT; / SPAN＆GT;\r
                {{post.upvotes}}\r
                ＆LT;跨度风格=FONT-SIZE：20px的;保证金左：10px的;＆GT;\r
                    ＆LT;一个NG秀=post.link的href ={{post.link}}＆GT;\r
                        {{post.title}}\r
                    ＆所述; / A＆GT;\r
                    ＆LT;跨度NG隐藏=post.link＆GT;\r
                        {{post.title}}\r
                    ＆LT; / SPAN＆GT;\r
                        ＆LT;跨度＆GT;\r
                            ＆LT; A HREF =＃/职位/ {{$指数}}＆GT;意见＆LT; / A＆GT;\r
                        ＆LT; / SPAN＆GT;\r
                ＆LT; / SPAN＆GT;\r
            ＆LT; / DIV＆GT;\r
\r
            ＆LT;形式NG提交=addPost（）\r
                风格=的margin-top：30PX;＆GT;\r
                ＆LT; H3＆gt;添加一个新的职位 - LT; / H3 GT＆;\r
\r
                ＆LT; D​​IV CLASS =表单组＆GT;\r
                    ＆LT;输入类型=文本\r
                        类=表格控\r
                        占位=标题\r
                        NG-模式=theTitle＆GT;＆LT; /输入＆GT;\r
                ＆LT; / DIV＆GT;\r
                ＆LT; D​​IV CLASS =表单组＆GT;\r
                    ＆LT;输入类型=文本\r
                        类=表格控\r
                        占位=链接\r
                        NG-模式=theLink＆GT;＆LT; /输入＆GT;\r
                ＆LT; / DIV＆GT;\r
                ＆LT;按钮式=提交级=BTN BTN-小学＆GT;邮政和LT; /按钮＆GT;\r
            ＆LT; /表及GT;\r
\r
        ＆LT; / DIV＆GT;\r
    ＆LT; / DIV＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT;

\r

\r
\r

I was doing the thinkster.io tutorial on the MEAN stack and Flapper News. https://thinkster.io/mean-stack-tutorial/ I stopped just before the section Beginning Node. My code was working until the later parts of the first half of the tutorial. I hope someone can help me identify what is wrong, as I am just a beginner to MEAN.

My 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>

My 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 = '';
    };
}]);

I am currently running this skeleton by opening index.html in chromium.

Thanks!

Max

解决方案

There are typos in the app.js that will prevent it from working. In the future, open your browser's developer tools with the key and follow the links the errors provide to see what lines to change.

Specifically, there was an extra ; and missing ,s in a few places.

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 = '';
    };
}]);
<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>

<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="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>

        </div>
    </div>
</body>
</html>

这篇关于Thinkster MEAN堆栈教程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-24 18:31
Powered by LMLPHP ©2024 rapp 0.037247