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值下的消息时，再返回所有数据，则部分数据会丢失的现象。

今天就先写这些，还是小前端一枚~~~

若是代码中有什么问题，希望能多多指出，一起学习。

哈哈