AngularJS 通过自带的 ng-router 实现原生路由

今天主要是实践学习 AngularJS 的嵌套路由，不过在学习嵌套路由之前，还是要掌握 AngularJS 原生路由的使用，毕竟这也是学习 AngularJS 的基础，AngularJS 的原生路由其本身是没有办法进行深层次的嵌套路由的缺陷，所以只适合用来做简单路由的需求，不适合于复杂需求的管理平台上使用。

原生路由是通过 ng-view 来加载不同的片段子页面，下面笔录下原生简单路由的实现

首先是在页面引入3个JS文件，两个 AngularJS 的原生，另1个是简单实现的配置

<script type="text/javascript" src="angular/1.4.8/angular/angular.min.js"></script>
<script type="text/javascript" src="angular/1.4.8/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="ng-router-app.js"></script>

接下来是一个主页面 ng-router.html 在 body 标签中写入

 <body ng-app="routerApp">

<div>
 <a href="#/page_a">Page A</a>
 <a href="#/page_b">Page B</a>
</div>
<div ng-view></div>

</body>

然后在 ng-router-app.js 配置

 var routerApp = angular.module('routerApp', [
 'ngRoute'
]);
routerApp.config(function ($routeProvider) {
 $routeProvider.when('/page_a', {
 templateUrl: 'routerViews/a.html',
 }).when('/page_b', {
 templateUrl: 'routerViews/b.html',
 }).otherwise({
 redirectTo: '/page_a'
 })
})

最后分别建立a和b两个测试用的小页面，在这里就不多写了

github url:https://github.com/366065186/angularJS-demo

转载请注明：隨習筆記 » AngularJS 通过自带的 ng-router 实现原生路由