我毕业了-------有点期待生活,又点害怕生活。

总结下最近一个月做的这个项目,项目的开发形式也比较新颖,采用的是前后端分离的形式。我负责前端的管理系统开发,另一个哥们负责利用ABP创建接口,整合后端代码,供前端访问,为其提供数据。前端采用angularjs来开发,之前学习过一点,但是好长时间没有使用,很多都忘记了,导致严重耽误了开发周期。看来以为新学习的东西还是要多使用,多了解。这次还有一个收获是对于我来说很有帮助,那就是学会写工作日志。按照“今日内容”、“明日计划”、“难点”这三个维度来写,感觉又get到了一个技能。希望自己在平时的工作中也可以使用到。

好了,不说废话,进入主题吧。

1:加载项目的整体依赖包(更新项目)

由于时间关系,开发的系统是别的系统上进行修改的,所有底层的配置都有。

npm install -g gulp bower
npm install

这里的意思是更新项目的所有依赖包,也就是将依赖包下载到本地。运行gulp项目就可以跑起来了。(前提是你本机安装npm nodejs)

2:使用release方式发布项目

gulp --env release build

3:上传语音文件获取文件名,音频播放总时间,并且将其序列化。

前端UI

<span class="input-group-btn btn-left">
<div>
<input type="button" class="btn green" value="选择语音文件" ng-click="selectFile('#fileSelector')">
<input class="hidden" type="file" file-model="question.frequencyUrl" name="myfile" id="fileSelector" required/>
<audio id="audio" controls="" style="display: none;"></audio>
</div>
</span>

JS操作

            $scope.selectFile = function(element) {
$(element).click();
}
var file = $('#fileSelector');
file.on('change', function(e) {
var name = e.currentTarget.files[0].name;
$('#fileName').val(name);
//得到语音播放时间
var objUrl = window.URL.createObjectURL(e.currentTarget.files[0]);
$('#audio').attr('src', objUrl);
getTime();
})
//利用FormData进行序列化
var fd = new FormData();
var filename = document.querySelector('input[type=file]').files[0];
//console.log(filename.name);
fd.append("userfile", filename); //序列化文件

将元素的文件上传隐藏掉,界面上显示一个按钮。当点击按钮时触发input为file的文件上传事件,最终完成上传。项目中由于是上传语音到腾讯云的COS,需要将文件进行序列化操作,利用FormData()方法完成文件的序列化操作。

对于音频时间的操作是通过将路径赋给界面上的audio标签来实现时间的获取的。上面只是显示了部分音频代码,缺少一个getTime()方法,由于需要将其时间保存成3′34′′这种形式,对其进行了转换。

            function getTime() {
setTimeout(function() {
var duration = $("#audio")[0].duration;
if (isNaN(duration)) {
getTime();
} else {
var minutes = (duration / 60).toFixed(2); //多少分钟
var times = minutes.toString().split('.');
timenumber = times[0] + "′" + times[1] + "″";
console.log(timenumber);
//console.info("该歌曲的总时间为:"+duration+"秒")
}
}, 10);
}

4:ng中那些经常使用到的小标签

ng-show和ng-hide:它们是控制此出是否显示,赋值为bool,二者表达的意思正好相反。

UI

            <td ng-show="isWeChatPay(order.payMethod)">微信支付</td>
<td ng-show="!isWeChatPay(order.payMethod)">其它</td>

后台

            $scope.isWeChatPay=function(wechatpay){
var isWePay=false;
if(wechatpay==="WechatAppPay"){
isWePay=true;
}else{
isWePay=false;
}
return isWePay;
}

就是得到bool值,看应该展示那个,ng-hide正好相反。

ng-bind :绑定特定的文本或者字符串到此处。

UI

            <td ng-bind="modifyPrice(order.unitPrice)"></td>

后台

            $scope.modifyPrice=function(price){
var temp=String(price).indexOf('.')+1;
if(temp<=0){
price=price+".00";
}
return price;
}

