angularJS关于依赖和模块与amdcmd的区别，分享下结合使用示例

双向绑定，可测试性的代码结构，模型视图分离的一个前端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()

})

1. 下载ui-bootstrap.js程序http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js 目前版本是0.11.0

2. 在HTML中引入script

<script type='text/javascript' src='path/to/angular.min.js'></script>

<script src="path/to/ui-bootstrap.min.js"></script>

<script src="path/to/ui-bootstrap-tpls.min.js"></script>

3. HTML示例代码如下：

<!-- 轮播图 -->

<div>

<carousel interval="myInterval">

<slide ng-repeat="slide in slides" active="slide.active">

<img ng-src="{{slide.image}}" style="margin:auto">

<div class="carousel-caption">

<p>{{slide.text}}</p>

</div>

</slide>

</carousel>

</div>

4. PostListController.js代码如下：

ftitAppModule.controller('PostListController',

function ($scope) {

// 设置轮播图图片间隔

$scope.myInterval = 5000

// 轮播图数据初始化

var slides = $scope.slides = []

// 添加轮播图源

slides.push({ image: '/Content/images/carousel_1.png', text: '亲爱的你，情人节快乐' })

slides.push({ image: '/Content/images/carousel_1.png', text: '亲爱的你，情人节快乐' })

})

最近实在是迷上 AngularJS，自从写了第一支范例程式後，从此便爱不释手。今天下午在公司内部 LIVE DEMO 完整的开发流程与设计概念，同事们频频点头微笑，各个啧啧称奇。到了傍晚，在 GitHub 看到一个能让 Visual Studio 2012 支援AngularJS 所有内建 ng-* 属性 Intellisense 的方法，而且还支援到新版 AngularJS 1.1.4 耶，赶紧来写文章造福大家。 (^_^)

以下 6 个步骤就是手动安装 AngularJS 1.1.4 Intellisense 到 Visual Studio 2012 的方法：

1. 关闭正在执行的 Visual Studio 2012

2. 开启档案总管，并进入以下目录：

3. 删除 commonHTML5Types.bin 档案

4. 备份 commonHTML5Types.xsd 档案

注意：同目录下还有个 commonHTMLTypes.xsd 档案，不是这个档案，可别备份错了！

5. 以系统管理员身分执行 Notepad 记事本，开启 commonHTML5Types.xsd档案

6. 启动 Visual Studio 2012 後，在 HTML 页面中，即可发现 Intellisense 生效

---