總結—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來實現了。
總結—angularjs項目