主要是展示绑定的内容。通过一个ng方法将值作为参数,传递进去,在后台对值进行处理,同事展示到前台。

5:ng中必要的表单填写完成之后,让显示提交按钮。

UI

            <div class="portlet-body form">
<form role="form" name="createQuestionForm">
<div class="form-body">
<div class="form-group form-md-line-input form-md-floating-label has-info">
<input type="text" class="form-control" id="title" ng-model="question.title" name="title" ng-class="{'edited':question.title}" required/>
<label for="title">问题</label>
<span class="help-block error-msg" ng-show="createQuestionForm.title.$error.required">
<span>
请输入问题标题
</span>
</span>
</div>
<div class="form-group form-md-line-input form-md-floating-label has-info">
<input type="text" class="form-control" id="lable" ng-model="question.lable" name="lable" ng-class="{'edited':question.lable}" required/>
<label for="lable">关键字/标签</label>
<span class="help-block error-msg" ng-show="createQuestionForm.lable.$error.required">
<span>
请输入问题搜索关键字、标签
</span>
</span>
</div>
</div>
<div class="form-actions noborder">
<button type="button" class="btn blue" ng-click="create()" ng-disabled="createQuestionForm.$invalid">立即发布</button>
<a ui-sref="question" class="btn default">取消</a>
</div>
</form>

form标签有个name=”createQuestionForm” 在每个必须要填写的内容中添加required,且都将默认显示的错误提示写好,最后在发布按钮这里使用ng-disabled=”createQuestionForm.$invalid”进行效验就可以了。其实来自ng前端的验证还有很多比如输入值类型,大小等。

6:使用select2做下拉框之前踩的坑

这次的医生选择框采用的是select2做插件的,为求达到用户填写姓名,在异步ajax请求显示指定数量的医生进行选择。

这次第一个坑是select2要显示的数据必须是id text这样的格式,日了狗,之前就说一直不显示出来,最后将其进行for转换才OK。第二个是后台通过ABP传递过来的json数据是json对象,而这个插件必须使用json的array形式才可以,那么就进行转换么。(主要是官网写的dome标记出来)

格式代码:第一行在select2中显示不出来,第二行就OK。必须进行转换

            var data = [{ "id": 2996, "name": "  林红飞" }, { "id": 1468, "name": " 郭建刚" }, { "id": 3013, "name": " 韩亚利" }];
var datas = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

转换如下

            var arr=[];
for(var i in data){
data[i].text=data[i].name;
delete data[i].name;
arr.push(data[i]);
}
console.log(arr);

医生下拉选择代码,实现按需加载。

            $('.doctorselect').select2({
ajax: {
url: "http://dabei.llili.cn/api/doctors/list",
dataType: 'json',
delay: 250,
data: function (params) {
return {
doctorName: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
var arr = [];
for (var i in data) {
data[i].text = data[i].name;
delete data[i].name;
}
//console.log(data);
params.page = params.page || 1;
return {
results: data,
pagination: {
more: (params.page * 30) < data.totalCount
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1
placeholder: '请输入值',
allowClear: true
});

前端就需要一句话就OK。这里还有一个必须注意的placeholder占位符如果UI界面写ng-model标签就不能显示,对于我们的编辑功能来说简直是灾难。最后选择ng-select2来实现了。

总结—angularjs项目的更多相关文章

  1. 使用Yeoman快速启动AngularJS项目开发

    本博客停止更新,请访问新个人博客:owenchen.net 前言 博客迁移到了BAE上,http://owenchen.net/,以后的文章会首发在自己的博客上,随后在博客园发布. 很久没有写文章了, ...

  2. 【转】Yeoman自动构建 Angularjs 项目

    Yeoman是什么? Yeoman按照官方说法,它不只是一个工具,还是一个工作流.它其实包括了三个部分yo.grunt.bower,分别用于项目的启动.文件操作.包管理. Yo: Yo是一个项目初始化 ...

  3. angularJs项目实战!02:前端的页面分解与组装

    自从上一篇文章到现在已经有将近一个月的时间,我将精力放在了前端页面分解与组装,和angularjs如何与jquery.bootstrap.D3等一系列其他类库结合使用的经验总结上.由于公司新招了一些员 ...

  4. AngularJs项目

    AngularJs项目实践总结 今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一.UI控件选择 Angularj ...

  5. angularJs项目实战!01:模块划分和目录组织

    近日来我有幸主导了一个典型的web app开发.该项目从产品层次来说是个典型的CRUD应用,故而我毫不犹豫地采用了grunt + boilerplate + angularjs + bootstrap ...

  6. 使用Spring Boot和Gradle创建AngularJS项目

    Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的 ...

  7. AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

    AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...

  8. AngularJS进阶(三十一)AngularJS项目开发技巧之获取模态对话框中的组件ID

    AngularJS项目开发技巧之获取模态对话框中的组件ID 需求 出于项目开发需求,需要实现的业务逻辑是:药店端点击查看"已发货""已收货"订单详情时,模块弹出 ...

  9. AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载

    AngularJS项目开发技巧之图片预加载 绪 项目(移动端采用Ionic 框架)开发完毕,测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载,主要原因还是网速.如下图左 ...

  10. AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储

    AngularJS项目开发技巧之localStorage存储       注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...

随机推荐

  1. RabbitMq初探——php的一个demo

    <?php /** * Created by PhpStorm. * Date: 2017/10/17 * Time: 16:21 */ class Rabbit { public functi ...

  2. Linux centos 6.4安装

    Linux系统安装: 开启虚拟机: 界面说明:Install or upgrade an existing system 安装或升级现有的系统install system with basic vid ...

  3. ArchLinux下shadow服务报错

    用着Linux蓦然开机就报错了.我是个对报错很敏感的,而是是开机报错. 这个的严重性,听一位前辈说过:如果开机报错你都不理它,慢慢的它就会宕机. 报错内容: shadow服务是Linux下用于校队pa ...

  4. mac配置虚拟机的net模式

    a.点击PD的偏好设置进入 1)选择net模式(shared)(相当于VM的V8虚拟机) 2)勾选将mac连入当前的网络 3)勾选在网络系统偏好设置中显示网络连接 b.点击mac的网络系统偏好设置,可 ...

  5. 获取Android状态栏的高度

    Android 开发中经常需要知道屏幕高度.宽度.状态栏,标题栏的高度等 宽度和高度 WindowManager windowManager = (WindowManager) getSystemSe ...

  6. c++primer 学习笔记

    1.1 编写简单的c++程序 函数4元素:函数类型.函数名.形参表.函数体 调用GNU(UNIX) g++ prog1.cc -o prog1 //生成可执行文件prog1,UNIX下默认a.out ...

  7. JAVA数据结构--优先队列(堆实现)

    优先队列(堆)的定义 堆(英语:Heap)是计算机科学中一类特殊的数据结构的统称.堆通常是一个可以被看做一棵树的数组对象.在队列中,调度程序反复提取队列中第一个作业并运行,因为实际情况中某些时间较短的 ...

  8. java中如何把图片转换成二进制流的代码

    在学习期间,把开发过程经常用到的一些代码段做个备份,下边代码内容是关于java中如何把图片转换成二进制流的代码,应该能对各朋友也有用处. public byte[] SetImageToByteArr ...

  9. 码云+jenkins+自动回复邮件

    码云和jenkins的配置流程在Gitee Jenkins Plugin上介绍的很仔细. 附上码云官方Gitee Jenkins Plugin的介绍: https://gitee.com/help/a ...

  10. 自动化测试接口PYTHON

      在开发测试中经常会遇到接口迭代和代码重构,一个无关紧要的改动往往会引起整个项目的运行.现有的接口测试中往往只是针对单一接口的测试,可是业务的连贯性是非常紧密的,比如:用户从登陆,获取商品信息,下单 ...