Javascript AngularJS stateprovider不工作_Javascript_Angularjs_Mean Stack

Javascript AngularJS stateprovider不工作

javascript angularjs

Javascript AngularJS stateprovider不工作,javascript,angularjs,mean-stack,Javascript,Angularjs,Mean Stack,我开始学习AngularJS，并陷入了一些问题。我在这个网站上学习教程：。我像下面一样设置$stateProvider.state，但它没有加载home.html。我甚至单独创建home.html，但它不起作用。这个代码怎么了 app.js： 'use strict'; var app = angular.module('flapperNews', ['ui.router']); // controller app.controller('MainCtrl', ['$scope',

我开始学习AngularJS，并陷入了一些问题。我在这个网站上学习教程：。我像下面一样设置$stateProvider.state，但它没有加载home.html。我甚至单独创建home.html，但它不起作用。这个代码怎么了

app.js：

'use strict';

var app = angular.module('flapperNews', ['ui.router']);

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

  $scope.addPost = function(){
    if (!$scope.title || $scope.title === '') { return; }
    $scope.posts.push({
      title: $scope.title,
      link: $scope.link,
      upvotes: 0
    }); // ng-model을 index.html에서 이용했기 때문에 가능함
    $scope.title = '';
    $scope.link = '';
  };

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



// service
app.factory('servicePosts', [function(){
  var o = {
    myPosts: [{title:'hi', upvotes:0}]
  };
  return o;
}]);


// router
app.config(['$stateProvider', '$urlRouterProvider',
            function($stateProvider, $urlRouterProvider){
  $stateProvider.state('home', {
    url: '/home',
    templateUrl: '/home.html',
    controller: 'MainCtrl'
  });

  $urlRouterProvider.otherwise('home');
}]);

index.html：

<html>

  <head>
    <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="./scripts/app.js"></script>
    <style> .glyphicon-thumbs-up { cursor:pointer } </style>

    <script type="text/ng-template" id="/home.html">
      // <!-- Header -->
      <div class="page-header">
        <h1>Flapper News</h1>
      </div>

      // <!-- show list part -->
      <div ng-repeat="post in posts | orderBy: '-upvotes' ">
        <span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"> {{post.upvotes}} </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>
        </span>

      </div>

      // <!-- submit part -->
      <form ng-submit="addPost()" style="margin-top:30px;">
        <h3>Add a new post</h3>

        // <!--ng-model 이라는 것은 scope의 변수로 지정하겠다 라는 의미인듯 -->
        <div class="form-group">
          <input type="text" placeholder="Title" ng-model="title"></input>
        </div>
        <div class="form-group">
          <input type="text" placeholder="Link" ng-model="link"></input>
        </div>
        <button type="submit">Post</button>
      </form>
    </script>
  </head>


  <body ng-app="flapperNews">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <ui-view></ui-view>
      </div>
    </div>
  </body>

</html>

home.html在站点根目录中是否与url显示的方式相同？@charlietfl感谢您的帮助：假设这意味着需要调整路径？yeob！My home.html位于错误的位置：