Angular实现单页面程序demo
1.引入angular-route.js
<script src="angular-route.js"></script>
2.实例化模块时,注入ngRoute模块
var app = angular.module('app',['ngRoute']);
3.配置路由模块
app.config(['$routeProvider',function ($routeProvider) {
当锚点为指定值,帮你处理相应的逻辑
路由规定,在锚点之前,加上一个“/”
$routeProvider.when('/index',{
template:"<h1>首页</h1>"
})
.when('/music',{
template:"<h1>关于</h1>"
})
.when('/singer',{
template:"<h1>联系</h1>"
})
.otherwise({
redirectTo:'/index'
})
}]);
4.布局模版
<div class="nav">
<ul>
<li><a href="#/index">Ḓᶭ</a></li>
<li><a href="#/music">ᶪԔ</a></li>
<li><a href="#/singer">ྈಋ</a></li>
</ul>
</div>
<div class="content" ng-view></div>