麦壳前端技术分享
2017-11-28 本文已影响19人
麦壳儿UIandFE2
麦壳前端技术分享
标签（空格分隔）： 技术分享 ng+bs+插件
简介
技术栈：nodeJS4+ + AngularJs1.4 + +Bootstrap3.3
其中：nodeJs4+(npm包（gulp+第三方）)
npm? 一台服务器，别人编写的第三方。
cnpm? 财大气粗的阿里巴巴，copy的一份npm。
为什么要有它？
1：前端开发，应用更广。
2：前端应用更大，富应用时代。所以搭建的基础不可能都从底层走。
3：没人管。没靠山。所以杂、乱。所以学习前端-给新人的感觉更新换代频繁。
跑起来
1：安装包。
2：启动命令
项目目录
---app
---components //存放上边栏和左边栏组件
---images //存放图片
---scripts //存放controllers、directives、filters、services
---app.js
---config.js 接口存放，全局常量的存放，例如：正则，页码，全局工具类等定义。
---.....
---styles //样式（sass生产的）
---views //视图
---dist //生成目录
---assets //第三方SDK or 其他特殊引用
---bower_components //通过bower安装的包依赖
---node_modules //node安装的包
---.gitignore //git管理时候默认忽略的文件or文件夹
---bower.json //bower管理文件
---favicon.ico //网站的ico
---index.html //入口页面
---package.json //node管理文件
---.gulpfile.js //gulp配置文件
说明：
本项目目录结构：
fileManage-档案管理
diagnoseManage-诊断管理
preManage-处方管理
...
外壳：
html:
<article ng-controller="控制器name" class="lookAllbodyTesResults container-fluid">
哪些是必要的，哪些可以去除。
</article>
js:
App.controller('sportPreManController', ['$scope', '$rootScope', '$http', 'restful', '$uibModal', 'ngProgressFactory', 'toastr', 'rootCheck', function ($scope, $rootScope, $http, restful, $uibModal, ngProgressFactory, toastr, rootCheck) {
注入：要注意的。
$scope:
}]);
内容：
基本2类：
1:用户输入的：表单-form.
例如：搜索、新增、编辑。
示例代码：bs里的。这里有html5中增强的表单功能。省去自己写校验。
<form>
<div class="form-group col-md-12">
<label class="col-md-2 control-label text-right">名称：</label>
<div class="col-md-10">
<input type="text" class="form-control" name="text" placeholder="text">
</div>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label text-right">密码：</label>
<div class="col-md-10">
<input type="password" class="form-control" name="password" placeholder="password">
</div>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label text-right">日期：</label>
<div class="col-md-10">
<input type="datetime-local" class="form-control" name="datetime" placeholder="datetime-local">
</div>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label text-right">数字：</label>
<div class="col-md-10">
<input type="number" class="form-control" name="number" placeholder="number">
</div>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label text-right">颜色：</label>
<div class="col-md-10">
<input type="color" class="form-control" name="color" placeholder="color">
</div>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label text-right">文本域：</label>
<div class="col-md-10">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
<div class="col-md-offset-3 col-md-2">
<button type="submit" class="btn btn-success">提交</button>
</div>
</form>
2:展示给用户的:目前系统中：只有列表-table.
例如：列表。
示例代码：bs里的，鼠标悬停，表格变灰色。
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
</tr>
</tbody>
</table>
会分离才会合成
学会找到 标签+样式+js
容器层
装饰层
数据+逻辑层。
例如：
<input type="text" class="form-control" ng-model="data.name" name="name" maxlength="20">
设计思想
1：数据驱动思想，而不是dom驱动，所有的元素变化，转换成数据变化。
2：双向绑定思想，用户和后台的数据自动同步。省去set页面数据。
3：
常用组件
toastr
对话框，适合弱提示
常见主题：
success
error
应用：截取一段网络请求
.then(function (res) {
if (res.data.code == 2000) {
toastr.success("新增成功")
$uibModalInstance.close();
} else {
console.info("新增失败");
}
}, function (rej) {
toastr.error(rej);
});
[图片上传中...(image.png-fe5ef-1519116539067-0)]
$uibModal
模态窗
注意：
写法：id与模板url一致。
跨控制器传值
关闭和消失的回调。
应用：
//父级控制器-新增弹窗
$scope.add = function (data) {
var item;
var modalInstance = $uibModal.open({
templateUrl: 'SportPreViewAdd.html',
controller: 'SportPreViewAddController',
size: 'md',
resolve: {
item: function () {
return data;
}
},
});
modalInstance.result.then(function () {
//close
$scope.query();
}, function () {
//dismissed
$scope.query();
})
};
<!--新增弹窗的html-->
<script type="text/ng-template" id="SportPreViewAdd.html">
<div class="modal-header">
<h4>头</h4>
</div>
<div class="modal-body">
<h4>体</h4>
</div
</script>
/*新增弹窗的控制器*/
App.controller("SportPreViewAddController", ['$scope', '$http', '$uibModalInstance', '$state', '$rootScope', '$uibModal', 'item', 'toastr', function ($scope, $http, $uibModalInstance, $state, $rootScope, $uibModal, item, toastr) {
//变量声明
$scope.data = {};
//下拉多选
$scope.unitIdAll = [];
$scope.unitNameAll = [];
//关闭弹窗
$scope.close = function () {
$uibModalInstance.close();
};
//save-add
$scope.save = function () {
$scope.savePromise = $http({//网络请求遮罩
url: $rootScope.api.addPre,
method: 'post',
headers: {
'Content-Type': 'application/json'
},
data: {
"name": $scope.data.name,
"introduction": $scope.data.introduction,
"periodFrequency": $scope.data.periodFrequency,
"periodDays": $scope.data.periodDays,
"symptomIds": $scope.unitIdAll.join(','),
"symptomNames": $scope.unitNameAll.join(',')
}
}).then(function (res) {
if (res.data.code == 2000) {
toastr.success("新增成功")
$uibModalInstance.close();
} else {
console.info("新增失败");
}
}, function (rej) {
toastr.error(rej);
});
};
}]);
image.png
ngProgressFactory
进度条。
用户体验好，用于耗时操作-网络请求。
image.png
应用：
3步走
//变量声明
$scope.data = {};
//进度条
$scope.progressbar = ngProgressFactory.createInstance();
//查询
$scope.query = function () {
$scope.progressbar.start(); //进度条
$scope.ListPromise = $http({//网络请求遮罩
url: $rootScope.api.getPreList,
method: 'post',
headers: {
'Content-Type': 'application/json'
},
data: {
"count": parseInt($scope.PageSize) ? parseInt($scope.PageSize) : 20,
"page": parseInt($scope.PageIndex) - 1 ? parseInt($scope.PageIndex) - 1 : 0,
"name": $scope.data.name,
"symptomId": $scope.data.symptomId,
"startTime": $scope.data.startTime,
"endTime": $scope.data.endTime
}
}).then(function (res) {
if (res.data.code == 2000) {
$scope.dataArr = res.data.data;
$scope.totalCount = res.data.page_info ? res.data.page_info.total : 0;
$scope.progressbar.complete();
$scope.toPageNum = $scope.PageIndex;
}
});
};
uib-pagination
分页
//所在页码
$scope.PageIndex = $rootScope.PAGINATION_CONFIG.PAGEINDEX;
//每页显示多少条
$scope.PageSize = $rootScope.PAGINATION_CONFIG.PAGESIZE;
//最多显示多少可翻页长度
$scope.maxSize = $rootScope.PAGINATION_CONFIG.MAXSIZE;
//数据量总数
$scope.total = 600;
$scope.setPage = function () {
$scope.PageIndex = $scope.toPageNum > Math.ceil($scope.DevListDataCount / $scope.PageSize) ? Math.ceil($scope.DevListDataCount / $scope.PageSize) : $scope.toPageNum;
$scope.query();
};
html:
<div class="col-md-9">
<select class="page-size" ng-model="PageSize" ng-change="pageChanged()">
<option value="20" ng-selected="true">每页显示20条</option>
<option value="40">每页显示40条</option>
<option value="60">每页显示60条</option>
<option value="80">每页显示80条</option>
<option value="100">每页显示100条</option>
</select>
<uib-pagination ng-model="PageIndex" ng-change="pageChanged()" total-items="DevListDataCount"
max-size="maxSize" items-per-page="PageSize" class="pagination-sm"
boundary-link-numbers="true" rotate="false" previous-text="上一页"
next-text="下一页"></uib-pagination>
</div>
api
//属性名 默认值 备注
previous-text Previous 上一页的按钮名字
next-text Next 下一页的按钮名字
total-items 总共有多少条数据
ng-model 当前页数
items-per-page 10 每页显示的数量.设置值小于1表示显示所有项
max-size null 可选择的页数范围
rotate true 是否保持当前在可视范围的中间
ng-change 页数变化时调用的函数
boundary-links false 是否显示第一页和最后一页的按钮
boundary-link-numbers false 是否显示第一页和最后一页的页数,并在页数过多时用…表示被隐藏的页数
//以上是目前项目中使用的。
direction-links true 是否显示上一页和下一页的按钮
first-text first 第一页的按钮的名字
last-text last 最后一页的按钮名字
force-ellipses false 是否在rotate被设置为true并且页数过多时显示为"…"
ng-disabled false 是否禁用
num-pages angular.noop 只读属性，表示总页数
page-label angular.identity 设置页数标签的表达式
template-url uib/template/pagination/pagination.html
ui-select
下拉
下拉选择器，其中下拉可选的数据可以是自己定义的数组也可以使从后台返回的数组。选择的后，可以选择返回单个字段，也可以返回一个对象。
应用:
处方状态
//html代码
<div class="form-group col-md-3">
<label class="col-md-3 text-right control-label">处方状态：</label>
<div class="col-md-8">
<ui-select ng-model="data.preStatus" theme="bootstrap" name="preStatus">
<ui-select-match allow-clear="true"placeholder="处方状态"> {{$select.selected.name}}
</ui-select-match>
<ui-select-choices repeat="item.id as item in preArr | orderBy:'id' | filter: $select.search.id">这里要注意：item.id就是去处这个数字里每个对象中的一个属性id，如果是item直接去遍历arr取出来的就是一项即对象。
<span ng-bind-html="item.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
</div>
</div>
//js:
$scope.preArr = [
{
id: 0,
name: "进行中"
}, {
id: 1,
name: "未完成"
}, {
id: 2,
name: "已完成"
}
];
dateTimePicker
日期选择器时间控制
应用：
<div class="form-group col-md-6">
<label class="col-md-4 control-label">选择时间：</label>
<div class="col-md-8">
<div class="dropdown dropdown-begin-time">
<input type="text" name="start_time" class="form-control" ng-model="data.Begintime" datetime-transform format="yyyy-MM-dd HH:mm:ss" readonly="readonly">
<i class="glyphicon glyphicon-calendar rili-icon dropdown-toggle" id="Begintime" role="button" data-toggle="dropdown" data-target=".dropdown-begin-time"></i>
<ul class="dropdown-menu" role="menu" aria-labelledby="Begintime">
<datetimepicker ng-model="data.Begintime" data-datetimepicker-config="{dropdownSelector: '#Begintime',renderOn: 'end-date-changed','minView':'second','minuteStep':1,'secondStep':1}" data-on-set-time="startDateOnSetTime()" data-before-render="startDateBeforeRender($view,$dates)"></datetimepicker>
</ul>
</div>
</div>
</div>
<div class="form-group col-md-6">
<label class="col-md-4 control-label">到</label>
<div class="col-md-8">
<div class="dropdown dropdown-end-time">
<input type="text" name="end_time" class="form-control" ng-model="data.Endtime" datetime-transform format="yyyy-MM-dd HH:mm:ss" readonly="readonly">
<i class="glyphicon glyphicon-calendar rili-icon dropdown-toggle" id="Endtime" role="button" data-toggle="dropdown" data-target=".dropdown-end-time"></i>
<ul class="dropdown-menu" role="menu" aria-labelledby="Endtime">
<datetimepicker ng-model="data.Endtime" data-datetimepicker-config="{dropdownSelector: '#Endtime',renderOn: 'start-date-changed','minView':'second','minuteStep':1,'secondStep':1}" data-on-set-time="endDateOnSetTime()" data-before-render="endDateBeforeRender($view, $dates, $leftDate, $upDate, $rightDate)"></datetimepicker>
</ul>
</div>
</div>
</div>
注意这里的是id：不能写class,否则选完，日期面板不收起来。页面中有多个日期控件时候注意，多个id会报错。
常用表单验证
大概分3类：
1：必填性。-required
2：逻辑校验。-自己写js
3：合法性。例如：类型约束-利用type属性+正则。项目里configJS里有配置常用的正则。
Angular 的表单属性
$valid, $invalid, $pristine, $dirty
Angular 提供了有关表单的属性来帮助我们验证表单.
属性类
描述
$valid ng-valid Boolean 告诉我们这一项当前基于你设定的规则是否验证通过
$invalid ng-invalid Boolean 告诉我们这一项当前基于你设定的规则是否验证未通过
$pristine ng-pristine Boolean 如果表单或者输入框没有使用则为True
$dirty ng-dirty Boolean 如果表单或者输入框有使用到则为True
应用：
<button class="btn withripple btn-raised btn-primary" type="button" ng-click="save()" ng-disabled="!SportPreViewAddForm.$valid">确定 </button>
