一個帶有許多網址的角頁面：s

我有一個簡單的Angular應用程序（用於培訓目的，因爲我是一個角度新手:)），其中包含一些包含書籍的ul列表。如果用戶點擊一本書，詳細視圖將出現在列表下方，並提供關於該書的一些詳細信息。我希望如果用戶點擊這本書，url應該改成類似/＃/ [book-id]的東西。用戶當然也應該能夠直接瀏覽到該URL，其中特定書籍的詳情視圖是可見的。我還沒有弄清楚如何用路線來做到這一點。我貼我下面的示例代碼：一個帶有許多網址的角頁面：s

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    </head> 
    <body ng-app="libraryApp"> 
     <div id="list" ng-controller="listCtrl"> 
      <ul ng-repeat="book in data.list"> 
       <li><a href="" ng-click="openDetailView(book)">{{ book.name }}</a></li> 
      </ul> 
     </div> 
     <div id="detailView" ng-controller="detailCtrl"> 
      <div ng-if="data.currentBook" style="background-color: #EEE; padding: 10px 0;"> 
       <h1>{{ data.currentBook.name }}</h1> 
       <div>Number of pages: {{ data.currentBook.pages }}</div> 
      </div> 
     </div> 
    </body> 
</html> 

<script> 
    angular.module("libraryApp", []) 

    .factory("dataFactory", function() { 
     return { 
      list: [ 
        { id: 1, name: "The Great Gatsy", pages: 423 }, 
        { id: 2, name: "1984", pages: 332 }, 
        { id: 3, name: "The Lord Of The Rings", pages: 632 } 
       ], 
      currentBook: null 
     }; 
    }) 

    .controller("listCtrl", function($scope, dataFactory) { 
     $scope.data = dataFactory; 
     $scope.openDetailView = function(book) { 
      $scope.data.currentBook = book; 
     }; 
    }) 

    .controller("detailCtrl", function($scope, dataFactory) { 
     $scope.data = dataFactory; 
    }); 
</script>

來源

2015-11-03 Delta

你必須把這個代碼在你的代碼...

angular.module（「爲LibraryApp」，[ 'ngRought']）

.config(function ($routeProvider)

{

$ routeProvider

.when("/bookname", 
{ 
     templateUrl: "path of the html file", 
     controller: "listCtrl" 
    }) 
.when("/date", 
{ 
     templateUrl: "path of the html file", 
     controller: "detailCtrl" 
    })

來源

2015-11-03 19:09:14

還挺很難回答，因爲有這麼多的方法可以做到這一點，但考慮https://github.com/angular-ui/ui-router

您將使用模塊的config塊來設定與路由$stateProvider，然後指定用戶更改應用程序狀態時要使用的控制器和模板。這意味着您可能需要將這些div用於您的不同視圖以分隔文件（或者用於獲取其內容的某種創意） - 使用jQuery獲取元素的HTML或其他內容。

我不打算到很多細節，因爲這是一件可以輕易現在你知道使用的用戶界面路由器:)

來源

2015-11-03 18:26:58 funbrigade

這就是所謂的嵌套的觀點來回答。要使用它你會更好的嘗試UI路由器：https://angular-ui.github.io/ui-router/sample/#/contacts/1/item/b

來源

2015-11-03 18:28:10 Errorpro

一個帶有許多網址的角頁面：s

回答

相關問題