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. HealthKit的使用

    一.项目中关联HealthKit框架 1.在Capabilities选项中打开HealthyKit选项 HealthKit关联路径 首先填写好你项目的Bundle Identifier并且选好Team ...

  2. iphone 开源汇总（转）

    原文地址 http://blog.csdn.net/devday/article/details/6105793 扫描wifi信息: http://code.google.com/p/uwecaugm ...

  3. 初学c# -- 学习笔记（七） RichTextBox支持GIF

    园子里许明吉博客写的一篇,刚好用到这个,写的非常好.转过来了 不过在应用中也有一些问题,win10下不能中文输入,凑合着进行了修改, 下面是原来的代码: private void button2_Cl ...

  4. python打印服务器所有进程

    #有时候我们需要查看服务器上所有进程,来判断哪些进程是否已经称为僵尸进程#!/usr/local/bin/python3.5 import psutil for i in psutil.pids(): ...

  5. 字节b换算kb/mb/gb/tb/pb

    public static string HumanReadableFilesize(double size) { string[] units = new string[] { "B&qu ...

  6. 使用SVN同步资源后图标样式的详细解读

    项目视图   The Package Explorer view - 已忽略版本控制的文件.可以通过Window → Preferences → Team → Ignored Resources.来忽 ...

  7. List<Map<String,Object>>使用Java代码遍历

    List<Map<String,Object>>的结果集怎么使用Java代码遍历以获取String,Object的值: package excel; import java.u ...

  8. Web服务器的工作原理

    Web服务器的工作原理 Web服务器工作原理概述 很多时候我们都想知道,web容器或web服务器(比如Tomcat或者jboss)是怎样工作的?它们是怎样处理来自全世界的http请求的?它们在幕后做了 ...

  9. js 创建 JSON对象

    //定义变量 var Type = [{}]; Type.push({ label: "labelname", value: "value" });

  10. SQL注入的原理以及危害

    SQL注入,就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令,比如先前的很多影视网站泄露VIP会员密码大多就是通过WEB表单递交查询字符 ...