AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

第一次接触angularjs大概是半年前开发一个微信公众号，就深深的被他的给种特性吸引，下面将介绍使用require+angularjs搭建一个大型单页面应用。

下面是项目结构：

下面看看index.html的结构：

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>app后台管理</title>

<link href="./js/lib/bootstrap.min.css" rel="stylesheet">

<link href="./js/lib/ueditor/themes/default/css/ueditor.min.css">

</head>

<body>

	<!-- 路由界面 -->

	<div class="container" ui-view></div>

	<!-- 使用require加载js -->

	<script data-main="js/main.js" src="js/lib/requirejs/require.js"></script>

	<!-- 	<script type="text/javascript" src="./lib/jquery.min.js"></script> -->

	<!-- 	<script type="text/javascript" src="./lib/bootstrap.min.js"></script> -->

</body>

</html>

<div class="container" ui-view></div>这里我们使用了ui-view而没有使用ng-view，目的是为了解决路由嵌套问题,有兴趣的请自行了解。

<script data-main="js/main.js" src="js/lib/requirejs/require.js"></script> main.js就是我们的入口文件了，看看他的结构怎样。
require.config({

	//配置总路径

	baseUrl : "js/scripts",

	paths : {

		// 其他模块会依赖他

		'ui.route':'../lib/angular-plugins/angular-ui-router/angular-ui-router.min',

		'angular' : '../lib/angular/angular',

		'angular-route' : '../lib/angular-route/angular-route',

		'angularAMD' : '../lib/angular-plugins/angularAMD',

		'css' : '../lib/requirejs/css.min',

		'jquery' : '../lib/jquery.min',

		'ueditorConfig' : '../lib/ueditor/ueditor.config',

		'ueditorAll' : '../lib/ueditor/ueditor.all.min',

		'wdatePicker' : '../lib/My97DatePicker/WdatePicker',

		'blockUI':'../lib/angular-plugins/angular-block-ui/angular-block-ui',

		'ngload':'../lib/angular-plugins/ngload',

		'ui-bootstrap':'../lib/angular-plugins/angular-ui-bootstrap/ui-bootstrap-tpls-0.12.1.min',

		'angular-sanitize':'../lib/angular-plugins/angular-sanitize.min'

	},

	shim : {

		// 表明该模块依赖angular

		'angularAMD' : [ 'angular'],

		'angular-route' : [ 'angular'],

		'ui.route':['angular'],

		'ueditorConfig' : ['jquery'],

		'ueditorAll' : ['jquery'],

		'wdatePicker' : ['jquery'],

		'ui-bootstrap' : [ 'angular'],

		'blockUI' : [ 'angular'],

        'angular-sanitize' : [ 'angular' ]

	},

	urlArgs : "v=" + new Date().getTime(),

	// 启动程序 js/scripts/app.js

	deps : [ 'app' ]

});

接下来看看app.js

define([ 'routes', 'loader', 'angularAMD', 'ui-bootstrap',

		'angular-sanitize', 'blockUI', 'ui.route' ], function(config, loader,

		angularAMD) {

	var app = angular.module("webapp", [  'ngSanitize',

			'ui.bootstrap', 'ui.router' ]);

	app.config(function($stateProvider, $urlRouterProvider) {

		// 配置路由

		if (config.routes != undefined) {

			angular.forEach(config.routes, function(route, path) {

				$stateProvider.state(path, {

					templateUrl : route.templateUrl,

					url : route.url,

					resolve : loader(route.dependencies),

				// allowAnonymous: route.allowAnonymous

				});

			});

		}

		// 默认路由

		if (config.defaultRoute != undefined) {

			$urlRouterProvider.when("", config.defaultRoute);

		}

	})

	return angularAMD.bootstrap(app);

});

