AngularJs学习笔记——ui路由（多层嵌套/传参）和组件化结合的开发模式

为什么要使用ui路由
1、ui路由弥补了ng路由在路由嵌套方面的不足，ng路由是有angular官方提供的，而ui路由是由第三方提供的，ui路由相对ng路由较为常用，以下是使用ui路由与组件结合的开发模式

2、下载ui路由(https://ui-router.github.io/)，引入angular-ui-router.js

ui路由的使用方法
1、新建主页面    >>>index.html/index.js

index.html>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

引入angular.js、angular-ui-router.js、index.js、main.js、logo.js




ui-view ： 路由显示的地方

index.js>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>




在module里引入模块ui.router、main、logo; (main和logo分别为1级和2级的“app”见main.js、logo.js)

$stateProvider    >>>路由服务

$urlRouterProvider   >>>设置默认路由的服务

一级路由的name为"main"  访问方式为 ui-sref="main"

二级路由的name为"main.logo" 访问方式为 ui-sref=".logo"

params:需要传递的参数

2、新建一级路由页面    >>>main.html/main.js

main.html>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>




ui-sref=".logo({name:value})"        路由之间传递参数

main.js>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>




3、新建二级路由页面    >>>logo.html/logo.js

logo.html>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>



logo.js>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>



$stateParams   获取传递过来的参数

效果>>>>>>>>>>>>