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. C#,java,C++ 等变量命名规则

    命名规则: 必须以“字母” .“_”或“@”开头,不要以数字开头. 后面可以跟任意“数字”,“字母”,“下划线”. ---注意:自己起的名字尽量避免与系统中的关键字重复.不推荐重新定义相同的变量名. ...

  2. C++中类似C# region的功能

    使用#pragma region和#pragma endregion关键字,来定义可以展开和收缩的代码区域的开头和结尾, 可以把这些代码行收缩为一行,以后要查看其细节时,可以再次展开它. 例如: // ...

  3. 获取图片工具类：BitmapUtil

    package com.example.administrator.filemanager.utils;import android.content.Context;import android.gr ...

  4. scala操作符&运行

    ---恢复内容开始--- #操作符运算 数学操作符 + - * / % 比较操作符 < > >= =< 逻辑操作符 && || 对等操作符 ==   != 位操 ...

  5. 初学c# -- 学习笔记（六） winfrom组件圆角

    刚好用到这个功能,看了好些例子.我就不明白,简单的一个事,一些文章里的代码写的那个长啊,还让人看么. 精简后,就其实一点,只要有paint事件的组件,都可画圆角,没有的外面套一个panel就行了. u ...

  6. tesseract3.01的训练和使用

    相关源码.资源下载:http://code.google.com/p/tesseract-ocr/downloads/list 训练步骤: 1.  Generate Training Images:生 ...

  7. Android根据文件路径使用File类获取文件相关信息

    Android通过文件路径如何得到文件相关信息,如 文件名称,文件大小,创建时间,文件的相对路径,文件的绝对路径等: 如图: 代码: public class MainActivity extends ...

  8. mysql从零开始

    常用的数据库有哪些? oralce,sqlserver,mysql,db2 有钱就用oracle吧 oracle和mysql的区别:https://zhidao.baidu.com/question/ ...

  9. nignx软件安装与调试

    1.通过yum或下载相应软件包安装nginx所需要的辅助软件:pcre.pcre-devel.openssl.openssl-devel.make.gcc.gcc+ 2.解压已经下载好的nginx软件 ...

  10. [题解]USACO 1.3 Wormholes

    Wormholes Farmer John's hobby of conducting high-energy physics experiments on weekends has backfire ...