看看我们的路由文件routes.js

    return {

        defaultRoute: '/form',

        routes: {

            'form': {

                templateUrl: 'views/form.html',

                url: '/form',

                dependencies: ['controller/formController'],

                allowAnonymous: true

            },

            'form.required': {

                templateUrl: 'views/form-required.html',

                url: '/required',

                dependencies: [],

                allowAnonymous: true

            },

            'form.optional': {

                templateUrl: 'views/form-optional.html',

                url: '/optional',

                dependencies: [],

                allowAnonymous: true

            },

            'form.confirm': {

                templateUrl: 'views/form-confirm.html',

                url: '/confirm',

                dependencies: [],

                allowAnonymous: true

            },

            'login':{

            	 templateUrl: 'views/login.html',

                 url: '/login',

                 dependencies: [controller/formController],

                 allowAnonymous: true

            }

        }

    };

});

使用到了一个loader.js

define([], function() {

    return function(dependencies) {

        var definition = {

            resolver: ['$q', '$rootScope', function($q, $rootScope) {

                var defered = $q.defer();

                require(dependencies, function() {

                    $rootScope.$apply(function() {

                        defered.resolve();

                    });

                });

                return defered.promise;

            }]

        };

        return definition;

    }

});

到现在为止基本搭建完毕，我们看看controller的结构。

define([ 'app', "service/LoginService" ], function(app) {

	app.controller('LoginController',

			function($scope, $location, loginService) {

				$scope.login = function() {

					// 获取用户名

					var name = $scope.admin.name;

					var password = $scope.admin.password;

					var data = {

						"name" : name,

						"password" : password

					}

					loginService.login("/web/admin/login", data,

							function(data) {

								console.log(data);

							});

				}

			});

});

如果需要使用service就像Java导包差不多，然后就能使用服务了，指令和过滤器也一样。。

看看login.html页面

<div class="container" ng-controller="loginController">

    <div class="col-md-6 col-md-offset-2">

        <div class="panel panel-default">

            <div class="panel-heading">

                <h3 class="panel-title">登录</h3>

            </div>

            <div class="panel-body">

                <form class="form-horizontal">

                    <div class="form-group">

                        <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>

                        <div class="col-sm-10">

                            <input type="email" class="form-control" id="inputEmail3" placeholder="username">

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="inputPassword3" class="col-sm-2 control-label">密码</label>

                        <div class="col-sm-10">

                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">

                        </div>

                    </div>

                    <div class="form-group">

                        <div class="col-sm-offset-2 col-sm-10">

                            <div class="checkbox">

                                <label>

                                    <input type="checkbox"> 记住我

                                </label>

                            </div>

                        </div>

                    </div>

                    <div class="form-group">

                        <div class="col-sm-offset-2 col-sm-10">

                            <button type="submit" class="btn btn-default">登录</button>

                            <a class="btn btn-link" href="#/register">注册</a>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>

注意加上ng-controller指令

好的我们访问一下页面。

好了到现在基本完成。

本人菜鸟一枚，有问题欢迎指出，本人qq：821196632 ，欢迎一起探讨技术。

demo下载地址：http://download.csdn.net/detail/qq_27195003/9229013

