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