Angular js的ng-route模板为控制器和视图提供了URL,并将它映射到预先定义的控制器.首先建立一个路由文件并定义一个APP,在这个APP中定义多个页面的控制器,并给出对应的模板。然后$routeProvider进行配置,即可将URL映射到这些控制器和视图.AngularJS支持通过在单个页面上的多个视图的单页应用。要做到这一点AngularJS提供了ng-view 和 ng-template指令,以及 $routeProvider 服务。
1. Angular$route
Service在ngRoute
模块里。需要引入ng-route模块作为依赖.在html引入自定义的路由文件前,还需要引入angular-route.js脚本文件.
var app = angular.module('myApp', ['ngRoute']); //ngRoute为添加的模板依赖 app.config(['$routeProvider',function($routeProvider){ $routeProvider .when("/",{ //定义的路径 templateUrl: "../views/homePage.html", //对应的页面模板 controller:"personCtrl" //每个页面对应的控制器 }) .when("/productListPage",{ templateUrl: "../views/productListPage.html", controller:"productListPageCtrl" }) .when("/shoppingCartPage",{ templateUrl: "../views/shoppingCartPage.html", controller:"shoppingCartPageCtrl" }) .otherwise({redirectTo:'/'}) }]);
config()为配置函数,$routeProvider是组网址的配置,将它们映射相应的HTML页面或 ng-template.
2.在controller文件中使用$location对路由进行控制,AngularJS提供了一个服务用以解析地址栏中的URL,也就是$location.通过它你可以访问应用当前路径所对应的路由,以及修改路径和处理导航。代码如下:
//controller文件中的代码: app.controller('personCtrl', function ($scope, $location) { $scope.jumpProductListPage = function(){ $location.path("/productListPage") } $scope.jumpShoppingCartPage= function(){ $location.path("/shoppingCartPage") } }); //以上代码定义了两个跳转页面的函数,使用path()方法会根据括号中的路径找到相应的模板加载到 html视图ng-view中