总结—angularjs项目

简介: 总结—angularjs项目

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来实现了。


679140-20170625203119960-1410482083.png





目录
相关文章
|
JavaScript 前端开发
AngularJS学习(一)
@[TOC](目录) ### 1. 引入 AngularJS 要使用 AngularJS,您需要首先引入 angular.js 文件。这可以通过在 HTML 文件中使用<script>标签来实现: ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> ``` ### 2. 创建一个 AngularJS 应用 在 HTML 文件中,使用 ng-app 指令创建一个 AngularJS 应用。这个指令必须放在<html>标签内: ```ht
|
Web App开发 JavaScript 前端开发
AngularJS
AngularJS 是比较新的技术,版本 1.0 是在 2012 年发布的。 AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。 这是一个非常好的构想,该项目目前已由 Google 正式支持,有一个全职的开发团队继续开发和维护这个库。
1098 0
|
Web App开发 JavaScript 前端开发
|
JSON JavaScript 前端开发
|
JavaScript 前端开发 PHP
|
JavaScript 前端开发 容器
|
JavaScript 前端开发
|
JavaScript 前端开发