`

angularJS关于依赖和模块与amd/cmd的区别,分享下结合使用示例

 
阅读更多

angular框架的介绍大家可以参考下官网和中文社区。

下面链接是简介:

http://www.angularjs.cn/docs/developer/328.html

 

简单总结下就是:

双向绑定,可测试性的代码结构,模型视图分离的一个前端MV*框架

其中angular也提供了模型的概念和依赖管理,不过这个依赖都是要在js对象都已经定义的前提下,没有像amd/cmd提供按需加载。

我个人比较喜欢cmd(seajs),它对顶级作用域window的使用约束较多,全局对象和方法少,缺点就是很多原生库,都需要手工wrap下。

angular定义的controller一般都是全局的,我想用seajs来管理angular的代码和依赖,下面是一起使用的示例,有类似需求的童鞋可以参考下

 

// file ng_module2.js
define(function(require){
	var Log = require('log');
	return {
		init: function(){
			Log.w('Load angular module : m2');

			var ag = window.angular;
			if(!ag){
				Log.w('Error when load angular module : m2 : no angular');
				return;
			}

			var m2 = ag.module('m2', []);
			m2.filter('greet', function(){
				return function(name) {
					return 'Hello, ' + name + '!';
				};
			});
		}
	};
});

 

// file ng_module1.js
define(function(require){
	require('module/demo/ng_module2').init();
	var Log = require('log');

	return {
		init: function(){
			Log.w('Load angular module : m1');

			var ag = window.angular;
			if(!ag){
				Log.w('Error when load angular module : m1 : no angular');
				return;
			}

			var m1 = ag.module('m1', ['m2']);
			m1.directive('testDateFormat', function(){
				return function(scope, el, attrs, ctrl){
					var format = 'yyyy-MM-dd';
					var updateTime = function(){
						el.text(new Date().format(format));
					};

					// watch scope.format in ctrl
					scope.$watch('format', function(value){
						format = value;
						updateTime();
					});

					updateTime();
				}
			});
		}
	};
});

 

// file demo/ng1.js
// 初始化页面 
define(function(require){
	var Log = require('log');

	require('module/demo/ng_module1').init();
	var agAdaptor = require('x/x.ex.angular');

	return {
		initPage: function(from, pageInfo, params){
			var TestCtrl = function($scope){
				$scope.format = 'yyyy/MM/dd';
			};
			window.TestCtrl = TestCtrl;

			agAdaptor.init(['m1'], 'TestCtrl', 'ngContext');
		}, 

		dump : '' 
	};
});

 

// file x/x.ex.angular.js
// angular bootstrap适配——在bootstrap之前动态修改下dom
define(function(require){
	var $ = require('jquery');
	var Log = require('log');

	return {
		init: function(modules, ctrlName, contextId){
			if(!window.angular){
				Log.w('No angluar defined!', 'WARN');
				return;
			}

			var _context = $('#' + contextId);
			this.initCtrl(_context, ctrlName);
			this.initModel(_context);
			this.bootstrapAngular(modules);
		},

		// 把ng-controller补上
		initCtrl: function(_context, ctrlName){
			if(ctrlName)
				_context.attr('ng-controller', ctrlName);
		}, 

		// 根据name把ng-model补上
		initModel: function(_context){
			_context.find('[name^=f_]').each(function(){
				var _el = $(this);
				var name = _el.attr('name');
				var modelName = name.split('_').remove(0).join('.');
				_el.attr('ng-model', modelName);
			});
		},

		bootstrapAngular: function(modules){
			window.angular.bootstrap(document, modules);
		}
	};
});

 

	<div class="m_10">
		<h3>Angular——Work with SeaJS</h3>

		<div id="ngContext">
			Date format: <input ng-model="format"> 
			<br />
			Current time is: <span test-date-format=""></span>
		</div>
	</div>

seajs.use('module/demo/ng1', function(IPage){
	IPage.initPage();
});

 

分享到:
评论

相关推荐

    JS中的模块规范(CommonJS,AMD,CMD

    // 使用依赖 dep1 和 dep2 }); ``` #### 三、CMD CMD (Common Module Definition) 规范是由国内开发者提出的另一种模块化标准,最初由Sea.js库实现。CMD 规范与AMD非常相似,但在某些方面有所不同,旨在提供更...

    JavaScript模块规范之AMD规范和CMD规范

    然而,随着ES6模块标准的普及,未来可能AMD和CMD的使用会减少。目前,前端开发中采用模块化编程是非常重要的,而SeaJS因其灵活性和适应性,仍是一种实用的选择,尽管可能需要对某些插件进行适配。 总结一下AMD和CMD...

    JS中的模块规范(CommonJS,AMD,CMD&#40;少用&#41;)

    **CMD** 规范是由国内的前端框架Sea.js提出的,其设计思路与AMD类似,但更加注重模块间的依赖顺序。在CMD中,模块可以按需加载,而且允许模块的动态加载。 CMD规范的主要特点包括: - CMD同样使用`define()`函数...

    linux 离线安装perl-IPC-Cmd

    在这个例子中,我们有一系列与Perl相关的RPM包,它们可能是`perl-IPC-Cmd`的依赖项。让我们逐一分析这些文件: 1. `perl-devel-5.16.3-299.el7_9.x86_64.rpm`: 这是Perl开发包,包含头文件和开发工具,用于编译和...

    vue文件经过编译使其满足AMDCMD的模式

    AMD主要被RequireJS所采用,适用于浏览器环境,强调异步加载模块,而CMD则是Sea.js推崇的规范,两者在加载和依赖处理上有一定区别,但基本思想相似,都是为了解决JavaScript的模块化问题。 当Vue.js项目需要与AMD或...

    AMD之require.js与CMD之sea.js

    AMD(Asynchronous Module Definition)和CMD(Common Module Definition)是两种不同的JavaScript模块化开发规范,它们主要用于解决在浏览器环境中加载和组织代码的问题。AMD由RequireJS提出并推广,CMD则是Sea.js...

    易语言CMD模块易语言CMD模块

    易语言CMD模块是专为易语言设计的一个扩展模块,它提供了与命令行接口(CMD)交互的功能,使得程序员可以通过易语言编写程序来执行系统命令、管理文件、控制进程等操作。CMD模块是易语言生态中的一个重要组成部分,...

    浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结.docx

    - **CMD**:结合了AMD的优点,同时支持更灵活的依赖管理和模块加载机制,适用于大型项目中的动态加载需求。 在实际开发中,根据项目的具体需求选择合适的模块化方案是非常重要的。此外,随着ECMAScript 6 (ES6) 的...

    将一些js库改写成符合cmd规范的模块

    在JavaScript的世界里,模块化是组织代码和管理依赖的关键手段。CMD(Common Module Definition)是一种流行于国内的模块化规范,主要由Sea.js 推动。本话题将深入探讨如何将现有的JavaScript库改写为符合CMD规范的...

    OS + windows command / cmd / dos / Cygwin / UnxUtils / miniGW / powershell

    标题中的“OS + windows command / cmd / dos / Cygwin / UnxUtils / miniGW / powershell”涉及了多个在Windows环境下进行操作系统交互和开发的相关工具和技术。让我们逐一深入探讨这些概念。 1. **Windows ...

    前端模块加载解决方案modJS.zip

    与传统的模块加载相比,modJS 会根据产品实际使用场景,自动选择一种相应的方案,使最终的实现非常轻量简洁。 使用 模块的定义 modJS是一个精简版的AMD/CMD规范,并不完全遵守AMD/CMD规范,目的在于希望给使用者...

    Python与cmd终端交互,使用argparse示例.py

    Python与cmd终端交互,使用argparse示例.py parser = argparse.ArgumentParser() parser.add_argument('-v', '--verbose', help='run with verbose', action='store_true') parser.add_argument('-d', '--debug', ...

    基于CMD规范的fangfis模块合并gulp插件

    CMD 是一种广泛应用于前端开发的模块化规范,与 AMD(Asynchronous Module Definition)相对,CMD 强调的是同步加载和依赖的就近书写,而 gulp-fangfis-combo 正是为了简化这一过程,提高开发效率而设计的。...

    产品原型_axure原型实例_实战原型_Axure RP 8 快捷键完整版

    在实际使用过程中,用户应结合实际需求和操作习惯,灵活掌握和运用这些快捷键。需要注意的是,快捷键的具体操作可能会因操作系统的不同而有所差异(例如在Windows和Mac OS X系统中)。此外,由于技术原因,一些...

    详解Linux(centos7)下安装OpenSSL安装图文方法

    OpenSSL是一个开源的ssl技术,由于我需要使用php相关功能,需要获取https的文件所以必须安装这个东西了,下面我整理了两种关于OpenSSL安装配置方法。 安装环境:  操作系统:CentOs7安静 OpenSSL Version:...

    易语言cmd.ec模块(易语言)

    6. **管道与重定向**:类似传统CMD,CMD.ec模块可以实现命令的管道连接和输出重定向,将一个命令的输出作为另一个命令的输入,或者将输出保存到文件。 在使用CMD.ec模块时,开发者需要注意以下几个要点: 1. **...

Global site tag (gtag.js) - Google Analytics