总结—angularjs项目

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

       总结下最近一个月做的这个项目，项目的开发形式也比较新颖，采用的是前后端分离的形式。我负责前端的管理系统开发，另一个哥们负责利用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来实现了。