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

发布时间：2020-12-15 00:42:04 所属栏目：C语言来源：网络整理

导读：1，Angular路由使用angular的路由功能需要安装routing模块...（引入angular-route.js就可以了）定义路由非常容易，在我们的应用mian模块里面注入ngRoute依赖就可以了 angular.module('myApp',['ngRoute']) .config(function($routeProvider) {}); 现在，我

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();

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!