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