app.js

Question

这是我的完整代码段。如何解决错误？

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'
    });
    $urlRouterProvider.otherwise('home');
}]);

app.controller('MainCtrl', ['$scope', 'posts', function  ($scope, posts) {
    $scope.posts = posts.posts;

    $scope.addPost = function(){
      $scope.posts.push({title: $scope.title, link: $scope.link, upvotes: 0});
      $scope.title = '';
      $scope.link = '';
    };

    $scope.incrementUpvotes = function(post){
        post.upvotes += 1;
    }
}]);

app.factory('posts', [function(){
    var o = { posts: [] };
    return o;
}]);

#index.html

<html>
<head>
  <title>Flapper News</title>

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-route.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>
  <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="incrementUpvotes(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="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>

我收到一些路由错误！感谢帮助。

Answer 1

您需要将索引文件的body标记内的html内容移动到另一个名为home.html的文件中，并将其放在根目录中。

获取js错误 - 未捕获错误：[$ injector：modulerr]

app.js

1 个答案: