SPA的三种路由框架Angular路由,backbone,director

前端之家收集整理的这篇文章主要介绍了SPA的三种路由框架Angular路由,backbone,director前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1,Angular路由

使用angular的路由功能需要安装routing模块...(引入angular-route.js就可以了)

定义路由非常容易,在我们的应用mian模块里面注入ngRoute依赖就可以了
angular.module('myApp',['ngRoute'])
.config(function($routeProvider) {});

现在,我们就可以给应用定义路由了。在路由模块里面的.config()方法里面注入了$routeProvider,上面的代码给我们演示了两个用于定义路由的方法

when()

when()方法有两个参数,我们希望匹配的浏览器url和路由操作对象。一般main route经常使用“/”来表示,也可以定义URL参数,在controller里面就使用$routeParams获取url参数。

templateUrl: 表示路由跳转的view模板

controller: 控制器

angular.module('myApp',['ngRoute'])

.config(function($routeProvider) {
  $routeProvider
    .when('/',{
      templateUrl: 'views/main.html',controller: 'MainCtrl'
    })
    .when('/day/:id',{
      templateUrl: 'views/day.html',controller: 'DayCtrl'
    })

定义好了路由需要怎么使用呢?我们要告诉angular页面的哪一个部分是我们希望转换的,这需要使用到ng-view指令



这样就只有

会被更新, header/footer都始终保持不变

2,backbone.js

Backbone.Router.extend(properties,[classProperties])
开始创建一个自定义的路由类。当匹配了 URL 片段便执行定义的动作,并可以通过 routes 定义路由动作键值对。 请注意,你要避免在路由定义时使用前导斜杠:

var Workspace = Backbone.Router.extend({

routes: {

"help":                 "help",// #help
"search/:query":        "search",// #search/kiwis
"search/:query/p:page": "search"   // #search/kiwis/p7

},
help: function() { ...
},

search: function(query,page) { ...
}
});
outes 将带参数的 URLs 映射到路由实例的方法上(或只是直接的函数定义,如果你喜欢),这与 View(视图) 的 events hash(事件键值对) 非常类似。 路由可以包含参数, :param,它在斜线之间匹配 URL 组件。 路由也支持通配符, *splat,可以匹配多个 URL 组件。 路由的可选部分放在括号中(/:optional)。

举个例子,路由 "search/:query/p:page" 能匹配#search/obama/p2,这里传入了 "obama" 和 "2" 到路由对应的动作中去了。

路由 "file/*path"可以匹配 #file/nested/folder/file.txt,这时传入动作的参数为 "nested/folder/file.txt"。

路由 "docs/:section(/:subsection)"可以匹配#docs/faq 和 #docs/faq/installing,第一种情况,传入 "faq" 到路由对应的动作中去, 第二种情况,传入"faq" 和 "installing" 到路由对应的动作中去。

结尾的斜杠会被当作URL的一部分, 访问时会被(正确地)当作一个独立的路由。 docs 和 docs/将触发不同的回调。 如果你不能避免产生这两种类型的URLs时, 你可以定义一个"docs(/)"来匹配捕捉这两种情况。

3,director.js

director.js 的主要对象是Router对象,构造方法如下:

var router = new Router(routes);
  构造方法中传入的routes参数是一个路由表对象,它是一个具有键值对结构的对象,路由允许多层的嵌套定义。

  键值对的键对应URL中传入的路径,一般一个键对应按分隔符切割后的某一部分;而键值对的值则对应该路径需要触发的回调函数名,可以传入一个或多个函数名,传入多个函数名时请使用数组对象。一般来说,回调函数要在路由表对象使用前先声明,否则js会报错。

  另外,回调函数除非特殊情况,一般不推荐使用匿名函数,请尽量先声明后使用。

var routes = {

'/dog': bark,'/cat': [meow,scratch]

};
  上面例子中,对应的URL分别为:#/dog 和 #/cat 

  声明Router对象后,需要调用init()方法进行初始化,如下:

复制代码
var routes = {

'/dog': bark,scratch]

};
var router = Router(routes);
router.init();

猜你在找的程序笔记相关文章