利用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 的 # 号去掉，即可。

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

时间： 2024-10-19 11:49:13

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

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

上面两节我们说了vue的一些概念,其实说的知识一点基础,这部分知识我觉得更希望大家到官网进行学习,因为在这里说的太多我觉得也只是对官网的照搬照抄而已.今天我们来学习一下vue-cli的一些基础知识,并且用vue-cli来搭建一个单页富应用.那么我们首先介绍一下什么是vue-cli? 首先要学习vue-cli,我觉得我们需要知道什么是cli吧!首先回到"原始"前端,什么是前端?无非就是html,css,js,虽然定义有些粗略.但是随着前端的不断发展,前端的内容越来越多,也越来越丰富.前端

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

小分享:我有几张阿里云优惠券,用券购买或者升级阿里云相应产品最多可以优惠五折!领券地址:https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=ohmepe03 写在前面 最近的工作一直在弄一些h5的单页应用,然后嵌入到app的webview中.之前一直在用angularjs+html+ashx的一套东西.实在是玩腻了.然后就尝试通过asp.net mvc的方式构建单页应用.用到的技术angularjs

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

写在前面 前篇文章整理了angularjs学习目录,有园子里的朋友问我要这方面的demo,周末也没什么事,就在之前的单页应用的demo上面添加了增删改查的操作.代码比较简单,这里只列举比较重要的代码片段.完整的代码将在文章下面提供链接. demo 数据来源通过webapi的方式提供.获取对产品的查询,分页,增加商品,删除,修改等操作. webapi using Newtonsoft.Json; using System; using System.Collections.Generic; usi

为了一个单页爱上你的 App

App 单页展示 简洁,高大上 App 页面 清新,整洁 App 页面 使用全新 App 模板 当您上传新应用的时候可以在上传应用信息处选择您喜欢的 App 单页. 2. 您账户中已有 App 可以在"应用管理-编辑应用"中对已有的 App 模板进行修改. 详情: -应用管理 -编辑应用 快来使用全新的 App 模板吧~ 不忘初心,蒲公英团队一直为广大开发者提供一个完美体验的应用内测服务,此次全新 App 单页上线也为了让大家能更好地展现自己的 App 给用户.希望能够给大家带来更好的

利用AngularJS 实现一个 Single Page App

看了下angular 的route,用它做个非常简单的单页面应用,记录一下. 顺便说下,好处是,页面改变时不需要刷新,而每个页面都展现不同的数据.尤其在使用模板页的时候,非常方便. 一 示例 项目结构: index.html script.js ------pages ---------home.html ---------about.html ---------cantact.html 项目代码 <1>.index.html <!DOCTYPE html> <html ng

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

第一步:引入必要的js: 1 <script src="js/lib/angular.js"></script> 2 <script src="js/lib/angular-animate.min.js"></script> 3 <script src="js/lib/angular-route.min.js"></script><br><br><

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

转自:http://www.cnblogs.com/jesse2013/p/a-sample-of-single-page-applicaton.html 也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序一样.特别是在当今的移动时代,单页程序如果放在移动设备上去浏览就能够拥有像native app一样的体验,也许我们web开发者们应该期待这种技术

构建单页Web应用

让我们先来看几个站点: coding(https://coding.net/) teambition(https://www.teambition.com/) cloud9(https://c9.io/) ? 注意这几个站点的相同点.那就是在浏览器中,做了原先"应当"在client做的事情. 它们的界面切换非常流畅,响应非常迅速,跟传统的网页明显不一样,它们是什么呢?这就是单页Web应用. 所谓单页应用.指的是在一个页面上集成多种功能.甚至整个系统就仅仅有一个页面,全部的业务功能都是它

好程序员web前端分享如何构建单页Web应用

好程序员web前端分享如何构建单页Web应用,首先我们来看一看单页应用是什么?所谓单页应用,指的是在一个页面上集成多种功能,甚至整个系统就只有一个页面,所有的业务功能都是它的子模块,通过特定的方式挂接到主界面上.它是AJAX技术的进一步升华,把AJAX的无刷新机制发挥到极致,因此能造就与桌面程序媲美的流畅用户体验. 其实单页应用我们并不陌生,很多人写过ExtJS的项目,用它实现的系统,很天然的就已经是单页的了,也有人用jQuery或者其他框架实现过类似的东西.用各种JS框架,甚至不用框架,都是可