AngularJS~集成的ajax和服務的注入 - lori－IT工程師數位筆記本

文章出處

AngularJS很美，以至于迷倒了不少年青人和我這位大叔，它的美不僅僅是在寫法上，而且在設計方法上都進乎于完美，用什么服務就注入什么服務，這樣方法本來就很直觀，程序員感覺直觀了，程序在運行起來也按需要裝載，這種按需要裝載無論在性能上還是在表現力上都遠遠優于完全加載方式。

Ajax加載數據

$http服務提供了一組ajax的方法，加載數據，Get,Post都有支持，而$http服務在angular里就是被動態裝載的，在面向對象里叫做DI或者IOC

       angular.module('todoApp', []).controller('RealDataController', function ($http, $scope) {
            var self = this;
            $http.get('/SOA/GetMenus').success(function (data) {
                self.dataList = data;
            }).error(function (data, status, headers, config) { });

上面是一種裝載$http服務，并使用http服務的一種方法，而下面這種是通過別名的方法使用它，代碼更加精簡

     angular.module('todoApp',[]).controller('RealDataController2', ["$http", "$scope", function ($h, $s) {
            var self = this;
            $h.get('/SOA/GetMenus').success(function (data) {
                self.dataList = data;
            }).error(function (data, status, headers, config) { });
        }]);

通過上面的程序我們就可以把數據綁定到HTML元素上了

　　<div ng-controller="RealDataController as real">
        <ul>
            <li ng-repeat="item in real.dataList">
                <span>{{item.MenuID}}</span>
                <span>{{item.MenuName}}</span>
                <span>{{item.UpdateDate | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>
                <span><a href="javascript:void(0)" ng-click="real.edit()">編輯</a></span>|
                <span><a href="javascript:void(0)" ng-click="real.del(item)">刪除</a></span>
            </li>
        </ul>
    </div>

結果如下

值得注意的是對于“刪除”操作，本例也做了實現，它分為兩方面，一個前臺用戶體驗顯示，二是后臺數據刪除，前臺使用angular的雙向綁定技術，將數組對象的元素刪除，后臺通過$http.post調用對應的api進行真實數據的刪除即可，代碼如下

　　　　　　 //刪除
            self.del = function (o) {
                self.dataList.splice(self.dataList.indexOf(o), 1);
                //AJAX請求后臺Api清除真實數據
                $http.post("/SOA/DelMenu?id=" + o.MenuID);
            }

在使用angular幾天后，感覺它與knockoutjs有些類似的地方，當然，它在功能上即加強大，這是毋庸置疑的！

文章列表