用Angular路由

Question

This is my first dive into Angular/the MEAN stack, and I am following along with this tutorial . 这是我第一次学习Angular / MEAN堆栈，并且跟随本教程学习。 Have been trying get my routing right, but for now I am faced with a blank index.html that will not route to home or display any html... 一直在尝试正确地路由，但是现在我面临着空白的index.html，它将无法路由到主页或显示任何html ...

Can anyone catch the fault with my routing/configuration? 谁能在我的路由/配置中发现问题？

Here's a fiddle with my existing HTML/JS copied and pasted. 这是我现有的HTML / JS复制和粘贴的小提琴。

http://jsfiddle.net/adkw1wzo/ http://jsfiddle.net/adkw1wzo/

The HTML: 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>

The JS: 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= '';
     }

  }]);

Answer 1

You code of config block is messing with some syntactical mistake 您的配置块代码陷入一些语法错误

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..
}]);

Also you have to select No Wrap in <head> drop-down while loading files from CDN 另外，从CDN加载文件时，还必须No Wrap in <head>下拉列表中选择“ No Wrap in <head>

Demo Fiddle 演示小提琴

Update 更新

While navigating between different states of app, you could use ui-sref directive to generate href attribute URL dynamically. 在应用程序的不同状态之间导航时，可以使用ui-sref指令动态生成href属性URL 。

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

And if want to redirect from controller then use $state.go('posts', {id: index}) 如果要从控制器重定向，请使用$state.go('posts', {id: index})

用Angular路由

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-08-31 18:19:06

用Angular路由

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-08-31 18:19:06

解决方案1
2 已采纳 2015-08-31 18:19:06