什么是路由？
对于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框架路由的主要实现方式
实现流程：
（接着之前写的俩页面使）
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