一、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路由（第三方路由篇）做详细介绍。