requirejs+angularjs搭建SPA页面应用的更多相关文章

  1. 基于angularJS搭建的管理系统

    前言 angularJS搭建的系统,是一年前用的技术栈,有些地方比较过时,这里只是介绍实现思路 前端架构 工程目录 项目浅析 项目依赖包配置package.json { "name" ...

  2. 基于AngularJs的单页面程序

    基于AngularJs的单页面程序 在Abpzero的后台管理系统是一个AngularJs的单页面程序.当你登陆后,系统会跳转到"ApplicationController",然后 ...

  3. 用RequireJS优化Wijmo Web页面

    用RequireJS优化Wijmo Web页面 上周Wijmo 2014 V2版本刚刚发布(下载地址),  有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wi ...

  4. Vue - 使用命令行搭建单页面应用

    使用命令行搭建单页面应用 我们来看一下最后完成的效果: 大纲 1. 下载 node, git, npm 2. 使用命令行安装一个项目 一. 下载工具 node , git  的下载大家可以去官网自行下 ...

  5. [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架

    MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...

  6. AngularJS移动端页面input无法输入

    用angularJS写手机页面,有时候会发现input输入框点击了却不能输入,或者长按才能输入,可能是因为input绑定了ng-click导致,可去掉ng-click,将ng-click绑定的方法改用 ...

  7. 使用Vue搭建多页面应用

    使用Vue-cli搭建多页面应用时对项目结构和配置的调整   前提:在这里使用的是webpack模板进行搭建 第一步.安装Vue-cli并且进行初始化 首先打开git,在里面使用npm全局安装Vue- ...

  8. 【SSH网上商城项目实战03】使用EasyUI搭建后台页面框架

    转自:https://blog.csdn.net/eson_15/article/details/51312490 前面两节,我们整合了SSH并且抽取了service和action部分的接口,可以说基 ...

  9. React 环境搭建及页面调试方法

    React 环境搭建及页面调试方法 |作者:RexFang |出处:http://www.cnblogs.com/rexfang/ |关于作者:Java 程序员一枚 |版权:本文版权归作者和博客园共有 ...

随机推荐

  1. 利用qmake生成Makefile文件

    在linux下写程序,免不了要写Makefile文件,用automake,总感觉比较麻烦,linux人喜欢做麻烦的事,以显得风格迥异. 其实用qmake生成Makefile文件相当简单. 1 装好qm ...

  2. uitableview性能优化（转）

    这个感觉写的很好 收藏一下 以备后用 转自 http://www.cnblogs.com/pengyingh/articles/2354714.html 在iOS应用中,UITableView应该是使 ...

  3. 顶点着色器详解 (Vertex Shaders)

    学习了顶点处理,你就知道固定功能流水线怎么将顶点从模型空间坐标系统转化到屏幕空间坐标系统.虽然固定功能流水线也可以通过设置渲染状态和参数来改变最终输出的结果,但是它的整体功能还是受限.当我们想实现一个 ...

  4. 关于$.fn.*的使用

    这个案例是我封装了一个树形插件,也是别人写好的,但是对于我来说调用起来不是很方便,就对他的初始化方法又进行了一次封装,总的来说显得比较麻烦,不过我是新手嘛 DEMO 封装一个jcTree的方法$.fn ...

  5. VMware中linux硬盘空间不足的解决方法

    相信很多人都和我一样是利用虚拟机安装linux的,在玩转linux的时候,可能就会遇到系统提示磁盘空间不足的情况.由于VMware中当初装系统时的设置的最大磁盘容量是不可以动态修改的,所以为我们使用带 ...

  6. POJ 1015 Jury Compromise 2个月后重做，其实这是背包题目

    http://poj.org/problem?id=1015 题目大意:在遥远的国家佛罗布尼亚,嫌犯是否有罪,须由陪审团决定.陪审团是由法官从公众中挑选的.先随机挑选n个人作为陪审团的候选人,然后再从 ...

  7. python——请求服务器（http请求和https请求）

    一.http请求 1.http请求方式:get和post get一般用于获取/查询资源信息,在浏览器中直接输入url+请求参数点击enter之后连接成功服务器就能获取到的内容,post请求一般用于更新 ...

  8. ffmpeg 音频转换: use ffmpeg convert the audio from stereo to mono without changing the video part

    To convert the audio from stereo to mono without changing the video part, you can use FFmpeg: ffmpeg ...

  9. Ubuntu 安装 mysql 并修改数据库目录

    . . . . . 今天折腾了一下午的时间,恢复了无数次虚拟机快照,终于在 Ubuntu 上把 mysql 安装好了. mysql 是从官网下载的:mysql-server_5.7.16-1ubunt ...

  10. hdu 1299 Diophantus of Alexandria (数论)

    Diophantus of Alexandria Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java ...