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. java基础快捷键（1）

    1)  输出快捷键:System.out.println():在键盘上输入  Syso  然后按  Alt + ?:就出来了:System.out.println(); 2)主方法:(main): 快 ...

  2. form表单reset表格并执行搜索

    其中reset() 不需要定义 search():是你执行的搜索的函数 <html> <head> <title>sf</title></head ...

  3. oracle 数据库的学习1

    1.oracle 数据库常用的基本类型 char(10)  -->存储固定长度的字符串 varchar2(10)-->存储可变长的字符串 Date INTEGER -->存储整数 N ...

  4. SHOPNC占用CPU过高

    今天一个SHOPNC商城突然变慢,查看服务器情况,发现MYSQL占用181%CPU,然后查看PHP慢查询,发现这样的内容 [22-Nov-2016 20:55:41] [pool www] pid 5 ...

  5. ceph与openstack对接

    对接分为三种,也就是存储为openstack提供的三类功能1.云盘,就好比我们新加的硬盘2.原本的镜像也放在ceph里,但是我没有选择这种方式,原因是因为后期有要求,但是我会把这个也写出来,大家自己对 ...

  6. Android版本4.0~7.0

    Android 4.0 Ice Cream Sandwich(冰激凌三明治):2011年10月19日发布 版本主要更新如下:全新的UI:全新的Chrome Lite浏览器:截图功能:更强大的图片编辑功 ...

  7. [题解]vijos & codevs 能量项链

    a { text-decoration: none; font-family: "comic sans ms" } .math { color: gray; font-family ...

  8. 使用spring-data-solr做solr客户端

    solr的客户端基本上只有一个,那就是solrj,spring-data-solr是在solrj的基础上做的封装,使统一成spring-data的风格 官方网站: http://projects.sp ...

  9. c# DESEncrypt 加密、解密算法

    using System; using System.Security.Cryptography; using System.Text; namespace AttendService { publi ...

  10. PHP从mysql获取数据的方法

    <?php require "database.php"; //读取数据库中的数据 $sql_1 = "SELECT * FROM test_table" ...