需要的檔案分別如下
index.html
css/app.css
js/app.js
js/controllers.js
partials/partial1.html
partials/partial2.html
接著我們一個一個來看
index.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
第 11~12 行的連結位址是 #/view1，特別注意開頭是使用 # 宣告路徑，這會讓 AngularJS 的 Rount 去解析該路徑 view1 應該如何對應，連結按下後會到 index.html#/view1。
第 15 行宣告 ng-view，這個 div 就是各個 view 將會顯示的區域。
19~22 行一樣是載入所需要的 js 檔，這邊有刪除幾個原本 angular-seed 的 js 連結，有需要使用其它功能的時候再加進去。
app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
第 1 行 'use strict' 請參考 [JavaScript]use strict(嚴格模式)-strict mode 介紹 這篇文章。
第 9~11 行就是 Rount 的主要用法，/view1 就是網址上 index.html#/view1 所對應到的路徑，這裡設定將會使用 partial1.html 為 template，MyCtrl1 為 controller，view2 以此類推。
第 12 行則表示，如果上述的路徑都不符合的時候，將會導向 view1 路徑。
其它的部份，像是 controllers.js 和 partial1.html, partial2.html 就不解釋了，有需要的話可以參考之前的文章：
AngularJS - 官方範例 - 01 - The Basics
AngularJS - 官方範例 - 02 - Add Some Control
所有的 Source Code 都可以從 DEMO 網頁取得：
DEMO 網頁
參考資料
angular-seed
https://github.com/angular/angular-seed
延伸閱讀
Single Page Apps with AngularJS Routing and Templating
http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating
[JavaScript]use strict(嚴格模式)-strict mode 介紹
http://www.dotblogs.com.tw/blackie1019/archive/2013/08/30/115977.aspx
沒有留言:
張貼留言