文章目录

再见 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***********************************************************/
});
返回文章列表 打赏
本页链接的二维码
打赏二维码
期待你的评论

2 条评论
  1. 刘海儿 铂金   刘海儿  

    哈哈,大佬我最近也在学以致用Vue@(吐舌)

    1. 小尾巴 王者   小尾巴   博主
      @ 刘海儿

      @(哈哈)