利用AngularJS实现一个单页应用

看了下angular 的route,用它做个非常简单的单页面应用,记录一下。

      顺便说下,好处是,页面改变时不需要刷新,而每个页面都展现不同的数据。尤其在使用模板页的时候,非常方便。

快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中。
 
HTML开发Mac OS App 视频教程》
 
官方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 的 # 号去掉,即可。

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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。