Javascript AngularJS-获取；未捕获错误：[$injector:modulerr]"；简单应用程序上的消息_Javascript_Angularjs_Dependency Injection

Javascript AngularJS-获取；未捕获错误：[$injector:modulerr]"；简单应用程序上的消息

javascript angularjs dependency-injection

Javascript AngularJS-获取；未捕获错误：[$injector:modulerr]"；简单应用程序上的消息,javascript,angularjs,dependency-injection,Javascript,Angularjs,Dependency Injection,下面是Linkster的在线教程，它展示了如何使用平均堆栈制作reddit克隆。（）我已经到了一个地步，我已经尝试了一切，但似乎没有任何工作。你知道怎么了吗？感谢您的帮助/想法：） -----index.html---------------- 尝试var-app=angular.module（'flapperNews'，['ui.router']）而不是var-app=angular.module（'flapperNews'，['ui-router']）试试var-app=angular.m

下面是Linkster的在线教程，它展示了如何使用平均堆栈制作reddit克隆。（）

我已经到了一个地步，我已经尝试了一切，但似乎没有任何工作。你知道怎么了吗？感谢您的帮助/想法：）

-----index.html----------------

尝试

var-app=angular.module（'flapperNews'，['ui.router']）而不是var-app=angular.module（'flapperNews'，['ui-router']）
试试var-app=angular.module（'flapperNews'，['ui.router']）而不是var-app=angular.module（'flapperNews'，['ui-router']）非常感谢！成功了。但是我不明白-怎么了？模块名是ui路由器，但是你需要注入ui.router而不是ui路由器。谢谢！成功了。但我不明白-怎么了？模块名是ui路由器，但您需要注入ui.router，而不是ui路由器
<html>
    <head>
        <title>Welcome to FlapperNews!</title>
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.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">
            <ui-view></ui-view>
        </div>
    </div>

    <script type="text/ng-template" id="/home.html">
        <div class="page-header">
                <h1>FlapperNews</h1>
        </div>
            <div ng-repeat="post in posts | orderBy: '-upvotes'">
                <span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></span>
                 <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>
                -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>

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: [{title: 'hello post1', link: '', upvotes: 0 }]
  };
  return o;
}])

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

  $scope.posts = posts.posts;

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

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