首页 > 代码库 > ngRoute 路由
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", { template: ‘<div>category</div>‘, 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="http://www.mamicode.com/#!/.." 不能覆盖URL,只能在#hash之后添加东西。
其它的和html5其实是一样的。
小总结 : html5 会覆盖原路径，hash只是添加#! , html5 访问路径就像普通URL , hash 就是普通URL 加 #!
#! 在后台会被翻译成 ?key=value 的格式，这是协议，方便SEO蜘蛛。
ngRoute 路由