AngularJS stateprovider不起作用

时间:2015-10-08 23:45:19

标签: javascript angularjs mean-stack

我开始研究AngularJS并遇到了一些问题 我按照本网站的教程进行操作:https://thinkster.io/mean-stack-tutorial 我将$ 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>

0 个答案:

没有答案