文档章节

利用AngularJS 实现一个 Single Page App

平江夜弹
 平江夜弹
发布于 2015/05/08 15:13
字数 496
阅读 1131
收藏 11

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

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

一 示例

  1. 项目结构:

    index.html

    script.js

    ------pages

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

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

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

  2. 项目代码

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

二 遇到的问题:

  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,比如:

  <base href="/Xxxxwebapp/">

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

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

© 著作权归作者所有

共有 人打赏支持
平江夜弹
粉丝 27
博文 47
码字总数 17530
作品 0
南京
程序员
私信 提问
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.7K
13
AngularJS - Top 6 Concepts that Developers Loved

This article represents top 6 popular AngularJS topics that has been used most by the AngularJS developer community to date. The inference is derived based on number of tagged d......

perfectspr
2014/12/03
0
0
5ThingsToKnowBeforeYouGetStartedWithAngulerJS

AngularJS is Entirely Client-Side AngularJS is written in JavaScript, and it functions entirely on the client side. This means two things for your app. First, you can run Angula......

perfectspr
2014/12/16
0
0
AngularJS页面加载闪烁解决方案

AngularJS这个大杀器使得实现SPA(Single Page App)变得异常的简单,其双向绑定让页面内容的重新渲染无需编写大量JS代码,无需构造DOM字符串丑陋的,作为需要快速迭代,提高用户体现的下一代...

空心大白菜
2015/05/07
0
3
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26

没有更多内容

加载失败,请刷新页面

加载更多

【机器学习PAI实战】—— 玩转人工智能之商品价格预测

摘要: 我们经常思考机器学习,深度学习,以至于人工智能给我们带来什么?在数据相对充足,足够真实的情况下,好的学习模型可以发现事件本身的内在规则,内在联系。我们去除冗余的信息,可以...

zhaowei121
10分钟前
0
0
Spring拓展接口之FactoryBean,我们来看看其源码实现

是什么 FactoryBean的源码比较简单,大家可以细读下其注释,我做了简单的如下翻译 /** * 实现此接口的bean不能用作普通bean。此bean暴露的对象是通过getObject()创建的对象,而不是它自身...

java菜分享
13分钟前
1
0
Pod在多可用区worker节点上的高可用部署

一、 需求分析 当前kubernetes集群中的worker节点可以支持添加多可用区中的ECS,这种部署方式的目的是可以让一个应用的多个pod(至少两个)能够分布在不同的可用区,起码不能分布在同一个可用...

阿里云官方博客
20分钟前
0
0
深入理解 Hive 分区分桶 (Inceptor)

分区是hive存放数据的一种方式。将列值作为目录来存放数据,就是一个分区。这样查询时使用分区列进行过滤,只需根据列值直接扫描对应目录下的数据,不扫描其他不关心的分区,快速定位,提高查...

hblt-j
28分钟前
0
0
数据结构

什么是数据结构 1、数据 数据是描述客观世界的数字、字符以及一切能够输入到计算机中,并且能够被计算机程序处理的符号集合。简言之,数据就是计算机加工处理的原料,是信息的载体。 2、数据...

stars永恒
38分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部