chore(version): upgrade to angular2 beta-0

demo/components/file-upload-section.ts

@@ -1,8 +1,9 @@
 /// <reference path="../../tsd.d.ts" />
 
-import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';
+import {Component, View} from 'angular2/core';
+import {CORE_DIRECTIVES} from 'angular2/common';
 
-import {tabs} from 'ng2-bootstrap/ng2-bootstrap';
+import {TAB_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
 import {SimpleDemo} from './file-upload/simple-demo';
 
 let name = 'File Upload';
@@ -23,7 +24,7 @@ tabDesc.forEach(desc => {
           <tab heading="${desc.heading}" (select)="select($event)">
           <div class="card card-block panel panel-default panel-body">
 
-            <${desc.heading.toLowerCase()}-demo *ng-if="currentHeading === '${desc.heading}'"></${desc.heading.toLowerCase()}-demo>
+            <${desc.heading.toLowerCase()}-demo *ngIf="currentHeading === '${desc.heading}'"></${desc.heading.toLowerCase()}-demo>
 
             <br>
 
@@ -52,9 +53,7 @@ tabDesc.forEach(desc => {
 });
 
 @Component({
-  selector: 'file-upload-section'
-})
-@View({
+  selector: 'file-upload-section',
   template: `
   <section id="${name.toLowerCase()}">
     <div class="row">
@@ -71,7 +70,7 @@ tabDesc.forEach(desc => {
     </div>
   </section>
   `,
-  directives: [SimpleDemo, tabs, CORE_DIRECTIVES]
+  directives: [SimpleDemo, TAB_DIRECTIVES, CORE_DIRECTIVES]
 })
 export class FileUploadSection {
   private currentHeading:string = 'Simple';

demo/components/file-upload/simple-demo.html

@@ -21,7 +21,7 @@
             <h3>Select files</h3>
 
             <div ng2-file-drop
-                 [ng-class]="{'nv-file-over': hasBaseDropZoneOver}"
+                 [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
                  (file-over)="fileOverBase($event)"
                  [uploader]="uploader"
                  class="well my-drop-zone">
@@ -29,7 +29,7 @@
             </div>
 
             <div ng2-file-drop
-                 [ng-class]="{'another-file-over-class': hasAnotherDropZoneOver}"
+                 [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
                  (file-over)="fileOverAnother($event)"
                  [uploader]="uploader"
                  class="well my-drop-zone">
@@ -46,7 +46,7 @@
         <div class="col-md-9" style="margin-bottom: 40px">
 
             <h3>Upload queue</h3>
-            <p>Queue length: {{ uploader.queue.length }}</p>
+            <p>Queue length: {{ uploader?.queue?.length }}</p>
 
             <table class="table">
                 <thead>
@@ -59,18 +59,18 @@
                 </tr>
                 </thead>
                 <tbody>
-                <tr *ng-for="#item of uploader.queue">
-                    <td><strong>{{ item.file.name }}</strong></td>
-                    <td *ng-if="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024 | number:'.2' }} MB</td>
-                    <td *ng-if="uploader.isHTML5">
+                <tr *ngFor="#item of uploader.queue">
+                    <td><strong>{{ item?.file?.name }}</strong></td>
+                    <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
+                    <td *ngIf="uploader.isHTML5">
                         <div class="progress" style="margin-bottom: 0;">
-                            <div class="progress-bar" role="progressbar" [ng-style]="{ 'width': item.progress + '%' }"></div>
+                            <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                         </div>
                     </td>
                     <td class="text-center">
-                        <span *ng-if="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
-                        <span *ng-if="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
-                        <span *ng-if="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
+                        <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
+                        <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
+                        <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                     </td>
                     <td nowrap>
                         <button type="button" class="btn btn-success btn-xs"
@@ -94,7 +94,7 @@
                 <div>
                     Queue progress:
                     <div class="progress" style="">
-                        <div class="progress-bar" role="progressbar" [ng-style]="{ 'width': uploader.progress + '%' }"></div>
+                        <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
                     </div>
                 </div>
                 <button type="button" class="btn btn-success btn-s"
@@ -115,4 +115,4 @@
 
     </div>
 
-</div>
+</div>

demo/components/file-upload/simple-demo.ts

@@ -1,13 +1,8 @@
 /// <reference path="../../../tsd.d.ts" />
 
-import {
-  Component, View, EventEmitter,
-  CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle
-} from 'angular2/angular2';
-
-import {FileSelect} from '../../../components/file-upload/file-select';
-import {FileDrop} from '../../../components/file-upload/file-drop';
-import {FileUploader} from '../../../components/file-upload/file-uploader';
+import {Component} from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle} from 'angular2/common';
+import {FILE_UPLOAD_DIRECTIVES, FileUploader} from '../../../ng2-file-upload';
 
 // webpack html imports
 let template = require('./simple-demo.html');
@@ -16,11 +11,9 @@ let template = require('./simple-demo.html');
 const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';
 
 @Component({
-  selector: 'simple-demo'
-})
-@View({
+  selector: 'simple-demo',
   template: template,
-  directives: [FileSelect, FileDrop, NgClass, NgStyle, CORE_DIRECTIVES, FORM_DIRECTIVES]
+  directives: [FILE_UPLOAD_DIRECTIVES, NgClass, NgStyle, CORE_DIRECTIVES, FORM_DIRECTIVES]
 })
 export class SimpleDemo {
   private uploader:FileUploader = new FileUploader({url: URL});

demo/index.html

@@ -9,7 +9,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link rel="icon" href="data:;base64,iVBORw0KGgo=">
-  <link rel="author" href="https://github.com/valor-software/ng2-bootstrap/graphs/contributors">
+  <link rel="author" href="https://github.com/valor-software/ng2-file-upload/graphs/contributors">
 
   <!--link to bootstrap.css-->
   <link rel="stylesheet" href="assets/css/prism-okaidia.css">

demo/index.ts

@@ -1,5 +1,7 @@
 /// <reference path="../tsd.d.ts" />
-import {Component, View, bootstrap, NgClass} from 'angular2/angular2';
+import {bootstrap} from 'angular2/platform/browser';
+import {Component, View} from 'angular2/core';
+import {NgClass} from 'angular2/common';
 
 import {FileUploadSection} from './components/file-upload-section';