Thinkster.io MEAN堆棧教程

我想問一些幫助。我在做這個教程，並在Angular部分結束時我的<h1>標籤沒有出現。除了標題以外，我可以正確地工作。你能幫我弄清楚嗎？Thinkster.io MEAN堆棧教程

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>My 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="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" ng-controller="MainCtrl"> 
    <div class="row"> 
     <div class="col-md-6 col-md-offset-3"> 

     <ul-view></ul-view> 

    <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="font-size:20px; margin-left:10px;"></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"> 
     </div> 
     <button type="submit" class="btn btn-primary">Post</button> 
    </form> 
    </script> 







      <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 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">Post</button> 
    </form>   

     </div> 
    </div> 

</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(){ 
    //service body 
    var o = { 
     posts: [] 
    }; 
    return o; 
}]); 

app.controller('MainCtrl', [ 
    '$scope', 
    'posts', 
    function($scope, posts){ 
     $scope.test = 'Hello World'; 
     $scope.posts = posts.posts; 
     $scope.posts = [ 
      {title: 'post 1', upvotes: 5}, 
      {title: 'post 2', upvotes: 2}, 
      {title: 'post 3', upvotes: 15}, 
      {title: 'post 4', upvotes: 9}, 
      {title: 'post 5', upvotes: 4} 
     ]; 

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

     /* The function that increments upvotes */ 
     $scope.incrementUpvotes = function(post) { 
      post.upvotes += 1; 
     }; 

}]); 



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



]);

來源

2016-02-17 RidiculousRob

我覺得<ul-view></ul-view>是錯誤的。它應該是

<ui-view></ui-view>

來源

2016-02-17 17:30:11

非常感謝！就是這樣！ – RidiculousRob

Thinkster.io MEAN堆棧教程

回答

相關問題