AngularJS Route
這個我覺得是Angular內很重要且很好用的功能了，可以在不換頁的狀態下，根據網站的路徑去切換不同的內容。
準備這樣的html
其中a的href裡面的網址，放的就是要變換的網址，然後要放一個ng-view的div去放不同的內容。
然後controller這樣寫
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
準備這樣的html
- <html ng-app="menu">
- <ul class="clearfix">
- <li class="this_nav"><a href="#/" >Robot</a></li>
- <li><a href="#/about" >About</a></li>
- </ul>
- <div ng-view></div>
- </html>
其中a的href裡面的網址，放的就是要變換的網址，然後要放一個ng-view的div去放不同的內容。
然後controller這樣寫
- var menu= angular.module("menu", []).config(
- function( $routeProvider ){
- $routeProvider
- .when("/",
- {templateUrl: 'list.html', controller: robotList}
- )
- .when(
- "/about",
- {templateUrl: 'about.html'}
- )
- .otherwise(
- {
- redirectTo: "/"
- }
- )
- ;
- });
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
留言