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的路由配置:

对应生成的效果:


对应水果页面的效果: