AngularJS Route

這個我覺得是Angular內很重要且很好用的功能了,可以在不換頁的狀態下,根據網站的路徑去切換不同的內容。

準備這樣的html
  1. <html ng-app="menu">  
  2. <ul class="clearfix">  
  3.     <li class="this_nav"><a href="#/" >Robot</a></li>  
  4.     <li><a href="#/about" >About</a></li>              
  5. </ul>  
  6. <div ng-view></div>  
  7. </html>  

其中a的href裡面的網址,放的就是要變換的網址,然後要放一個ng-view的div去放不同的內容。

然後controller這樣寫
  1. var menu= angular.module("menu", []).config(   
  2.     function( $routeProvider ){   
  3.              $routeProvider   
  4.             .when("/",    
  5.                 {templateUrl: 'list.html',   controller: robotList}   
  6.             )   
  7.             .when(   
  8.             "/about",   
  9.             {templateUrl: 'about.html'}   
  10.             )   
  11.             .otherwise(   
  12.             {   
  13.             redirectTo: "/"  
  14.             }   
  15.             )   
  16.             ;          
  17. });  

when的第一個變數放的就是判斷網址,如果網址正確的話,就使用templateUrl內的網頁,後面的controller則是放控制這個view的程式。

參考
Multiple Views, Routing and Layout Template
Mapping AngularJS Routes Onto URL Parameters And Client-Side Events
http://jsfiddle.net/ItsLeeOwen/d4ruE/
AngularJS Routing

留言