角UI路由器動態路由

Question

我使用下面庫

• @version v0.2.11
• @link http://angular-ui.github.com/

我所看到的是動態路由 爲前：對於路線localhost:8080/#/about它起作用，比方說routedFunction它定義了模板HTML <div>about me .. </div>

，如果有人去localhost:8080/#/abc; routedFunction會得到一個路由URL作爲參數ABC，它會知道顯示..可能是<div>abc xyz abc</div>

我無法找到一個解決方案。

Answer 1

您需要使用路由器。

爲$route角文檔可在@https://docs.angularjs.org/api/ngRoute/service/ $路線

請找出並看看在文檔下面的例子可以找到。這個例子展示瞭如何改變URL哈希導致$ route匹配一個路由與URL，並且ngView拉入部分。

<div ng-controller="MainController"> 
    Choose: 
    <a href="Book/Moby">Moby</a> | 
    <a href="Book/Moby/ch/1">Moby: Ch1</a> | 
    <a href="Book/Gatsby">Gatsby</a> | 
    <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> | 
    <a href="Book/Scarlet">Scarlet Letter</a><br/> 

    <div ng-view></div> 

    <hr /> 

    <pre>$location.path() = {{$location.path()}}</pre> 
    <pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre> 
    <pre>$route.current.params = {{$route.current.params}}</pre> 
    <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre> 
    <pre>$routeParams = {{$routeParams}}</pre> 
</div> 

這是定義不同路線的另一個示例。

scotchApp.config(function($routeProvider) { 
    $routeProvider 

     // route for the home page 
     .when('/', { 
      templateUrl : 'pages/home.html', 
      controller : 'mainController' 
     }) 

     // route for the about page 
     .when('/about', { 
      templateUrl : 'pages/about.html', 
      controller : 'aboutController' 
     }) 

     // route for the contact page 
     .when('/contact', { 
      templateUrl : 'pages/contact.html', 
      controller : 'contactController' 
     }); 
}); 

學習和了解路由器/路由省事@https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating