ngRoute 路由

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

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

简单介绍用法 :

<div ng-view></div>

界面上放入一个 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 , 其实差不了多少，只是难看一些罢了，还有后台比较难对 #! 做处理

这里举出这2个mode的区别

config 设置换成这样

   $locationProvider.html5Mode(false).hashPrefix('!');

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

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

(它没有像html5那样把整个路径改了，而只是添加了hash在后面)

那我们访问 xx.com/forlder1/index.aspx#!/category1?key=value 会对应到 "/:category" 的设置

通过hash 访问，href="#!/.." 不能覆盖URL,只能在#hash之后添加东西。

其它的和html5其实是一样的。

小总结 : html5 会覆盖原路径，hash只是添加#! , html5 访问路径就像普通URL , hash 就是普通URL 加 #!

#! 在后台会被翻译成 ?key=value 的格式，这是协议，方便SEO蜘蛛。

巴特西

ngRoute 路由

最新文章

热门文章