利用AngularJS實現一個單頁應用

時間 2019-11-08

原文原文鏈接

看了下angular 的route，用它作個很是簡單的單頁面應用，記錄一下。css

順便說下，好處是，頁面改變時不須要刷新，而每一個頁面都展示不一樣的數據。尤爲在使用模板頁的時候，很是方便。html

快速使用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

一示例html5

項目結構:jquery

index.htmlweb

script.jschrome

------pagesbootstrap

---------home.html瀏覽器

---------about.htmltomcat

---------cantact.htmlapp
項目代碼

<1>.index.html

 
         <!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

 
         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 裏，而後在瀏覽器裏訪問，就能夠了。