再见 angular,你好 vue
一年前,离开了启蒙公司(jquery搞定全部需求的那种),来到了新公司,用的angular1写页面,上手后发现用起来如此顺畅;不过也踩了不少的坑。(为啥用angular,因为老代码都是用的这个。也想过重构,但是:重构一时爽,容易火葬场)
不知何时,前端几乎人人标配vue,加之公司最近终于上了新项目,果断使用vue开始撸代码。
浏览了很多框架,最后觉得vue-element-admin不错,UI优美,功能齐全,文档充实。
学习一个新框架最好的时间就是现在,直接动手敲,业务需求会驱使着你去快速掌握这些api。
之前趁着工作之余也简单敲敲,不过动起手来发现知识点还是蛮多的。
半个月敲了个新产品出来,算是可以在简历上郑重的写上:“熟悉vue”了。
附上即将逝去的angular1简单框架,大神请绕道。
app.js
var commApp = angular.module('commApp', ['ionic', 'ngSanitize']);
commApp.config(function ($stateProvider, $urlRouterProvider, $httpProvider){
// Use x-www-form-urlencoded Content-Type
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
/**
* The workhorse; converts an object to x-www-form-urlencoded serialization.
* @param {Object} obj
* @return {String}
*/
var param = function(obj) {
var query = '', name, value, fullSubName, subName, subValue, innerObj, i;
for(name in obj) {
value = obj[name];
if(value instanceof Array) {
for(i=0; i<value.length; ++i) {
subValue = value[i];
fullSubName = name + '[' + i + ']';
innerObj = {};
innerObj[fullSubName] = subValue;
query += param(innerObj) + '&';
}
}
else if(value instanceof Object) {
for(subName in value) {
subValue = value[subName];
fullSubName = name + '[' + subName + ']';
innerObj = {};
innerObj[fullSubName] = subValue;
query += param(innerObj) + '&';
}
}
else if(value !== undefined && value !== null)
query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
}
return query.length ? query.substr(0, query.length - 1) : query;
};
// Override $http service's default transformRequest
$httpProvider.defaults.transformRequest = [function(data) {
return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
}];
});
//过滤器
commApp.filter('MobilePhoneNumberHiding', function () {
/***
* 手机号码隐私化显示
*/
return function (str) {
if(isEmpty(str)){
}else {
var xing = '';
for (var i=0;i<4;i++) {
xing+='*';
}
return str.substring(0,3)+xing+str.substring(str.length-3);
}
}
});
/**
* 自定义判断是否为空
* @param src
* @returns {boolean}
*/
function isEmpty(src) {
if (src == undefined || src == null || src == '') {
return true;
} else {
return false;
}
}
doctorList.js
commApp.controller('doctorListController', function ($scope, $state, $http, $filter, $timeout, $sce, $compile) {
mui.showLoading('正在加载..', 'div');
/*******************************************************方法-start***********************************************************/
//初始化数据
$scope.INIT = function () {
$scope.account = common.getUrlParam('account');
$scope.openId = common.getUrlParam('openId');
};
//初始化分页
$scope.initPage = function () {
//balabala
};
/**
* 前往医生详情页面
* @param doctorId
* @param platformKey
*/
$scope.goDetail = function (doctorId, platformKey) {
window.location.href = 'doctorDetail.html' +
'?account=' + $scope.account +
'&openId=' + $scope.openId +
'&doctorId=' + doctorId +
'&platformKey=' + platformKey;
};
/*******************************************************方法-end***********************************************************/
/*******************************************************逻辑-start***********************************************************/
//初始化数据
$scope.INIT();
//初始化分页
$scope.initPage();
/*******************************************************逻辑-end***********************************************************/
});
哈哈,大佬我最近也在学以致用Vue@(吐舌)
@(哈哈)