ngRoute 路由

小鱼儿 2021-12-22 04:23 145阅读 0赞

做单页面应用多是通过不同的url来识别出不同的页面展现的。

angularjs 为我们提供一个封装好的ngRoute工具

简单介绍用法 :

界面上放入一个 ng-view指令，待会儿界面会刷新这个区域，它也支持动画，可以通过添加css在切换视图时做一些动画。

我们一段一段来看

var app = angular.module("Main", ['ngRoute']);
                    app.config(function ($locationProvider) {
                        $locationProvider.html5Mode(true); //最少要 ie10 才可以使用 html5mode 哦
                        //$locationProvider.html5Mode(false).hashPrefix("!");                
                    });

记得要依赖 ngRoute 模块

我们通过 config 来设置 $location to html5Mode , default 是 hashbang

app.config(function ($routeProvider) { 
                        $routeProvider.
                             when("/", {
                                 template: '<div>product</div>',
                                 controller: function () {
                                     console.log("in product");
                                 }
                             }).
                             when("/:category", {
                                 templateUrl: function(routeParams){ //这里不是依赖注入哦
     　　　　　　　　　　　　　　　　　　　return '/' +

routeParams

},
                                 controller: function ($routeParams) {
                                     console.log("here");
                                     console.log($routeParams);
                                 }
                             }).
                             when("/:category/:code", {
                                 template: '<div>category and code</div>',
                                 controller: function ($routeParams) {
                                     console.log($routeParams);
                                     console.log("in product code size");
                                 }
                             }).
                             otherwise({
                                 redirectTo: '/'
                             });
                    });

通过 $routeProvider.when 和 otherwise 我们就可以设置我们的视图 template , controller 对应到哪个URL了

每当URL装换的时候，angular会帮我们匹配 (基本原理就是用了html history api)

这里URl的格式是正对文件folder路径的 ":" 符合代表它是个参数，我们只好通过 $routeParams可以一块捕获

我举个例子 :

我们访问这里 xx.com/folder1/index.aspx (文件正正的路径)

经过 redirectTo '/' 就变成了 xx.com 也就匹配了 when('/')设置

那我们访问 xx.com/category1?key=value

会对应到 "/:category" 的设置 , 它是通过folder的数量来做配对的 (params 将会是 category='category1' key=value)

那我们在访问 xx.com/man/mk100?key=value&key2=value2

会对应到 '/:category/:code'的设置 (params 是 category='man' code='mk100' key=value key2=value2)

angularjs 会依据模板和controller 绘画好视图后覆盖到ng-view中.

对应不支持htmlMode的朋友，可以使用hashbang mode , 其实差不了多少，只是难看一些罢了，还有后台比较难对 \#! 做处理