angular.js之 ui-router

angular路由 路由(route)，几乎是所有的mvc（vm）框架所应该的特性，是前端构建单页面应用必不可少的组成部分，那么，对于 angular 而言，它自然也有 内置 的路由模块：叫做 ngRoute 。不过，大家很少用它，因为它的功能太有限，往往不能满足开发需求！！于是，一个基于 ngRoute 开发的 第三方路由模块 ，叫做 ui.router ，受到了大家的“追捧”。 ngRoute vs ui.router 无论是那种路由，作为框架的额外功能，首先，无论是使用哪种路由，作为框架额外的附加功能，它们都将以 模块依赖 的形式被引入，简而言之就是：在引入路由 源文件 之后，你的代码应该这样写(以 ui.router 为例)： angular.module(“myApp”, [“ui.router”]); // myApp为自定义模块，依赖第三方路由模块ui.router 这样做的目的是： 在程序启动(bootstrap)的时候，加载依赖模块(如：ui.router)，将所有 挂载 在该模块的 服务(PRovider) ， 指令(directive) ， 过滤器(filter) 等都进行注册 ，那么在后面的程序中便可以调用了。

关于uirouter 一：template/templateUrl 1.template:字符串方式的模版内容，或则是返回一个html函数 2.templateUrl:模版路径或则是返回模版路径的函数 3templateProvider:返回html内容的函数 二：controller 控制器， 返回对应的url模版的控制器名称，或者是对应的url模版得控制器函数，如果没有对应的模版定义，控制器对象不会被创建 三：resove:使用resove功能，我们可以准备一组用来注入到控制器的依赖对象，在resove可以在实际渲染之前解决掉promise, resove选项提供一个对象，对象得key就是准备注入到controller中的依赖名称，值则是创建这个对象的工厂。 接下来我们来创建一个案例: 首先：我们需要在案例中放入 第二步：在html中的展示: 在主页面的展示: 在水果页面的展示: 对应的js的路由配置: 对应生成的效果: 对应水果页面的效果: