① 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優化了檢查變數的演算法，它只會在某些特殊的事件觸發時，才會去檢查數據的更新，而不是簡單地在後台不停地輪詢。