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();
});