angular路由（简单）

因为最近的几个项目基本都是小后台系统，也就是目前大家说的单页面应用，应该是这样，我就是半桶子水，然后我也是参照以前同事做的后台管理系统，他就是用的angular.js的路由进行左侧点击导航，右侧显示不同的内容。

---

步骤

一：引入文件

要使用angular路由，就得引入如下两个文件:angular.js和angular-route

<script src="../js/angular.js"></script>
<script src="../js/angular-route.js"></script>

二：定义ng-app

要将左侧导航块和右侧内容块放在一个ng-app下：ng-view 就是后面路由引进来的文件显示的内容块

<div class="routeLeft">
    <ul>
        <!--#/index_one是和下面js文件中的/index_one对应的，其余的文件引入配置和第一个一样-->
        <li><a href="#/index_one">一级目录</a></li>
        <li><a href="#/index_two">二级目录</a></li>
        <li><a href="#/index_three">三级目录</a></li>
        <li><a href="#/index_four">四级目录</a></li>
        <li><a href="#/index_five">五级目录</a></li>
    </ul>
</div>
<div class="routeRight" ng-view>

</div>

三：写一个路由配置文件

var app = angular.module('route',["ng","ngRoute"]);
app.config(['$routeProvider', function($routeProvider){
    $routeProvider
    .when('/index_one',{templateUrl:'index_one.html'})  
    .when('/index_two',{templateUrl:'index_two.html'})  
    .when('/index_three',{templateUrl:'index_three.html'})  
    .when('/index_four',{templateUrl:'index_four.html'})    
    .when('/index_five',{templateUrl:'index_five.html'})    
    .otherwise({redirectTo:'index_one.html'});
}]);

css文件

*{
    margin:0;
    padding:0;
    list-style: none;
    text-decoration: none;
}
section{
    width:1000px;
    margin:0 auto;
    display:-webkit-flex;
          -webkit-flex-direction: row;
          display:flex;
          flex-direction:row;   
}
.routeLeft,.routeRight{
    border:1px solid grey;
}
.routeLeft{
    width:200px;
    border-right:none;
    text-align: center;
}
.routeRight{
    flex:1;
    text-align:center;
    line-height: 200px;
}
.routeLeft>ul>li{
    display: inline-block;
    width:100%;
    margin:10px 0;

}

附上完整Demo路径：https://github.com/jx915/Demo/tree/master/angular_route
附上学习angular路由地址：AngularJS 路由