tedyuen/yonglong

• 1. 指令服务及帮助类使用
  • 1.1 日期控件
  • 1.2 文件上传控件
  • 1.3 ajax请求及接口服务
  • 1.4 loading插件
  • 1.5 alert控件
  • 1.6 toast控件
  • 1.7 ellipsis插件
  • 1.8 mock数据模拟
• 2. 插件配置

1. 指令服务及帮助类使用

1.1 日期控件

• 注入 showDatePickerProvider
• html标签内存在mydatepicker的class，如下:

<div class="form-group">
        <div class="input-group">
            <span class="input-group-addon">装箱日期</span>
            <input type="text" class="form-control mydatepicker" placeholder="yyyy-mm-dd" ng-model="queryData.shippingDate">
            <span class="input-group-addon"><i class="icon-calender"></i></span>
        </div>
</div>

• 在controller第一行添加以下代码:

showDatePickerProvider.showDatePicker();

1.2 文件上传控件

• 注入 dropifyProvider
• html标签如下:

<div class="form-group">
      <label for="id1">身份证(正面)</label>
      <input type="file" id="id1" class="dropify" data-allowed-file-extensions="jpg png jpeg" data-max-file-size="2M" data-default-file="{{reg.nameCard}}" ng-files-model="regfile1.file"/>
</div>

• controller中调用:

dropifyProvider.dropify();

• 如果存在在线原始图片，即有data-default-file属性，则需要在获取在线图片路径后(ajax请求成功后)再调用 dropify() 方法,如下:

$timeout(function () {
        dropifyProvider.dropify();
},10);

• $scope 获取文件时，使用如下方式(多个文件也适用):

$scope.regfile1 = {
        name: 'nameCardFile',
        file: '',
};
var files = [$scope.regfile1];

1.3 ajax请求服务

• controller中注入 interfaceService
• 待续

1.4 loading插件

• 注入 loadingService
• 调用方法，参数 str 为loading中显示的文字,并在需要结束的地方关闭。如:

loadingService.showLoading("请稍后...");
loadingService.closeLoading();

• 在调用ajax接口前如需要loading，则无需注入 loadingService ，可以直接调用 interfaceService 的 showLoading(str) 方法，并且无需关闭loading。如:

interfaceService.showLoading("请稍后...");

1.5 alert控件

• 使用SweetAlert插件。具体使用方法请参考官方文档。例子如下:

1.6 toast控件

• 注入 toastService
• 提供了2个类型的toast，success warning。使用方法如下:

toastService.toastSuccess({
        heading: '发送成功',
        text: '验证码发送成功,请查看您的短信收件箱，输入有效验证码，并完成表单。',
});
toastService.toastWarning({
        heading: '发送失败',
        text: '验证码发送失败,请查看您的网络设置并重试。',
});

• 如需要自定义，可以在 toastService.js 中自行添加样式。

1.7 ellipsis插件

• 如若需要将返回的文字进行缩略，需要在ajax返回后调用，如下:

$timeout(function () {
        $('.news-note').ellipsis({
            row:2
        });
        $('.news-title').ellipsis({
            row:1
        });
},20);

• 使用jQuery Ellipsis,具体方法参考官方文档。

1.8 mock数据模拟

• 使用mock.js
• main.js 中打开以下代码:

var Mock = require('mockjs');

• 在 module/test 中创建自己的mock文件，并在 gulpfile.js 中的jsArr数组中添加路径。

2. 插件配置

1. 初始化npm

npm init

2. 添加.editorconfig文件
3. 添加.gitattributes文件
4. 添加.gitignore文件
5. 安装构建插件

// gulp
// gulp-browserify
// del
// gulp-clean-css
// gulp-concat
// gulp-obfuscate
// gulp-rename
// gulp-sass
// gulp-uglify
// gulp-babel babel-preset-es2015
sudo npm install --save-dev gulp gulp-browserify del gulp-clean-css gulp-concat gulp-obfuscate gulp-rename gulp-sass gulp-uglify gulp-babel babel-preset-es2015

6. 安装项目插件

// angular
// jquery 
// bootstrap 
// angular-route
// angular-ui-router
// angular-animate
// bootstrap-datepicker
// jquery-toast-plugin
// metismenu
// jquery-slimscroll
// angular-baidu-map
// dropify
// mockjs
// sweetalert
// angular-cookies
// waypoints
// clipboard
sudo npm install --save angular jquery bootstrap angular-route angular-ui-router angular-animate bootstrap-datepicker jquery-toast-plugin metismenu jquery-slimscroll angular-baidu-map dropify mockjs sweetalert angular-cookies waypoints clipboard

7. npm 设置淘宝镜像

npm config set registry http://registry.npm.taobao.org

8. 接口文档 http://120.26.65.65:8280/admin/doc/index.html