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="#!/.." 不能覆盖URL,只能在#hash之后添加东西。

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

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

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