看了下angular 的route，用它做個非常簡單的單頁面應用，記錄一下。
順便說下，好處是，頁面改變時不需要刷新，而每個頁面都展現不同的數據。尤其在使用模板頁的時候，非常方便。
快速使用Romanysoft LAB的技術實現 HTML 開發Mac OS App，並銷售到蘋果應用商店中。《HTML開發Mac OS App 視頻教程》
- 土豆網同步更新：http://www.tudou.com/plcover/VHNh6ZopQ4E/
- 百度網盤同步：http://pan.baidu.com/s/1jG1Q58M
- 分享 [中文紀錄片]互聯網時代 http://pan.baidu.com/s/1qWkJfcS
官方QQ群：（申請加入，說是我推薦的）
- App實踐出真知 434558944
- App學習交流 452180823
一 示例
-
項目結構:
index.html
script.js
------pages
---------home.html
---------about.html
---------cantact.html
-
項目代碼
<1>.index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html ng-app="scotchApp">
<head>
<title>Angular Routing Example</title>
<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="libs/font-awesome-4.3.0/css/font-awesome.css" />
</head>
<body ng-controller="mainController">
<header>
<nav class="navbar navbar-default">
<div>
<div>
<a href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#home"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
</div>
</nav>
</header>
<div id="main">
<div ng-view></div>
</div>
<script src="libs/angular1.3.15/angular.min.js"></script>
<script src="libs/jquery2.1.3/jquery.min.js"></script>
<script src="libs/angular1.3.15/angular-route.min.js"></script>
<script src="script.js"></script>
</body>
</html>
|
<2>.script.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
var appModule = angular.module('scotchApp', ['ngRoute']);
// configure our routes
appModule.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/home', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
})
.otherwise('/home');
});
var mainCtrl = function($scope){
$scope.message = 'Everyone come and see how good I look!';
}
var aboutCtrl = function($scope){
$scope.message = 'Look! I am an about page.';
}
var contactCtrl = function($scope){
$scope.message = 'Contact us! JK. This is just a demo.';
}
appModule.controller('mainController', mainCtrl);
appModule.controller('aboutController', aboutCtrl);
appModule.controller('contactController', contactCtrl);
|
<3>.運行效果：
二 遇到的問題：
-
出現錯誤：Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
解決：因為我是以文件的形式打開的，由於chrome 的設置問題，只支持http, data, chrome, chrome-extension, https, chrome-extension-resource 這些格式，不支持file:///xxxx.html 這種格式，所以會出現這個問題。
方法一：啟動chrom 參數
-
--allow-file-access-from-files方法二：啟動tomcat，把你的文件全扔到webapps 里，然后在瀏覽器里訪問，就可以了。
三 關於移除 url 中的 # 號
1.在config 中，添加：
$locationProvider.html5Mode(true);
2.在html 中，設置base，比如：
|
1
|
<base href="/Xxxxwebapp/">
|
3.將href 的 # 號去掉，即可。
==》目前存在問題：刷新頁面的時候，會出現錯誤。