看了下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 的 # 号去掉，即可。

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

利用AngularJS实现一个单页应用的更多相关文章

  1. vue入门(三)----使用vue-cli搭建一个单页富应用

    上面两节我们说了vue的一些概念,其实说的知识一点基础,这部分知识我觉得更希望大家到官网进行学习,因为在这里说的太多我觉得也只是对官网的照搬照抄而已.今天我们来学习一下vue-cli的一些基础知识,并 ...

  2. [Angularjs]asp.net mvc+angularjs+web api单页应用

    写在前面 最近的工作一直在弄一些h5的单页应用,然后嵌入到app的webview中.之前一直在用angularjs+html+ashx的一套东西.实在是玩腻了.然后就尝试通过asp.net mvc的方 ...

  3. [Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作

    写在前面 前篇文章整理了angularjs学习目录,有园子里的朋友问我要这方面的demo,周末也没什么事,就在之前的单页应用的demo上面添加了增删改查的操作.代码比较简单,这里只列举比较重要的代码片 ...

  4. 前端 JS 原生 javascript 和 location.hash 实现一个单页应用的路由 router

    开篇日常立个flag-- 前言 最近在做一些应用,类似于单页应用,想实现类似于 Vue 路由的效果. 但是个人 Vue 基础四舍五入约等于无,而且看着 Vue-router 吃力+用不起来(因为我的项 ...

  5. github新建一个单页

    比如可以在github上打开的网页是这种网址形式的:https://01xunsicheng.github.io/yumeihua/ 1.登录后首页找到 New repository 2.新建一个文件 ...

  6. AngularJS中的route可以控制页面元素的改变，使多页面变成一个单页面。。。

    SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用 ...

  7. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  8. nginx + 一个端口 部署多个单页应用（history模式）

    目前web开发 使用一般前后端分离技术,并且前端负责路由.为了美观,会采用前端会采用h5 history 模式的路由.但刷新页面时,前端真的会按照假路由去后端寻找文件.此时,后端必须返回index(i ...

  9. nginx 一个端口布署多个单页应用（history路由模式）。

    目前web开发 使用一般前后端分离技术,并且前端负责路由.为了美观,会采用前端会采用h5 history 模式的路由.但刷新页面时,前端真的会按照假路由去后端寻找文件.此时,后端必须返回index(i ...

随机推荐

  1. 课后作业11--使用SQL语句创建一个数据库

    use master if db_id ('test') is not null--判断test数据库是否存在 drop database [test]--如果存在 删除test go--完成查找删除 ...

  2. hadoop实现购物商城推荐系统

    1,商城:是单商家,多买家的商城系统.数据库是mysql,语言java. 2,sqoop1.9.33:在mysql和hadoop中交换数据. 3,hadoop2.2.0:这里用于练习的是伪分布模式. ...

  3. 关于 Mesos，你知道多少？13 个问题带你深入了解 Mesos

    听过不少人在讨论 Mesos,然而并不是很明白 Mesos 到底能够解决什么问题,使用场景是怎样的,周伟涛(国内较早一批接触使用 Docker,Mesos 等技术的开发者)用一句话形容它, Mesos ...

  4. 保护SSD，设置Chrome浏览器临时文件夹到ramdisk分区

    很多用低端/山寨SSD的朋友都用Ramdisk来保护硬盘,一般都把系统temp目录和IE浏览器临时文件夹目录设到Ramdisk分区了.      最近用谷歌的chrome浏览器,发现浏览网页时候硬盘灯 ...

  5. C# Color结构的各属性颜色对照表（转）

    转自:http://blog.sina.com.cn/s/blog_454dc49501016q2p.html Color.AliceBlue 240,248,255 Color.LightSalmo ...

  6. 避免单线程单元 (STA) COM 组件

    默认情况下,ASP.NET 不允许任何 STA COM 组件在页面内运行.若要运行它们,必须在 .aspx 文件内将 ASPCompat=true 属性包含在 @ Page 指令中.这样就将执行用的线 ...

  7. 如何JOPtionPane的showConfirmDialog对话框button设置监视器

    只是最近才知道javaGUI编程.我认为,独立撰写一个记事本,要在其中的对话框过程button设置监视器.但找了一下api相应的方法已被发现,只有找到: Returns: an integer ind ...

  8. intraweb 11.0.63 for delphi7 破解

    资源地址:http://download.csdn.net/detail/marszzx/9472912 本资源来自互联网,整理后上传,本资源仅供学习使用,请勿作用商业用途 delphi开发网站,似乎 ...

  9. 各种工具的使用 tricks

    1. 搜狗搜索引擎 因为搜狗与腾讯的合作关系,搜狗搜索引擎提供了"微信"的搜索选项,可直接定位到相关文章,或者公众号. weixin.sougou.com 2. PyCharm P ...

  10. OpenGl（二）点线设置、多边形镂空

    1. 改变点的大小 OpenGL中默认点的大小是1个像素,使用函数glPointSIze可以调整点的大小,入参是GLfloat,相当于是浮点数. 相关代码: void myDisplay(void) ...