转走进AngularJs(八) ng的路由机制

走进AngularJs(八) ng的路由机制 2013-12-19 我来说两句 收藏 我要投稿 今天心情不错~，公司请了个中医来给按摩拔罐刮痧，一套下来那个爽啊~，趁着精力充沛了解了下Angular的路由机制，在此分享出来与大家共同学习。 　　在谈路由机制前有必要先提一下现在比较流行的单页面应用，就是所谓的single page APP。为了实现无刷新的视图切换，我们通常会用ajax请求从后台取数据，然后套上HTML模板渲染在页面上，然而ajax的一个致命缺点就是导致浏览器后退按钮失效，尽管我们可以在页面上放一个大大的返回按钮，让用户点击返回来导航，但总是无法避免用户习惯性的点后退。解决此问题的一个方法是使用hash，监听hashchange事件来进行视图切换，另一个方法是用HTML5的history API，通过pushState()记录操作历史，监听popstate事件来进行视图切换，也有人把这叫pjax技术。基本流程如下： 　　如此一来，便形成了通过地址栏进行导航的深度链接（deeplinking ），也就是我们所需要的路由机制。通过路由机制，一个单页应用的各个视图就可以很好的组织起来了。 ngRoute包括的内容 　　ng的路由机制是靠ngRoute提供的，通过hash和history两种方式实现了路由，可以检测浏览器是否支持history来灵活调用相应的方式。ng的路由(ngRoute)是一个单独的模块，包含以下内容： 服务$routeProvider用来定义一个路由表，即地址栏与视图模板的映射 服务$routeParams保存了地址栏中的参数，例如{id : 1, name : 'tom'} 服务$route完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的controller 指令ngView用来在主视图中指定加载子视图的区域 　　以上内容再加上$location服务，我们就可以实现一个单页面应用了。下面来看一下具体如何使用这些内容。 使用ng的路由机制 　　第一步：引入文件和依赖 　　ngRoute模块包含在一个单独的文件中，所以第一步需要在页面上引入这个文件，如下：走进AngularJs(八) ng的路由机制 2013-12-19 我来说两句 收藏 我要投稿