- 浏览: 100344 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (209)
- http://docs.jpush.io/server/java_sdk/ (1)
- SpingMVC ModelAndView (1)
- Model (1)
- Control以及参数传递 (1)
- https://www.alipay.com/ (1)
- 检查指定的字符串列表是否不为空。 (1)
- 转自http://my.oschina.net/rpgmakervx/blog/505434 (1)
- 压缩js (1)
- 含包含 字母数字校验 (1)
- 判断浏览器是ie (1)
- fixbox (0)
- 转自http://www.cnblogs.com/lanzi/archive/2010/10/26/1861338.html (1)
- http://dl2.iteye.com/upload/attachment/0113/2406/afbd8d53-dcad-3afc-8d78-41c1591 (0)
- IDEA (0)
- maven搭建 (0)
- http://www.jeasyuicn.com/api/docTtml/index.htm (1)
- 给tomcat添加运行内存: (1)
- JPUSH推送 (1)
- requestScope (0)
- oracle中plsql安装client10连接数据库 (1)
- 不需要安装oracle11g (1)
- tuikuan (1)
- http://www.hjxmall.com/index.php (1)
- java (1)
- 参考 (1)
- xml签名验签模拟程序 (1)
- 技术网站收集分享 (1)
- Java NIO提供了与标准IO不同的IO工作方式 ------来源于 http://www.iteye.com/magazines/132-Java-NIO (1)
- oracle表查询语句优化 (0)
- oracle (5)
- a (1)
- TenpayHttpClient (2)
- mongodb (1)
- http://www.qcloud.com/product/cmongo.html?utm_source=pcsem1&utm_medium=bdgj46&utm_campaign=baidu (1)
- SpringMVC整合MongoDB开发 (0)
- SpringMVC整合MongoDB开发 https://www.mongodb.org (1)
- Java 语言中常见问题总结 (1)
- 数据库SQL优化大总结 (1)
- 拦截器与过滤器的区别 (1)
- Struts2中拦截器与过滤器的区别及执行顺序 (1)
- Spring声明式事务管理与配置 (0)
- oracle OPERTION (1)
- java 高并发多线程开发 (1)
- Collection 与 map 接口相关集合 (1)
- 多线程开发实践 (1)
- JVM调优总结 转自 http://www.importnew.com/18694.html (1)
- redis 五种数据类型的使用场景 转自于 http://blog.csdn.net/gaogaoshan/article/details/41039581 (1)
- HttpWatch http基础 来自于http://blog.csdn.net/gaogaoshan/article/details/21237555 (1)
- maven 远程仓库 http://blog.csdn.net/gaogaoshan/article/details/40266779 (1)
- 生成Webservice客户端的4中方法 http://blog.csdn.net/gaogaoshan/article/details/8980775 (1)
- http://fgh2011.iteye.com/blog/1564283 (1)
- sleep和wait有什么区别 http://xiaowei2002.iteye.com/blog/2174188 (1)
- JDK中常用包及其类 常见的几种RuntimeException (1)
- Java的运行原理 (1)
- mybatis缓存的使用及理解 http://my.oschina.net/dxqr/blog/123163 (1)
- 软件架构设计分析 (1)
- redis技术总结 (3)
- java面试总结知识点 (1)
- ZooKeeper技术 (1)
- Hadoop (1)
- sso单点登录 (1)
- SpringIOC (1)
- 书签ssssssssssssssssssssss (1)
- spring事务的隔离级别 http://www.cnblogs.com/yangy608/archive/2011/06/29/2093478.html (1)
- 秒杀系统架构分析与实战 http://www.importnew.com/18920.html (1)
- oracle 连接plsql配置 (1)
- maven工程集成springmvc http://blog.csdn.net/fox_lht/article/details/16952683 (1)
- java类序列化与反序列化版本唯一号serialVersionUID (1)
- spring注解用法总结 (1)
- eclipse导入maven项目找不到资源文件方法 (1)
- dubbo (0)
- socket 网络编程 服务器与客户端 编程 (1)
- Thread与Runnable实现线程利用线程插队实现求和操作 (1)
- 生产者与消费者模式 (1)
- JAXB注解 java 关于xml的注解,自动生成xml文件 - @XML*** (1)
- xml 与JAVAbean转换 (1)
- MAP (2)
- decimalToString (1)
- 反编译插件 (0)
- 反编译插件 https://sourceforge.net/projects/jadclipse/?source=typ_redirect (1)
- AWX (1)
- 官网地址Dinp (1)
- public interface ExecutorService extends Executor (1)
- MAIN (1)
- 转自于 http://blog.csdn.net/lufeng20/article/details/24314381 (1)
- JaxbUtil (1)
- HttpXmlClient (0)
- Http post 请求 (1)
- URLDecoder (1)
- spdb (0)
- 订单号生成规则 (1)
- 距离0点毫秒数 (1)
- MyBatis存储过程调用java (1)
- Banks (1)
- 学习网址 (1)
- hots配置oracle数据库配置修改 (1)
- 支付宝文档 (1)
- Jadclipse (1)
- filter (0)
- Filter过滤器 (1)
- 工具类 fixbox (1)
- java quartz (0)
- java quartz 实现定时任务,每个礼拜一到礼拜五定时执行 (1)
- Thread (4)
- getResourceAsStream (1)
- BigData (1)
- 开源架构 (17)
- 架构 (0)
- 文件操作 (2)
- tools (20)
- 测试工具 (1)
- vm (1)
- mq (1)
- blog (1)
- 开源架构搭建技术 (6)
- JAVA细节技术点总结 (1)
- 优化技术 (1)
- LINUX命令使用 (1)
- spring (2)
- 大数据 (1)
- struts2 (1)
- python (1)
- pay (1)
- linux (1)
- 压力测试 (1)
- 代码检查插件 (1)
- 游戏端开发 (1)
- 微信开发相关 (1)
- 搜索引擎 (1)
- 网络技术 (1)
- 分布式部署 (1)
- 堆栈信息 (1)
最新评论
摘要
angularjs与requirejs整合,AMD/CMD
目录
[TOC]
1. 概述
1.1 为何整合?
由于angularjs的各种依赖必须按照js的脚本按照循序进行加载,这令开发者非常头疼
脚本多次导入多次执行的冲突,以及性能效率的影响
1.2 脚本加载框架(AMD/CMD)
requirejs 支持AMD和CMD
seajs 支持AMD,京东目前使用 笔者了解不甚浅,笔者采用requirejs进行测试
1.3 angularjs新特性
angularjs-1.5加入了许多新特性,我最感兴趣的是以下两个:
组件Components 官方表明在angular1中使用组件很容易的切换到angular2,但目前我收到消息,angular出了一个编译器说,angular1可以直接编译到angular2
组件路由component-router
1.4 angularjs plugins
顺便介绍一些angular常用的一些插件
ngFileupload基于angular的文件上传 demo 例子
ui-router 路由
angular ui 其他ui插件可以使用这些
angular material 响应式框架
其他扩展modules包括导出csv,拖拉,滚动条
整合代码
目录路径
-lib/jquery/jquery-1.8.0.min.js
-lib/angular/angular.min.js
-lib/angular/angular-route.min.js
-lib/requireJS/require.js
-scripts/inject.js
-scripts/test.js
-scripts/app.js
-main.js
-index.html
-pages/app.html
-pages/home.html
-pages/index.html
(requirejs入口)main.js
/**
* require 主入口,相关配置依赖从这里配置
*/
require.config({
baseUrl: "/",
//每次新加载js,为了避免缓存
urlArgs: "bust=" + (new Date()).getTime(),
paths: {
'jquery': 'lib/jquery/jquery-1.8.0.min',
'angular': 'lib/angular/angular.min',
'angular-route': 'lib/angular/angular-route.min',
'app': 'scripts/app',
//入口注入脚本
'inject' : 'scripts/inject'
},
shim: {
'angular': ['jquery'],
'angular-route': ['angular']
}
});
require(["inject"], function() {});
页面(index.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script data-main="main" src="lib/requireJS/require.js"></script>
<title>angularJs & requireJs</title>
</head>
<body>
<!--程序入口-->
<app/>
</body>
</html>
注入脚本(inject.js)
!(function () {
'use strict';
//当然了这个scripts的数据完全可以从服务器上动态获取回来加载
var scripts = ['scripts/test'];
//依赖脚本加载
require(scripts, function () {
//渲染
angular.bootstrap(document, ['app']);
});
}());
主模块脚本(scripts/app.js)
这里是对主模块的基本定义,最后必须返回模块的对象,用于进行依赖然后进行下一步的处理
define("app",["angular",'angular-route'], function(a, r) {
var app = angular.module('app', ['ngRoute'])
.controller("IndexCtrl",["$scope", function($scope) {
$scope.name = "王五";
}])
.component('app', {
templateUrl: "pages/app.html"
})
.config(["$routeProvider",
function($routeProvider) {
$routeProvider.
when("/home", {
templateUrl: "pages/home.html",
resolve : {
$routeChangeSuccess : function($rootScope) {
$rootScope.appName = '这里是appName';
}
}
}).
when("/index", {
templateUrl: "pages/index.html",
controller: "IndexCtrl"
})]);
return app;
});
app组件模板(pages/app.html)
<h2>头部</h2>
内容:
<java></java>
<div ng-view></div>
<h2>底部</h2>
组件脚本(scripts/test.js)
//这里必须依赖app脚本
define(["app"], function (app) {
//定义java组件
app.component('java', {
template: "我是java程序员",
});
});
view路由home.html
这里是home.html
结果
访问路由
http://localhost:8080/app.html#/home
结果
html展示: html dom结果: dom
--文件上传demo
<body ng-app="fileUpload" ng-controller="MyCtrl">
<form name="myForm">
<fieldset>
<legend>Upload on form submit</legend>
Username:
<input type="text" name="userName" ng-model="username" size="31" required>
<i ng-show="myForm.userName.$error.required">*required</i>
<br>Photo:
<input type="file" ngf-select ng-model="picFile" name="file"
accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFile">
<i ng-show="myForm.file.$error.required">*required</i><br>
<i ng-show="myForm.file.$error.maxSize">File too large
{{errorFile.size / 1000000|number:1}}MB: max 2M</i>
<img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> <button ng-click="picFile = null" ng-show="picFile">Remove</button>
<br>
<button ng-disabled="!myForm.$valid"
ng-click="uploadPic(picFile)">Submit</button>
<span class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%"
ng-bind="picFile.progress + '%'"></div>
</span>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">{{errorMsg}}</span>
</fieldset>
<br>
</form>
</body>
//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
$scope.uploadPic = function(file) {
file.upload = Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {username: $scope.username, file: file},
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data;
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
}, function (evt) {
// Math.min is to fix IE which reports 200% sometimes
file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
}]);
--
angularjs与requirejs整合,AMD/CMD
目录
[TOC]
1. 概述
1.1 为何整合?
由于angularjs的各种依赖必须按照js的脚本按照循序进行加载,这令开发者非常头疼
脚本多次导入多次执行的冲突,以及性能效率的影响
1.2 脚本加载框架(AMD/CMD)
requirejs 支持AMD和CMD
seajs 支持AMD,京东目前使用 笔者了解不甚浅,笔者采用requirejs进行测试
1.3 angularjs新特性
angularjs-1.5加入了许多新特性,我最感兴趣的是以下两个:
组件Components 官方表明在angular1中使用组件很容易的切换到angular2,但目前我收到消息,angular出了一个编译器说,angular1可以直接编译到angular2
组件路由component-router
1.4 angularjs plugins
顺便介绍一些angular常用的一些插件
ngFileupload基于angular的文件上传 demo 例子
ui-router 路由
angular ui 其他ui插件可以使用这些
angular material 响应式框架
其他扩展modules包括导出csv,拖拉,滚动条
整合代码
目录路径
-lib/jquery/jquery-1.8.0.min.js
-lib/angular/angular.min.js
-lib/angular/angular-route.min.js
-lib/requireJS/require.js
-scripts/inject.js
-scripts/test.js
-scripts/app.js
-main.js
-index.html
-pages/app.html
-pages/home.html
-pages/index.html
(requirejs入口)main.js
/**
* require 主入口,相关配置依赖从这里配置
*/
require.config({
baseUrl: "/",
//每次新加载js,为了避免缓存
urlArgs: "bust=" + (new Date()).getTime(),
paths: {
'jquery': 'lib/jquery/jquery-1.8.0.min',
'angular': 'lib/angular/angular.min',
'angular-route': 'lib/angular/angular-route.min',
'app': 'scripts/app',
//入口注入脚本
'inject' : 'scripts/inject'
},
shim: {
'angular': ['jquery'],
'angular-route': ['angular']
}
});
require(["inject"], function() {});
页面(index.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script data-main="main" src="lib/requireJS/require.js"></script>
<title>angularJs & requireJs</title>
</head>
<body>
<!--程序入口-->
<app/>
</body>
</html>
注入脚本(inject.js)
!(function () {
'use strict';
//当然了这个scripts的数据完全可以从服务器上动态获取回来加载
var scripts = ['scripts/test'];
//依赖脚本加载
require(scripts, function () {
//渲染
angular.bootstrap(document, ['app']);
});
}());
主模块脚本(scripts/app.js)
这里是对主模块的基本定义,最后必须返回模块的对象,用于进行依赖然后进行下一步的处理
define("app",["angular",'angular-route'], function(a, r) {
var app = angular.module('app', ['ngRoute'])
.controller("IndexCtrl",["$scope", function($scope) {
$scope.name = "王五";
}])
.component('app', {
templateUrl: "pages/app.html"
})
.config(["$routeProvider",
function($routeProvider) {
$routeProvider.
when("/home", {
templateUrl: "pages/home.html",
resolve : {
$routeChangeSuccess : function($rootScope) {
$rootScope.appName = '这里是appName';
}
}
}).
when("/index", {
templateUrl: "pages/index.html",
controller: "IndexCtrl"
})]);
return app;
});
app组件模板(pages/app.html)
<h2>头部</h2>
内容:
<java></java>
<div ng-view></div>
<h2>底部</h2>
组件脚本(scripts/test.js)
//这里必须依赖app脚本
define(["app"], function (app) {
//定义java组件
app.component('java', {
template: "我是java程序员",
});
});
view路由home.html
这里是home.html
结果
访问路由
http://localhost:8080/app.html#/home
结果
html展示: html dom结果: dom
--文件上传demo
<body ng-app="fileUpload" ng-controller="MyCtrl">
<form name="myForm">
<fieldset>
<legend>Upload on form submit</legend>
Username:
<input type="text" name="userName" ng-model="username" size="31" required>
<i ng-show="myForm.userName.$error.required">*required</i>
<br>Photo:
<input type="file" ngf-select ng-model="picFile" name="file"
accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFile">
<i ng-show="myForm.file.$error.required">*required</i><br>
<i ng-show="myForm.file.$error.maxSize">File too large
{{errorFile.size / 1000000|number:1}}MB: max 2M</i>
<img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> <button ng-click="picFile = null" ng-show="picFile">Remove</button>
<br>
<button ng-disabled="!myForm.$valid"
ng-click="uploadPic(picFile)">Submit</button>
<span class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%"
ng-bind="picFile.progress + '%'"></div>
</span>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">{{errorMsg}}</span>
</fieldset>
<br>
</form>
</body>
//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
$scope.uploadPic = function(file) {
file.upload = Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {username: $scope.username, file: file},
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data;
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
}, function (evt) {
// Math.min is to fix IE which reports 200% sometimes
file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
}]);
--
发表评论
-
ovirt rhev 虚拟机创建,迁移,存储,网络
2017-03-10 21:58 1015ovirt虚拟机存储位置迁移有两种方法: 1.通过导入导出域 ... -
https://github.com/TANGYANGBING
2017-03-04 18:42 1048https://github.com/TANGYANGBING ... -
jPowerShell 执行PowerShell脚本,环境必须为Windows系统
2017-02-19 15:10 1069https://github.com/profesorfalk ... -
Eclipse-findbugs
2017-01-17 22:18 310https://sourceforge.net/project ... -
springcloud 开源技术
2017-01-05 22:51 300http://docs.springcloud.cn/ htt ... -
大数数据技术
2016-12-11 13:38 387数字存在文件系统spark ,storm, hadoop hb ... -
mybatis 批量插入的两种方式
2016-09-10 15:54 1099一、mybiats foreach标签 fo ... -
RabbitMQ spring 使用总结
2016-09-10 15:37 994rabbitMQ相关概念不在本文介绍范围,rabbitMQ官 ... -
工具网址
2016-09-06 22:24 343http://git.oschina.net/dwzteam/ ... -
angular.js
2016-07-21 22:33 311http://docs.ngnice.com/guide A ... -
eureka---开 始就被设计成高可用与可伸缩的Service发现服务,这两个特点也是Netflix公司开发所有平台的两个特色
2016-07-18 20:42 1115(注:Eureka由两个组件组成:Eureka服务器和Eure ... -
Spring Boot
2016-07-14 21:56 417Spring Boot 项目旨在简化创建产品级的 Spring ... -
分布式发布订阅消息系统 Kafka
2016-07-14 21:06 397kafka是一种高吞吐量的分布式发布订阅消息系统,她有如下特性 ... -
OpenTSDB logo 开源监控系统 OpenTSDB
2016-07-14 20:49 407开源监控系统OpenTSDB,用hbase存储所有的时序(无须 ... -
zabbix logo 分布式系统监视 zabbix
2016-07-13 22:11 500zabbix能监视各种网络参数,保证服务器系统的安全运营;并提 ... -
dubbo
2016-05-04 08:58 307http://doc.okbase.net/congcong6 ...
相关推荐
这个"angularjs_requirejs demo"是将AngularJS与RequireJS结合使用的一个示例项目,旨在帮助开发者更好地理解和实践这两种技术的集成。 **AngularJS** 是一个强大的前端MVC(Model-View-Controller)框架,由Google...
**AngularJS与RequireJS集成** AngularJS 和 RequireJS 是两种非常重要的前端开发工具。AngularJS 是一个强大的 MVC(Model-View-Controller)框架,用于构建动态单页应用程序(SPA),而 RequireJS 是一个 ...
**AngularJS + RequireJS 整合详解** 在前端开发中,AngularJS 和 RequireJS 是两个非常重要的库。AngularJS 是一款强大的 MVVM(Model-View-ViewModel)框架,用于构建可维护、可测试的单页面应用程序。而 ...
在"Angularjs-Requirejs-Seed"项目中,这两者被整合以创建一个高效的SPA应用。项目结构可能包括以下几个部分: - **main.js**: RequireJS的入口点,配置模块路径,启动应用。 - **app.js**: AngularJS应用的核心...
在"angularjs-requirejs-seed"这个项目中,开发者创建了一个种子应用程序,用于演示如何整合AngularJS和RequireJS。通过这个项目,初学者可以了解到这两个库的结合使用方法,为自己的项目提供一个良好的起点。项目的...
结合这四个技术,我们可以创建一个高效的Java后端与AngularJS前端的Web应用。Spring提供稳定且功能丰富的服务器端服务,AngularJS处理动态的前端交互,RequireJS负责前端的模块化和异步加载,而r.js则用于构建和优化...
标题中的“Seed-AngularJS-RequireJS”指的是一个项目模板,它为开发人员提供了一个起点,用于构建使用AngularJS和RequireJS的Web应用程序。这个模板可以帮助开发者快速地搭建一个结构良好的、模块化的应用框架。 ...
通过这个种子项目,开发者可以学习到如何在实际项目中整合AngularJS、RequireJS以及路由,理解它们之间的交互,以及如何组织和管理大型前端项目的结构。这为快速开发高效、可维护的前端应用提供了良好的起点。
在这个"AngularJSWithRequireJS"示例中,开发者可能面临如何将AngularJS与RequireJS结合使用的挑战。AngularJS本身已经具有模块化的概念,但RequireJS提供了一种不同的模块化机制。将两者整合可以带来以下好处: 1....
**AngularJS 和 RequireJS 结合使用** AngularJS 是一个由 Google 开发的强大的前端 ...通过这个例子,开发者可以学习到如何在实际项目中整合 AngularJS 和 RequireJS,创建出结构清晰、性能优化的前端应用。
然而,在项目中整合AngularJS和RequireJS进行文件合并压缩时,可能会遇到一些挑战。以下将详细介绍这些挑战及其解决办法。 1. **保持paths一致性**: 在使用RequireJS时,`main.js`通常定义了模块的基本配置,包括...
在本文中,我们将深入探讨如何将RequireJS与AngularJS整合,以便在Web应用程序中实现高效、模块化的开发。RequireJS是一种流行的JavaScript模块加载器和打包工具,它使得代码组织更加有序,而AngularJS则是一个强大...
《Spring MVC 框架与 AngularJS 及 RequireJS 整合案例分析》 在现代Web开发中,Spring MVC作为Java后端的主要框架之一,AngularJS作为前端的MVC框架,RequireJS则作为模块化加载工具,三者结合能够构建出高效、可...
AngularJS本身不直接支持按需加载,但通过与RequireJS结合,可以实现模块化的异步加载。RequireJS是一个流行的AMD(Asynchronous Module Definition)加载器,它允许我们定义和异步加载JavaScript模块,从而提高页面...
- 使用第三方库:如RequireJs等,可以在浏览器端实现模块化的加载逻辑,但RequireJs与AngularJs的模块化体系不同,实现时需要特别注意两者的整合方式。 3. 文件结构和依赖配置: 一个典型的AngularJs项目文件结构...
AngularJS_PingAn-Master 是一个基于AngularJS框架构建的前端项目,其主要目的是演示如何将RequireJS模块化加载器与AngularJS进行有效集成,以实现更高效、可维护的前端代码结构。这个项目仅包含前端JavaScript代码...
整合AngularJS和RequireJS的步骤如下: 1. **目录结构**:设置合理的项目目录,例如将库文件、模块文件、控制器等分开存放,便于管理和维护。 2. **HTML入口**:在HTML文件中,只需要引入`require.js`和主配置文件...
总的来说,`angular-requirejs-express-seed` 是一个实用的开发框架,它整合了前端和后端的热门技术,为开发者提供了一套高效的开发流程,降低了项目初始化阶段的工作量,有助于快速构建高质量的Web应用。
"Chatty Play Angular" 是一个基于 Scala 的全栈 Web 应用程序模板,它整合了 Play Framework、AngularJS 和 RequireJS。这个项目旨在提供一个单页应用(SPA)的示例,利用 Play Framework 的强大功能作为后端服务器...