AngularJS重型前端框架

1、AngularJs

　　AngularJs是一種前端的重型框架，而如今正在被Aue.js所取代。而Aue的和AngularJs大同小異。

　　AngularJs核心功能有MVC、模塊化、自動化雙向數據綁定、依賴注入等等。

　　我在剛接觸時，會感受到是一個另類的java代碼，它包括前端，controller層，service層，這實在是有點像java代碼。而它controller層中也相似java是調用相應的service層代碼；service層有點區別，Angular中的service層是發送請求，而這好像就是AngularJs的核心功能MVC。

　　依賴注入即前端函數中的形參，能夠直接注入到controller。

　　1.1前端頁面指令

　　　　一、ng-model:用於綁定數據，能夠將輸入到文本框中，能夠實時輸出變量。

　　　　二、ng-init:在訪問頁面的時候同時加載該函數。

　　　　三、ng-click:點擊事件。傳遞具體數據ng-click(方法名('1'))。經常使用的仍是點擊事件。

　　　　四、ng-app:指令用於告訴 AngularJS 應用當前這個元素是根元素,不太瞭解沒學前端。

　　　　五、ng-repeat="x in list"：循環指令

　　　　六、ng-if="條件":判斷指令

　　　1.2表達式

　　　　{{entity.id}}:能夠取值。

　　　2.1controller層　　

　　　　　　我感受其中就是給頁面中的事件，調用service層的方法，而後就是該方法成功返回後的事件。

//搜索，$scope.search前端頁面中的search事件，page，rows是參數
    $scope.search=function(page,rows){      
　　　　//調用service層的方法，並傳入參數，success後的處理      
        goodsService.search(page,rows,$scope.searchEntity).success(
            function(response){
                $scope.list=response.rows;    
                $scope.paginationConf.totalItems=response.total;//更新總記錄數
            }            
        );
    }

　　2.2service層

　　　　service層主要就是發送請求。而事務則是使用的@Transactional註解。

//搜索
    this.search=function(page,rows,searchEntity){
//路徑中.do是在web.xml中規定的
        return $http.post('../goods/search.do?page='+page+"&rows="+rows, searchEntity);
    }

2、開發

　　　　與常規的ssm開發不盡相同。分佈式開發時模塊開發，因此可能controller層，並非和service是同一模塊，這樣相同的方法就能夠重複調用。

　　　　1.1controller層

　　　　　　與常規的ssm開發略微的不一樣，其中的注入service使用的是@Reference，該註解是ali下的。

　　　　1.2service層

　　　　　　其中@Service註解是ali下的。