Angular js的路由配置

最新推荐文章于 2024-09-09 19:15:30 发布

最新推荐文章于 2024-09-09 19:15:30 发布 · 242 阅读

文章标签：

#javascript #ViewUI

Angular js 专栏收录该内容

2 篇文章

订阅专栏

Angular js的ng-route模板为控制器和视图提供了URL,并将它映射到预先定义的控制器.首先建立一个路由文件并定义一个APP,在这个APP中定义多个页面的控制器，并给出对应的模板。然后$routeProvider进行配置，即可将URL映射到这些控制器和视图.AngularJS支持通过在单个页面上的多个视图的单页应用。要做到这一点AngularJS提供了ng-view 和 ng-template指令，以及 $routeProvider 服务。

1. Angular$routeService在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中