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值下的消息时,再返回所有数据,则部分数据会丢失的现象。
今天就先写这些,还是小前端一枚~~~
若是代码中有什么问题,希望能多多指出,一起学习。
哈哈