发布于 2017-04-01 11:06:48 | 485 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的AngularJS开发指南,程序狗速度看过来!

AngularJS 前端JS框架

AngularJS诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。


1、 安装模块

npm install angular2-image-upload --save

2、配置app.module.ts

@NgModule({
    imports: [
        ...,
        ImageUploadModule.forRoot(),
        ...
    ]
})

3、模板中使用

<image-upload></image-upload>

4、配置信息

  [max]="100"  最大上传文件个数
  [url]="'example.com/images/upload'" 上传服务器地址
  [headers]="[
    {header: 'Authorization', value: 'MyToken'}
  ]"
  [buttonCaption]="'选择图片'"
  [dropBoxMessage]="'拖动到此区域'"
    // 添加图片
  (onFileUploadFinish)="imageUploaded($event)"
    // 删除图片
  (onRemove)="imageRemoved($event)"
    // 处于挂起状态时候,触发这个事件,上传中,可以禁止确定按钮等...
  (isPending)="disableSendButton($event)"

5、处理选择的图片信息

// 组件
import {Component} from "@angular/core";
@Component({
  selector: "oa-add-friends",
  templateUrl: "../templates/add_friends.component.html"
})
export class AddFriendsComponent {
  file: Array<Object>;
  constructor() {
    this.file = [];
  }

  imageUploaded(event) {
    console.log(event);
    this.file.push(event.file);
    console.log(this.file);
  }
  imageRemoved(event) {
    console.log(event);
    let index = this.file.indexOf(event.file);
    if( index > -1) {
      this.file.splice(index, 1);
    }
    console.log(this.file);
  }
}

// 界面
<image-upload
  [buttonCaption]="'选择图片'"
  [dropBoxMessage]="'拖动图片到这里'"
  (onFileUploadFinish)="imageUploaded($event)"
  (onRemove)="imageRemoved($event)"
></image-upload>

<p *ngFor="let item of file">
  {{item.name}}
</p>

6、修改模板样式

/Users/zhangxuchao/www/oa/node_modules/angular2-image-upload/lib/image-upload/image-upload.component.js

修改里面的template和styles



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务