路由與角

這是我第一次潛入角/平均堆棧，而我這個tutorial一起以下。一直在試圖讓我的路由正確的，但現在我面對一個空白的index.html不會路線家裏或顯示任何HTML ...路由與角

誰能搭上故障與我的路由/配置？

這裏是我現有的HTML/JS複製和粘貼小提琴。

的HTML：

<html> 
    <head> 
    <title>Reddit Clone</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="app.js"></script> 
    <style> .glyphicon-thumbs-up { cursor:pointer } </style> 
    </head> 
    <body ng-app="redditClone"> 
     <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> Reddit Clone</h1> 
     <span> <a href="#/posts/{{$index}}">Comments</a></span> 
    </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> 
      <span> <a href="#/posts/{{$index}}">Comments</a> </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> 

    <script type="text/ng-template" id="/posts.html"> 
    <div class="page-header"> 
     <h3> 
     <a ng-show="post.link" href="{{post.link}}"> 
      {{post.title}} 
     </a> 
     <span ng-hide="post.link"> 
      {{post.title}} 
      <span> 
     </h3> 
    </div> 

    <div ng-repeat="comment in post.comments | orderBy:'-upvotes'"> 
     <span class="glyphicon glyphicon-thumbs-up" 
     ng-click="incrementUpvotes(comment)"> 
     </span> 
     {{comment.upvotes}} - by {{comment.author}} 
     <span style="font-size:20px; margin-left:10px;"> 
     {{comment.body}} 
     </span> 
    </div> 

    <form ng-submit="addComment()" 
     style="margin-top:30px;"> 
     <h3>Add a new comment</h3> 

     <div class="form-group"> 
     <input type="text" 
     class="form-control" 
     placeholder="Comment" 
     ng-model="body"></input> 
     </div> 
     <button type="submit" class="btn btn-primary">Post</button> 
    </form> 
    </script> 
</body> 
</html>

的JS：

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

// configuration 
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'); 
}]); 

// FACTORY 

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

// CONTROLLERS 

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, 
     comments: [ 
     {author: 'Joe', body: 'Cool post!', upvotes: 0}, 
     {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0} 
     ] 
    }); 
    $scope.title = ''; 
    $scope.link = ''; 
    } 
    $scope.incrementUpvotes = function(post) { 
    post.upvotes += 1; 
    } 
}]) 

app.controller('PostsCtrl', [ 
    '$scope', 
    '$stateParams', 
    'posts', 
    function($scope, $stateParams, posts){ 
    $scope.post = posts.posts[$stateParams.id]; 

    $scope.addComment = function() { 
     if($scope.body === '') {return;} 
     $scope.post.comments.push({ 
      body: $scope.body, 
      author: 'user', 
      upvotes: 0 
     }); 
     scope.body= ''; 
    } 

    }]);

來源

2015-08-31 coolalligator15

配置塊的

你的代碼是一些語法錯誤搞亂

app.config([ 
'$stateProvider', 
'$urlRouterProvider', 
function($stateProvider, $urlRouterProvider) { 

    $stateProvider 
    .state('home', { 
     url: '/home', 
     templateUrl:'/home.html', 
     controller: 'MainCtrl' 
    })//removed `;` here 

    .state('posts', { 
     url: '/posts/{id}', 
     templateUrl: '/posts.html', 
     controller: 'PostsCtrl' 
    }); 

    $urlRouterProvider.otherwise('/home'); //change here.. 
}]);

阿爾斯啊，你必須選擇No Wrap in <head>下拉，同時從CDN

Demo Fiddle

更新加載文件

雖然應用程序的不同狀態之間導航，你可以使用ui-sref指令生成href屬性URL動態。

<a ui-sref="posts({id: $index})">Post</a>

如果想從控制器重定向，然後使用$state.go('posts', {id: index})

來源

2015-08-31 18:19:06

感謝。任何想法爲什麼這個相同的代碼仍然在本地失敗了？我複製一個直接粘貼您更新到我的崇高。我清除了緩存和所有。 – coolalligator15

@你需要coolalligator15包括'angular.js'＆'角度-UI-router.js'在您的index.html –

大加讚賞。 – coolalligator15

回答

相關問題