Question

所以我跟随thinkster.io获取Angular指南，我被卡在路由部分，特别是模板和ui查看。继承我的代码，问题是，似乎没有任何东西出现了：/

var app = angular.module('flapperNews', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {

  $stateProvider.state('home', {
      url: '/home',
      templateUrl: '/home.html',
      controller: 'MainCtrl'
    });
  $urlRouterProvider.otherwise('home')
}]);

app.factory('posts', [function(){
  var o = {
    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}
    ]
  };
  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,
                      upvotes: 0,
                      link: $scope.link});
    $scope.title = "";
    $scope.link="";
  };
  $scope.increaseVotes = function(post) {
    post.upvotes += 1;
  };

}]);

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://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.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>
    <!--template start-->
    <script type="text/ng-template" id="/home.html">
    <div class="page-header">
      <h1>Flapper News</h1>
    </div>

    <div data-ng-repeat="post in posts | orderBy: '-upvotes'">
      <span ng-click="increaseVotes(post)"><img src="lol.jpeg"></span>
      <a ng-show="post.link" href="https://{{post.link}}">
      {{post.title}}
      </a>
      <span ng-hide="post.link">
      {{post.title}}
      </span>
      - upvotes: {{post.upvotes}}
    </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>
    </script>
  </body>
</html>

我无法完全理解它的错误，在我看来，ui-view应该渲染模板，但由于一些奇怪的原因，它不是。我试着查看其他问题，似乎也无效。

理解AngularJS中的内联模板的问题

0 个答案: