Merge branch 'Shawn-Fan-master-2'

tomwayson · tomwayson · commit fc4dfda98bf1 · 2016-05-31T22:01:05.000-07:00
diff --git a/.gitignore b/.gitignore
@@ -35,3 +35,6 @@ node_modules
 # typescript output
 *.js
 *.js.map
+
+# types
+typings
diff --git a/app/app.component.ts b/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from 'angular2/core';
+import { Component, ViewChild } from '@angular/core';
 import { MapComponent } from './map.component';
 import { SearchComponent } from './search.component';
 import { LegendComponent } from './legend.component';
diff --git a/app/basemapselect.component.ts b/app/basemapselect.component.ts
@@ -1,11 +1,13 @@
-import { Component, ElementRef, Output, EventEmitter } from 'angular2/core';
+import { Component, ElementRef, Output, EventEmitter } from '@angular/core';
 import { MapService } from './map.service';
 
 @Component({
   selector: 'basemap-select',
   template:
   `<select [ngModel]="selectedBasemap" (change)="onSelectChange($event)" class="form-control">
-    <option *ngFor="#basemap of basemaps" value="{{basemap.name}}">{{basemap.title}}</option>
+  <template ngFor let-basemap [ngForOf]="basemaps">
+    <option value="{{basemap.name}}">{{basemap.title}}</option>
+  </template>
   </select>`,
   providers: [MapService]
 })
diff --git a/app/boot.ts b/app/boot.ts
@@ -1,5 +1,4 @@
-///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
-import {bootstrap}    from 'angular2/platform/browser'
+import {bootstrap}    from '@angular/platform-browser-dynamic'
 import {AppComponent} from './app.component'
 
-bootstrap(AppComponent);
+bootstrap(AppComponent);
diff --git a/app/layer.component.ts b/app/layer.component.ts
@@ -1,14 +1,14 @@
-import { Component} from 'angular2/core';
+import { Component} from '@angular/core';
 import { MapService } from './map.service';
-import {NgFor,NgModel,NgControl} from 'angular2/common';
+import {NgFor,NgModel,NgControl} from '@angular/common';
 
 @Component({
   selector: 'esri-layer',
   directives: [NgFor,NgModel],
   template: `
              <form>
               <div class = "form-group">
-                    <template ngFor #legendLayer [ngForOf]="legendLayers">
+                    <template ngFor let-legendLayer [ngForOf]="legendLayers">
                       <div>
                           <input
                             type = "checkbox"
diff --git a/app/legend.component.ts b/app/legend.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef } from 'angular2/core';
+import { Component, ElementRef } from '@angular/core';
 import { MapService } from './map.service';
 
 @Component({
diff --git a/app/map.component.ts b/app/map.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, Output, EventEmitter } from 'angular2/core';
+import { Component, ElementRef, Output, EventEmitter } from '@angular/core';
 import { MapService } from './map.service';
 
 @Component({
diff --git a/app/map.service.ts b/app/map.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from 'angular2/core';
+import { Injectable } from '@angular/core';
 import { arcgisUtils, esriBasemaps, Legend, Search } from 'esri';
 
 @Injectable()
diff --git a/app/search.component.ts b/app/search.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef } from 'angular2/core';
+import { Component, ElementRef } from '@angular/core';
 import { MapService } from './map.service';
 
 @Component({
diff --git a/index.html b/index.html
@@ -1,17 +1,23 @@
 <html>
   <head>
+    <title>ArcGIS JS API 3 & Angular 2</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!--load styles-->
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
     <link rel="stylesheet" href="//js.arcgis.com/3.16/esri/themes/calcite/dijit/calcite.css">
     <link rel="stylesheet" href="//js.arcgis.com/3.16/esri/themes/calcite/esri/esri.css">
     <link rel="stylesheet" href="app/styles/main.css">
-    <title>ArcGIS JS API 3 & Angular 2</title>
 
-    <!-- 1. Load Angular libraries -->
-    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <!-- 1. Load libraries -->
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
-    <script src="node_modules/rxjs/bundles/Rx.js"></script>
-    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
-
+    <script src="systemjs.config.js"></script>
+    
     <!-- 2. Configure and load Esri libraries -->
     <script>
       window.dojoConfig = {
@@ -20,40 +26,34 @@
     </script>
     <script src="https://js.arcgis.com/3.16/"></script>
     <script src="node_modules/esri-system-js/dist/esriSystem.js"></script>
+
+    <!-- 3. Configure SystemJS -->
+    <script src="systemjs.config.js"></script>
+    <script>
+      // load esri modules needed by this application
+      // into a System.js module called esri
+        esriSystem.register([
+          'esri/arcgis/utils',
+          'esri/basemaps',
+          'esri/dijit/Legend',
+          'esri/dijit/Search'
+        ], function () {
+          // then bootstrap application
+          System.import('app')
+            .catch(function(err){ console.error(err); });
+        }, {
+          moduleNameOverrides: {
+            'esri/arcgis/utils': 'arcgisUtils',
+            'esri/basemaps': 'esriBasemaps'
+          }
+        });
+    </script>
   </head>
 
   <!-- 3. Display the application -->
   <body class="calcite">
     <div class="container-fluid">
       <my-app>Loading...</my-app>
     </div>
-    <script>
-    // configure system.js
-    System.config({
-      packages: {
-        app: {
-          defaultExtension: 'js'
-        }
-      }
-    });
-    // load esri modules needed by this application
-    // into a System.js module called esri
-    esriSystem.register([
-      'esri/arcgis/utils',
-      'esri/basemaps',
-      'esri/dijit/Legend',
-      'esri/dijit/Search'
-    ], function () {
-      // then bootstrap application
-      System.import('app/boot')
-        .then(null, console.error.bind(console));
-    }, {
-      moduleNameOverrides: {
-        'esri/arcgis/utils': 'arcgisUtils',
-        'esri/basemaps': 'esriBasemaps'
-      }
-    });
-  </script>
-  </body>
-
+  </body>  
 </html>
diff --git a/package.json b/package.json
@@ -8,9 +8,12 @@
   },
   "scripts": {
     "test": "tsc",
-    "watch": "tsc -w",
+    "tsc:w": "tsc -w",
     "lite": "lite-server",
-    "start": "concurrent \"npm run watch\" \"npm run lite\" "
+    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
+    "postinstall": "typings install",
+    "tsc": "tsc",
+    "typings": "typings"
   },
   "keywords": [
     "Angular2",
@@ -19,18 +22,28 @@
   "author": "Tom Wayson <tom@tomwayson.com>",
   "license": "MIT",
   "dependencies": {
-    "angular2": "2.0.0-beta.7",
-    "systemjs": "0.19.22",
-    "es6-promise": "^3.0.2",
-    "es6-shim": "^0.33.3",
+    "@angular/common":  "2.0.0-rc.1",
+    "@angular/compiler":  "2.0.0-rc.1",
+    "@angular/core":  "2.0.0-rc.1",
+    "@angular/http":  "2.0.0-rc.1",
+    "@angular/platform-browser":  "2.0.0-rc.1",
+    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
+    "@angular/router":  "2.0.0-rc.1",
+    "@angular/router-deprecated":  "2.0.0-rc.1",
+    "@angular/upgrade":  "2.0.0-rc.1",
+
     "esri-system-js": "0.0.3",
-    "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.2",
-    "zone.js": "0.5.15"
+
+    "systemjs": "0.19.27",
+    "core-js": "^2.4.0",
+    "reflect-metadata": "^0.1.3",
+    "rxjs": "5.0.0-beta.6",
+    "zone.js": "^0.6.12"
   },
   "devDependencies": {
-    "concurrently": "^1.0.0",
-    "lite-server": "^1.3.1",
-    "typescript": "^1.7.3"
+    "concurrently": "^2.0.0",
+    "lite-server": "^2.2.0",
+    "typescript": "^1.8.10",
+    "typings": "^1.0.4"
   }
 }
diff --git a/systemjs.config.js b/systemjs.config.js
@@ -0,0 +1,38 @@
+
+(function(global) {
+
+  // map tells the System loader where to look for things.
+  var map = {
+    'app':                        'app', // 'dist',
+    '@angular':                   'node_modules/@angular',
+    'rxjs':                       'node_modules/rxjs'
+  };
+
+  // packages tells the System loader how to load when no filename and/or no extension
+  var packages = {
+    'app':                        { main: 'boot.js',  defaultExtension: 'js' },
+    'rxjs':                       { defaultExtension: 'js' },
+    'esri':                       { defaultExtension: 'js' }
+  };
+  var ngPackageNames = [
+    'common',
+    'compiler',
+    'core',
+    'http',
+    'platform-browser',
+    'platform-browser-dynamic',
+    'router',
+    'router-deprecated',
+    'upgrade',
+  ];
+  // Add package entries for angular packages
+  ngPackageNames.forEach(function(pkgName) {
+    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
+  });
+  var config = {
+    map: map,
+    packages: packages
+  }
+  System.config(config);
+
+})(this);
diff --git a/typings.json b/typings.json
@@ -0,0 +1,5 @@
+{
+  "globalDependencies": {
+    "core-js": "registry:dt/core-js#0.0.0+20160524134847"
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Component, ViewChild } from 'angular2/core';`
	`1`	`+import { Component, ViewChild } from '@angular/core';`
`2`	`2`	`import { MapComponent } from './map.component';`
`3`	`3`	`import { SearchComponent } from './search.component';`
`4`	`4`	`import { LegendComponent } from './legend.component';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Component, ElementRef } from 'angular2/core';`
	`1`	`+import { Component, ElementRef } from '@angular/core';`
`2`	`2`	`import { MapService } from './map.service';`
`3`	`3`
`4`	`4`	`@Component({`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Component, ElementRef, Output, EventEmitter } from 'angular2/core';`
	`1`	`+import { Component, ElementRef, Output, EventEmitter } from '@angular/core';`
`2`	`2`	`import { MapService } from './map.service';`
`3`	`3`
`4`	`4`	`@Component({`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Injectable } from 'angular2/core';`
	`1`	`+import { Injectable } from '@angular/core';`
`2`	`2`	`import { arcgisUtils, esriBasemaps, Legend, Search } from 'esri';`
`3`	`3`
`4`	`4`	`@Injectable()`