AngularJS是一個javascript框架，通過AngularJS這個類庫可以實現目前比較流行的單頁面應用，AngularJS還具有雙向數據綁定的特點，更加適應頁面動態內容。
所謂單頁面應用就是在同一個頁面動態加載不同的內容，而這里的“跳轉”可以理解為是局部頁面的跳轉。
AngularJS是通過改變location地址來實現加載不同的頁面內容到指定位置，下面是一個簡單應用AngularJS路由來實現頁面“跳轉”的實例：
使用app.config來定義不同的location地址加載不同的頁面，並擁有獨立的控制器；
var app = angular.module('MyApp', ['ngRoute']); app.config(function ($routeProvider) { $routeProvider .when('/', { // '/'表示頁面初始加載內容； controller: 'homeCtrl', //控制器 templateUrl: '../view/home.html' //顯示的內容 }) .when('/reservation',{ //表示地址結尾為reservation時加載的內容； controller: 'reservationCtrl', templateUrl: '../view/reservation.html' }) });
使用ng-view來定義動態內容加載的位置；
<!DOCTYPE html> <html lang="en" ng-app="MyApp"> <head> <script src="../angular.js"></script> <script src="../angular-route.min.js"></script> <script src="../js/main.js"></script> <script src="../js/homeController.js"></script> <script src="../js/reservationController.js"></script> <meta charset="UTF-8"> <title></title> </head> <body> <div ng-view> <!-- 此處為動態加載區域 --> </div> </body> </html>
app.controller('homeCtrl',function($scope,$location){ //頁面的控制函數；
$scope.goToUrl=function(path) { //此方法可以改變location地址；
$location.path(path);
}
});
<div id="header"> <p>訂餐</p> </div> <div class="body"> <button ng-click="goToUrl('/reservation')" class="bigButton">幫訂餐</button> <button ng-click="goToUrl('/showList')" class="bigButton">看訂單</button> </div>
轉載自本人ITeye鏈接： http://xiaozhuang0706.iteye.com/blog/2263786