angular路由（自带路由篇）

一、angular路由是什么？

　　为了实现SPA多视图的切换的效果，其原理可简述为每个 URL 都有对应的视图和控制器。所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换。

二、文件总览

　　1.新建文件

　　　　一级目录新建ngRoute.html（为主页面，里面进行路由配置）

　　　　一级目录新建view文件夹，里面再新建三个子页面aboutus.html,home.html,order.html

　　　　一级目录存放angular.js和angular-route.js文件，文件存放位置依自己喜好即可

　　2.ngRoute.html代码展示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="angular.min.js"></script>
        <script src="angular-route.js"></script>
    </head>
    <body ng-app='myApp'>
        <a href="#/home">HOME</a>
        <a href="#/aboutus">AHOUTUS</a>
        <a href="#/order">ORDER</a>
        <!--ng-view相当于之前的div#container，用来展示子视图-->
        <ng-view></ng-view>
        <!--ng-view和下面的代码等价-->
        <!--<div id="container" ng-view></div>-->
    </body>
    <script>
        var app=angular.module("myApp",['ngRoute']);
        //配置路由
        app.config(function($routeProvider){
            //如果是home 让ng-view里面的视图是home.html
            $routeProvider
            .when('/home',{
                templateUrl:'view/home.html',
                controller:'homeVC'
            })
            .when('/aboutus',{
                templateUrl:'view/aboutus.html',
                controller:'aboutusVC'
            })
            .when('/order',{
                templateUrl:'view/order.html',
                controller:'orderVC'
            })
            .otherwise({
                redirectTo:'/home'  //重定向到home页面
            })
        });
        //配置Controller
        app.controller('homeVC',function($scope,$routeParams){
            console.log($routeParams);
            $scope.title='我是homeVC'
        });
        app.controller('aboutusVC',function($scope){
            $scope.title='我是aboutusVC'
        });
        app.controller('orderVC',function($scope){
            $scope.title='我是orderVC'
        });
        
    </script>
</html>

　　页面定义了三个路由，并默认重定向到了home页面，三个页面分别配置控制器controller，里面都定义了变量title的值。结构层的a标签通过#/参数的形式给url添加参数，然后根据定义的路由找到相应的参数，将相应的子页面放入ng-view容器中。

　　3.子页面代码展示

<h1>{{title}}</h1>

　　为了简化操作，三个子页面都只存放了一条相同的代码。title变量因为控制器赋值不同而展示不同的信息。

三、效果展示

　　打开页面，默认展示home子页面信息，如下：

　　点击AHOUTUS,子页面进行切换，如下：

　　点击ORDER,如下：

　　这样就实现了angular一级路由的切换效果，用来实现移动端导航还是很使用的，但若是需要二级路由，三级路由，这时我们就需要用到第三方路由，由于是采用的第三方插件，所以写法和用法有些差异，angular路由（第三方路由篇）做详细介绍。