① angularjs和jQuery的区别是什么
这两个就没可比性。
jQuery是JS函数库，并不是什么框架
angular 是MVC的框架，是一群搞java的工程师写的js框架
② Angular框架有哪些优点和缺点
一、angularjs是一个javascript框架。通过script脚本引入，他是一个用Javascript编写的库。angularjs通过指令扩展了HTML，通过表达式绑定数据到HTML中。AngularJS主要考虑的是构建CRUD（增删改查）应用。
优点：
1. 模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令；
2. 是一个比较完善的前端MVC框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能；
3. 自定义Directive(指令)，比jQuery插件还灵活，但是需要深入了解Directive的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，可以通过阅读源代码来找到某些我们需要的东西，如：在directive使用 $parse；
4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
缺点：
1. 验证功能错误信息显示比较薄弱，需要写很多模板标签，没有jQuery Validate方便，所以可以自己封装了验证的错误信息提示；
2. ngView只能有一个，不能嵌套多个视图，虽然有angular-ui/ui-router · GitHub 解决，但是貌似ui-router 对于URL的控制不是很灵活，必须是嵌套式的；
3. 对于特别复杂的应用场景，貌似性能有点问题，特别是在Windows下使用chrome浏览器，不知道是内存泄漏了还是什么其他问题，没有找到好的解决方案，奇怪的是在IE10下反而很快；
4. 这次从1.0.X升级到1.2.X，貌似有比较大的调整，没有完美兼容低版本，升级之后可能会导致一个兼容性的BUG，具体详细信息参考官方文档AngularJS ，对应的中文版本：Angular 1.0到1.2 迁移指南
5. ng提倡在控制器里面不要有操作DOM的代码，对于一些jQuery 插件的使用，如果想不破坏代码的整洁性，需要写一些directive去封装插件，但是现在有很多插件的版本已经支持Angular了，如：jQuery
File Upload Demo
6. Angular 太笨重了，没有让用户选择一个轻量级的版本，当然1.2.X后，Angular也在做一些更改，比如把route，animate等模块独立出去，让用户自己去选择。
③ angularJS关于依赖和模块与amd/cmd的区别，分享下结合使用示例
双向绑定，可测试性的代码结构，模型视图分离的一个前端MV*框架
其中angular也提供了模型的概念和依赖管理，不过这个依赖都是要在js对象都已经定义的前提下，没有像amd/cmd提供按需加载。
我个人比较喜欢cmd(seajs)，它对顶级作用域window的使用约束较多，全局对象和方法少，缺点就是很多原生库，都需要手工wrap下。
angular定义的controller一般都是全局的，我想用seajs来管理angular的代码和依赖，下面是一起使用的示例，有类似需求的童鞋可以参考下：
//fileng_mole2.js
define(function(require){
varLog=require('log');
return{
init:function(){
Log.w('Loadangularmole:m2');
varag=window.angular;
if(!ag){
Log.w('Errorwhenloadangularmole:m2:noangular');
return;
}
varm2=ag.mole('m2',[]);
m2.filter('greet',function(){
returnfunction(name){
return'Hello,'+name+'!';
};
});
}
};
});
//fileng_mole1.js
define(function(require){
require('mole/demo/ng_mole2').init();
varLog=require('log');
return{
init:function(){
Log.w('Loadangularmole:m1');
varag=window.angular;
if(!ag){
Log.w('Errorwhenloadangularmole:m1:noangular');
return;
}
varm1=ag.mole('m1',['m2']);
m1.directive('testDateFormat',function(){
returnfunction(scope,el,attrs,ctrl){
varformat='yyyy-MM-dd';
varupdateTime=function(){
el.text(newDate().format(format));
};
//watchscope.formatinctrl
scope.$watch('format',function(value){
format=value;
updateTime();
});
updateTime();
}
});
}
};
});
//filedemo/ng1.js
//初始化页面
define(function(require){
varLog=require('log');
require('mole/demo/ng_mole1').init();
varagAdaptor=require('x/x.ex.angular');
return{
initPage:function(from,pageInfo,params){
varTestCtrl=function($scope){
$scope.format='yyyy/MM/dd';
};
window.TestCtrl=TestCtrl;
agAdaptor.init(['m1'],'TestCtrl','ngContext');
},
mp:''
};
});
//filex/x.ex.angular.js
//angularbootstrap适配——在bootstrap之前动态修改下dom
define(function(require){
var$=require('jquery');
varLog=require('log');
return{
init:function(moles,ctrlName,contextId){
if(!window.angular){
Log.w('Noangluardefined!','WARN');
return;
}
var_context=$('#'+contextId);
this.initCtrl(_context,ctrlName);
this.initModel(_context);
this.bootstrapAngular(moles);
},
//把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);
varname=_el.attr('name');
varmodelName=name.split('_').remove(0).join('.');
_el.attr('ng-model',modelName);
});
},
bootstrapAngular:function(moles){
window.angular.bootstrap(document,moles);
}
};
});
<divclass="m_10">
<h3>Angular——WorkwithSeaJS</h3>
<divid="ngContext">
Dateformat:<inputng-model="format">
<br/>
Currenttimeis:<spantest-date-format=""></span>
</div>
</div>
seajs.use('mole/demo/ng1',function(IPage){
IPage.initPage();
});
④ angularjs怎么编写一个公共的弹出层插件
下面是AngularUI上的例子，有几点需要注意的地方
不要忘了引用bootstrap.css和ui.bootstrapmole
不要忘了template
<html ng-app="ui.bootstrap.demo">
<head>
<script src="angular.js"></script>
<script src="ui-bootstrap-tpls-0.12.1.min.js"></script>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
<script>
angular.mole('ui.bootstrap.demo',['ui.bootstrap'])
.controller('ModalDemoCtrl', function($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function(size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
})
.controller('ModalInstanceCtrl', function($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function() {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
});
</script>
</html>
⑤ 用angularjs点击第一个div，第二个div的背景也变成第一个div的背景，然后第一个div还原原来的背景的样式
我实现了一个demo，剩下的事件绑定和style属性设置你自己用原生js去写吧
ps：你是做作业吗？为什么不用jQuery，不用jQuery的话，很多兼容性你都要去考虑
<!DOCTYPEhtml>
<htmlng-app="Ang">
<style>
mybutton{
display:block;
width:100px;
height:50px;
border-radius:20px;
border:1pxsolid;
}
</style>
<divclass="main">
<mybutton></mybutton>
<mybutton></mybutton>
<mybutton></mybutton>
<mybutton></mybutton>
</div>
<scriptsrc="lib/jquery.min.1.7.js"></script>
<scriptsrc="lib/angular.js"></script>
<scriptsrc="js/control.js"></script>
//control.js
ang=angular.mole("Ang",[]);
ang.directive("mybutton",function(){
varlink_func=function(scope,element,attr){
$(element).click(function(){
if(scope.ClickedButton){
$(scope.ClickedButton).css({backgroundColor:"white"});
}
scope.ClickedButton=element
$(element).css({backgroundColor:"red"});
})
}
return{
restrict:'E',
link:link_func,
}
})
⑥ angularjs 怎么监听滚动条
2. 如果你是用的jQuery2.0以上版本，还需要修改ng-infinite-scroll.js程序，将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(elem).xxx
3. 在HTML中引入script
<script type='text/javascript' src='path/to/jquery.min.js'></script>
<script type='text/javascript' src='path/to/angular.min.js'></script>
<script type='text/javascript' src='path/to/ng-infinite-scroll.min.js'></script>
4. HTML示例代码如下：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div ng-controller='PostListController'>
<div infinite-scroll='demo.nextPage()' infinite-scroll-disabled='demo.busy' infinite-scroll-distance=''>
<div ng-repeat='item in demo.items'>
<p>
<input type="hidden" value="{{item.PostId}}" />
<label>{{item.WriterName}}</label>
<label>{{item.WriterMail}}</label>
<label>{{item.WreckerName}}</label>
<label>{{item.StartDate}}</label>
<label>{{item.Location}}</label>
<label>{{item.Story}}</label>
</p>
</div>
<div ng-show='demo.busy'>Loading data...</div>
</div>
</div>
5. PostListController.js代码如下：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var ftitAppMole = angular.mole('ftitApp', ['infinite-scroll']);
ftitAppMole.controller('PostListController',
function ($scope, Demo) {
$scope.demo = new Demo();
});
// 创建后台数据交互工厂
ftitAppMole.factory('Demo', function ($http) {
var Demo = function () {
this.items = [];
this.busy = false;
this.after = '';
this.page = ;
};
Demo.prototype.nextPage = function () {
if (this.busy) return;
this.busy = true;
var url = "http://...:/api/post/nextpage?id=" + this.page + "&callback=JSON_CALLBACK";
$http.jsonp(url).success(function (data) {
var items = data;
for (var i = ; i < items.length; i++) {
this.items.push(items[i]);
}
this.after = "t_" + this.items[this.items.length - ].id;
this.busy = false;
this.page += ;
}.bind(this));
};
return Demo;
});
这样就实现了页面拖动到底后，从服务器自动加载数据的功能。
PS：AngularJS的加载执行过程
1. HTML页面的加载，这会触发加载页面包含的所有JS (包括 AngularJS)
2. AngularJS启动，搜寻所有的指令(directive)
3. 找到ng-app，搜寻其指定的模块(Mole)，并将其附加到ng-app所在的组件上。
4. AnguarJS遍历所有的子组件，查找指令和bind命令
5. 每次发现ng-controller或者ng-repeart的时候，它会创建一个作用域(scope)，这个作用域就是组件的上下文。作用域指明了每个DOM组件对函数、变量的访问权。
6. AngularJS然后会添加对变量的监听器，并监控每个变量的当前值。一旦值发生变化，AngularJS会更新其在页面上的显示。
7. AngularJS优化了检查变量的算法，它只会在某些特殊的事件触发时，才会去检查数据的更新，而不是简单地在后台不停地轮询。