利用AngularJS实现一个单页应用

看了下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          

 

一 示例

1. 项目结构:

   index.html

   script.js

   ------pages

   ---------home.html

   ---------about.html

   ---------cantact.html

2. 项目代码

   <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>.运行效果：

二 遇到的问题：

1. 出现错误：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 参数

2. --allow-file-access-from-files

   方法二：启动tomcat，把你的文件全扔到webapps 里，然后在浏览器里访问，就可以了。

三 关于移除 url 中的 # 号

1.在config 中，添加：

$locationProvider.html5Mode(true);

2.在html 中，设置base，比如：

?

1	<base href="/Xxxxwebapp/">

3.将href 的 # 号去掉，即可。

==》目前存在问题：刷新页面的时候，会出现错误。