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 路由