AngularJs 实现单页面程序demo

作者 Mr.Woo 日期 2016-12-11
AngularJs 实现单页面程序demo

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>