angular ui-router，最适合的angular1的路由开发

1、引入（cdn地址）

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.js"></script>

2、ui-view

和angular自带的路由相比，这个ui-view相当于ng-view。代表你的路由链接的那个模板。

基本使用：

<div ui-view=''></div>

3、ui-sref

和angular自带路由的链接方式：

<a href="#/">首页</a>

ui-router的方式：

<a ui-sref='home'>router</a>

4、路由使用

界面：

<div ng-app="app" ng-controller="ctrl">
    <a ui-sref="home">home</a>
    <a ui-sref="about">about</a>
    <div ui-view=""></div>

</div>

js：

var app = angular.module('app',['ui.router']);
app.controller('ctrl',function ($scope) {

});
app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home',{
            url:'/home',
            templateUrl:'html/home.html'
        })
        .state('home.list',{
            url:'/list',
            templateUrl:'html/homelist.html',
            controller: function ($scope) {
                $scope.homeArr=['mapbar_front','mapbar','front']
            }
        })
        .state('about',{
            url:'/about',
            templateUrl:'html/about.html'
        })
        .state('about.list',{
            url:'/list',
            templateUrl:'html/aboutlist.html',
            controller: function ($scope) {
                $scope.aboutArr=['小菜鸟','小小鸟','小小菜']
            }
        })
})