什么是路由？
对于web页面来说，路由就是不同页面的不同路径，让我们通过不同的URL访问到不同的内容。通过某种方法去实现路径间的切换，将这种方法封装起来，就成了路由器。
如何实现路由？
web页面路由的核心思路就是单页面模板的动态装载和卸载
以下是简单的实现原理，实际应用中应当是给不同的导航绑定不同的路由参数，完成多个页面的路由
用ng-include实现
使用的指令：ng-include
核心原理：
点击不同内容的时候，改变了不同浏览器的hash值，根据当前不同hash值加载不同子页面，
ng-include指令根据事件完成页面的装载和卸载
实现流程：
将可切换的页面封装成template模板页
一个只包含自身元素和样式的模板页
header.html
<style>
.header { height: 40px; width: 100%; font-size: 20px; line-height: 40px;
}</style><div class="header">
This is header template.</div>title.html
<style>
.title { height: 40px; width: 100%; font-size: 20px; line-height: 40px;
}</style><p class="title">
This is title template.</p>在controller内定义指向模板路径的属性以及路由方法
app.controller('mycontroller', function($scope) {
$scope.templateUrl = './template/header';//初始化，防止页面空白
//设置路由对象
$scope.routeMap = { '/header': { templatePath: './template/header.html'
}, '/title': { templatePath: './template/title.html'
}
} //“定义路由器”
$scope.router = function( path ) {
$scope.templateUrl = $scope.routeMap[path].templatePath //触发这个事件的时候，就会将templateUrl更新（当然，是在目标页面与当前页面不同的情况下），controller就会将更新同步到view（页面）
}
});在页面中使用
ng-include指令
在index中的使用ng-include指令引入模板（当然，要在Angular应用管理边界之内）
index.html
<body ng-app="app" ng-controller="mycontroller"> <div ng-include="templateUrl"></div> <!--引入templateUrl--></body>
引入触发事件的源
index.html
<body ng-app="app"> <div ng-include="templateUrl"></div> <button ng-click="router( '/title' )">change page</button> <!--将button的点击事件关联到路由器上，点击的时候更新templateUrl，实现路由--></body>
使用Angular-router实现路由
使用的插件：Angular-router.js
插件介绍：
Angular-router是用于实现路由的第三方Angular插件，采用依赖注入的方式将路由器装入控制器，使用简单，功能强大，是目前Angular框架路由的主要实现方式
实现流程：
（接着之前写的俩页面使）
下载Angular-router.js
Angular-router.js下载地址将Angular-router.js引入到页面，并在控制器区域内添加路由区域
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./lib/angular-router.js"></script><body ng-app="app" ng-controller="mycontroller"> <ng-view></ng-view></body>
在脚本中进行注入并在路由器中进行配置
//在angular应用管理边界中写入依赖var app = angular.module('app', ['ngRoute']);//控制器config配置var ctrl = app.controller('mycontroller', function() {}).config('$routerProvider', function($routerProvider) {
$routerProvider
.when('/header', { templateUrl:'./template/header.html' })
.when('/title', { templateUrl:'./template/title.html' })//Angular-router路由器是链式调用的，提行写来提高可读性//通过when字眼我们可以猜想Angular-router是通过监听url的hash字段来实现路由的，也确实如此});$routeProvider.when('/', {})的其他参数
$routeProvider.when('/', { template: "<p>This is string template</p>",//直接用字符串拼接模板
controller: function() { console.log( '切换到'\'时以后我执行了' )
},//通常写在templateUrl或template后面，定义一个页面跳转时执行的方法（用于数据的更新和更换等）});在页面配置触发源
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./lib/angular-router.js"></script><body ng-app="app" ng-controller="mycontroller"> <ng-view></ng-view> <a href='/header'>header</a> <a href='/title'>title</a> <!--这样就能通过两个超链接来改变url的hash值，然后触发Angular-router的路由器实现路由了--></body>
进行非法请求的拦截和处理
mycontroller.config(function($routeProvider) {
$routeProvider.otherwise({ redirectTo: '/404.html'
//如果访问到的页面不存在（根据你的路由设置），则重定向到404.html页面
});
});以上就是Angular实现路由的两种基本方法了，基于它们的变体也有不少~根据个人喜好和需求来选择吧！
作者：Asambojur
链接：https://www.jianshu.com/p/1ab61d9dcb73
共同学习，写下你的评论
评论加载中...
作者其他优质文章
