AngularJs和Jquery的有什麼不同?

Jquery的主要目的是簡化Js編寫，專注於瀏覽器跨平臺，主要用來操作DOM.
AngularJs主要關注Html資料的獲取和呈現，以及應對日益複雜的Web應用需求，使得開發龐大的Web應用能夠更加容易。

AngularJs呈現頁面的原理

AnguarJs提供了一些對於Html進行加強的語義標籤(directive)，這些標籤在瀏覽器載入完頁面後被執行。舉例來說:

<tableid=”leaderBoard”><thead><tr><th>Id</th><th>Name
 
</th><th>Salary</th></tr></thead><tbody><trng-repeat="user in users"><td>{{user.Id}}</td><td>{{user.Name}}</td><td>{{user.Salary}}</td></tr></tbody></table>

上面的ng-repeat，就是一個directive, 相當於一個for迴圈。在頁面載入完成後，AngularJs會遍歷users資料物件，來呈現(render)出這個table中的內容。

如何實現在render完成之後，執行Js指令碼

當我們使用Jquery結合AngulraJs使用的時候，希望在render完table後，執行一段js指令碼，把JqTable應用到該table上。在實際開發中，會經常碰到這樣的需求，希望能夠捕獲到AngularJs渲染完成頁面的事件。
要達到這個目的，我們需要為當前的app自定義directive:

app.directive('onFinishRenderFilters',function($timeout){return{
        restrict:'A',
        link:function(scope, element
 
, attr){if(scope.$last ===true){
                $timeout(function(){
                    scope.$emit('ngRepeatFinished');});}}};});

然後，在我們需要監控的地方，加上該directive:

<trng-repeat="user in users"on-finish-render-filters><td>{{user.Id}}</td><td>{{user.Name}}</td><td>{{user.Salary}}</td></tr>

最後，補充上我們需要render完成之後的Js指令碼:

$scope.$on('ngRepeatFinished',function(ngRepeatFinishedEvent){//下面是在table render完成後執行的jsvar table = $("#leaderBoard").dataTable({
              bJQueryUI:true,"sScrollX":'100%',});});