利用AngularJS實現一個單頁應用

jopen 9年前發布 | 102K 次閱讀 Web框架 angularjs

看了下angular 的route，用它做個非常簡單的單頁面應用，記錄一下。

順便說下，好處是，頁面改變時不需要刷新，而每個頁面都展現不同的數據。尤其在使用模板頁的時候，非常方便。

一示例

項目結構:

index.html

script.js

------pages

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

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

---------cantact.html
</li>

項目代碼

<1>.index.html

</li> </ol>

<!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></pre> 
      <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);</pre> 
      <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 參數   
</li>
--allow-file-access-from-files
 方法二：啟動tomcat，把你的文件全扔到webapps 里，然后在瀏覽器里訪問，就可以了。 

</ol>



三 關于移除 url 中的 # 號 

1.在config 中，添加： 

 $locationProvider.html5Mode(true); 

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

  <base href="/Xxxxwebapp/">
 3.將href 的 # 號去掉，即可。 

==》目前存在問題：刷新頁面的時候，會出現錯誤。



來自：http://my.oschina.net/pingjiangyetan/blog/412289 
</div>