利用AngularJS 實現一個 Single Page App

時間 2019-11-05

標籤利用 angularjs 實現一個 single page app 欄目 AngularJS 简体版

原文原文鏈接

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

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

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

三關於移除 url 中的 # 號

1.在config 中，添加：

$locationProvider.html5Mode(true);

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