在家里闲着无聊，正好在网上找到了一个关于angular的教程，学习了一下angular的ui-router和ng-grid这两个模块，顺便模仿着做了一个小小的东西。
代码已经上传到github上，地址在这里哟https://github.com/wwervin72/Angular。
有兴趣的小伙伴可以看看。那么然后这里我们就先来了解一下这两个模块的用法。
我们先来说说ui-router这个模块，这个模块主要是用来实现深层次的路由的。其实angular有个内置的指令ng-route，如果在项目中没有嵌套问题的话，那么用这个指令来实现页面之间的跳转也还是蛮方便的，但是他的短板就在于，他拿深层次的嵌套路由没有任何办法。那么首先，我们要使用这个模块我们就需要把他给下载下来。
下载地址在这里http://www.bootcdn.cn/angular-ui-router/。
下载下来之后，我们就可以把它导入进我们的项目中了，这里要注意下，因为这个模块式基于angular的，所以在这之前，我们还需要导入angular的js文件。这个可以在angular的官网去下载。
那么在上面的准备工作都做完了之后，我们就可以来动手写我们的代码了。
HTML部分
rush:js;">
var app=angular.module('app',['ui.router','loginModel','listModel']);
app.config(function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/index');
$stateProvider
.state('index',{
url: '/index',templateUrl: 'tpls/start.html'
})
.state('register',{
url: '/register',templateUrl: 'tpls/register.html'
})
.state('main',{
url: '/main{positionType:[0,9]{1,5}}',views: {
'': {
templateUrl: 'tpls/main.html'
},'typeList@main': {
templateUrl: 'tpls/typeList.html'
},'tbHero@main': {
templateUrl: 'tpls/tbHero.html'
}
}
})
.state('addHero',{
url: '/addHero',templateUrl: 'tpls/addHero.html'
})
.state('find',{
url: '/findPwd',templateUrl: 'tpls/findPwd.html'
})
.state('detail',{
url: '/detail/:id',templateUrl: 'tpls/detail.html'
})
})
