Angular js 開發系統之增刪查改

2016-09-20

一直在學習angularjs，不斷地深入瞭解才發現其魅力，與功能之強大。

一直想寫博客，但是總是不能堅持下去，而且介於一直很喜歡手寫代碼，但是又有很多不方便的地方，因此。

重新來過，想把這裏作爲自己對日常工作和學習ng的一個小小的總結，讓自己能夠在前端的路上不斷進步。

今天主要是搭建angular的基礎組件，增刪查改。

bower 安裝下載依賴文件，打開cmd，輸入bower init（初始化） 並回車至出現bower.json文件夾

在index.html中引入，以及在對應的路由中依賴注入你所需要的模塊。

第一步：在數據接口寫好的條件下，

'use strict';
angular.module('myApp').controller('newsCtrl',newsCtrl);

newsCtrl.$inject=['$scope','$timeout','$state','news','$filter'];

   function newsCtrl($scope,$timeout,$state, news,$filter) {<span style="white-space:pre">	</span>}

推薦使用以上這樣的書寫方式，

一般情況下 還有另外一種寫法爲：

.controller('newsCtrl',function($scope){})

在正常運行下這兩種其實並無差異，但是若工程進行壓縮時，所有參數變爲a、b等顯示，此時第二種方法就會因爲未定義而出現報錯的情況。

第二步：獲取數據

$scope.loadData = function () {			//通過數據接口get到數據
    news.get().then(function (data) {
        $scope.items = data;<span style="white-space:pre">			</span>//得到所有的數據存在items中
    });
};

具體的數據是從service中獲取。

app.service('news', ['$q', '$http', function ($q, $http) {
    var memURL ='http://localhost:3000/news/'		//此處的數據是在本地讀取，未部署至服務器
    return {
        get: function () {
            var deferred = $q.defer();
            $http({
                method: 'GET',
                url: memURL
            }).success(function (data, status, headers, config) {
                deferred.resolve(data);
            }).error(function (data, status, headers, config) {
                deferred.reject(status);
            });
            return deferred.promise;
        }
    }
}]);

第三步：得到所有的數據後，只需在前端ng-repeat出：

<tr ng-repeat="i in items">
    <td>{{$index+1}}</td>
    <td>{{i.title}}</td>
    <td>{{i.date}}</td>
    <td>{{i.type}}</td>
    <td>
        <button type="button" class="btn btn-success" aria-label="Left Align" ng-click="edit(i)">
            <span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
        </button>
    </td>
</tr>

第四步：頁面中點擊添加按鈕，跳轉至數據添加頁面：

$scope.add = function(){
        $state.go('dashboard.add')<span style="white-space:pre">		</span>//使用$state.go 進行跳轉，路徑爲定義好的路由
    }

第五步：頁面中的編輯按鈕，跳轉至編輯頁面(需要傳遞參數)：

    $scope.edit = function (_id) {
        $state.go('dashboard.edit', {data: _id});
    };

其定義的路由爲：

.state('dashboard.edit', {
       templateUrl: 'views/edit.html',
       url: '/edit',
       params: {
            data: null
         }
      })

第六步：刪除信息：

        $scope.delete=function (_id) {
            news.delete(_id).then(function(data){
                $scope.loadData();
            },function(error){

            });
        }

還有一個要實現的功能即爲：

頁面中存在一個下拉選框，當選中其中的某一個字段時，所顯示的新聞也會隨之變化。

首先需要定義，下拉框中的數據。大概寫寫~ 

$scope.types = [{
            id: -1,
            name: '全部信息'
        },{
            id: 0,
            name: '政治'
        }, {
            id: 1,
            name: '財經'
        }, {
            id: 2,
            name: '時事'
        }
        ];

開始 碼代碼：

前端代碼爲：

 <select ng-change="getType()" class="form-control" ng-model="selTypeID" ng-options="item.id as item.name for item in types"></select>

下拉選框中 一般使用ng-change來監控數據變化，ng-option的此種寫法即具體到屬性的獲取。

ng代碼：

$scope.selTypeID = -1;//初始化 一開始顯示在下拉選框中的內容
        $scope.allDatas = null;//聲明一個空對象
        $scope.loadData = function () {	
            news.get().then(function (data) {//獲取數據
                $scope.allDatas = data;//將所有數據賦給allDatas，即一開始顯示全部信息
                $scope.getType();
            });
        };
        $scope.getType = function(){//在修改type值時：進行判斷，如果點擊時獲取到的ID爲-1，則顯示全部信息。
            if ($scope.selTypeID == -1) {
                $scope.items = $scope.allDatas;
                return;
<span style="white-space:pre">	</span>}
            var ary = [];//聲明一個存放臨時查詢數據的數組
            angular.forEach($scope.allDatas, function (item) {
<span style="white-space:pre">		</span>if (item.type == $scope.selTypeID){//判斷如果點擊時獲取的id等於數組中的type的id值，則push出來
                    ary.push(item);//將符合的push到數組ary中
                }
     <span style="white-space:pre">	</span>});
            $scope.items = ary;//賦值

自始至終allDatas都未做任何變化，只是相當於複製了所有數據，若不賦值，則會出現，當選中某一type值下的消息時，再返回所有數據，則部分數據會丟失的現象。



今天就先寫這些，還是小前端一枚~~~

若是代碼中有什麼問題，希望能多多指出，一起學習。

哈哈