看了下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 routesappModule.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 的 # 号去掉，即可。
==》目前存在问题：刷新页面的时候，会出现错误。