angularJs--02

快速的angular的项目。今天分享的是angular路由的二级嵌套，可以理解为深层嵌套，我用到了ui-route，顺便在这发一下cdn，方便使用。

https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js

1、设置angualr的启动config：

//注意config的注入贴一下代码

app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('list2'); //可以在路径没有匹配的路由的时候，跳转到一个默认的路径
$stateProvider
.state('list2',{
url: '/list2',
templateUrl: './htmls/list2.html',
})
.state('list3',{
url: '/list3',
templateUrl: './htmls/list3.html',
})
.state('list1',{
url: '/list1',
templateUrl: './htmls/list1.html',
controller: function($state){
          $state.go('list1.main1'); //默认显示第一个tab
       }
})
.state('list1.main1',{
url: '/main',
templateUrl: './htmls/listmain1.html',
})
.state('list1.main2',{
url: '/main',
templateUrl: './htmls/listmain2.html',
})
.state('list1.main3',{
url: '/main',
templateUrl: './htmls/listmain3.html',
})
})

//再看一下html结构
page1
page2
page3

//ui-route 中路由跳转用的是 ui-serf，视图为 ui-view。
我在这儿设置了三个分别为 list 1 2 3 的一级路由。由index。html页面的导航进行跳转。当然这个是最基本的。
我还设置了 list1 视图中三个二级路由名字分别为 listmain 1 2 3 。这时候路由跳转需要写在 list1视图的木模板中，因为二级路由是从list1的视图模板中切换的。

需要注意的是：我们浏览网页页面内容需要填充的，需要给用户展示的。如何你只设置了二级路由，那么功能可以实现，如果不点击切换，网页是空的。我们需要设置默认显示的view。在这可以用到go()的方法。

1
2
3

controller: function($state){
   $state.go('list1.main1'); //默认显示第一个视图  参数为路由名称。
}

这样点击list1的时候呈现给用户的就是 list1视图和 list1视图中liatmain子视图。这就是二级路由的嵌套。**控制器绑定最好是写在html模块中。 tanks。*