Fatal编程技术网

Angularjs 有角布线

angularjs configuration routing

Angularjs 有角布线,angularjs,configuration,routing,angular-ui-router,angularjs-routing,Angularjs,Configuration,Routing,Angular Ui Router,Angularjs Routing,这是我第一次深入到角度/平均堆栈，我将跟随这一点。我一直在努力让我的路由正确，但现在我面临着一个空白的index.html，它将不会路由到主页或显示任何html 有人能发现我的路由/配置故障吗 这里是我复制和粘贴的现有HTML/JS的一部分 HTML： <html> <head> <title>Reddit Clone</title> <link href="http://maxcdn.bootstrapcdn.com/

这是我第一次深入到角度/平均堆栈，我将跟随这一点。我一直在努力让我的路由正确，但现在我面临着一个空白的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>
您的配置块代码出现了一些语法错误

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..
}]);
从CDN加载文件时，还必须选择
No Wrap-in
下拉列表

更新

在应用程序的不同状态之间导航时，您可以使用
ui sref
指令动态生成
href
属性
URL

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

Post
如果想从控制器重定向，请使用
$state.go（'posts'，{id:index}）

谢谢。知道为什么同样的代码在本地对我仍然失败吗？我把你的更新直接复制到我的Sublime中。我清除了缓存和所有内容。@coolalligator15您需要在index.html中包含
angular.js
&
angular ui router.js
<a ui-sref="posts({id: $index})">Post</a>