├── .gitignore
├── README.md
├── app
    ├── app.component.ts
    ├── boot.ts
    ├── home.component.ts
    ├── load.ts
    ├── map.component.ts
    └── map.service.ts
├── css
    └── main.css
├── index.html
├── package.json
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/*
2 | .vscode/*
3 | *.js
4 | *.js.map


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ArcGIS JS API 4.0 ViewModels with Angular 2
2 | 
3 | [Live demo](http://odoe.github.io/esrijs4-vm-angular2/)
4 | 
5 | I'm still learning Angular 2, so I'm not sure if this is clean, but it works.
6 | 
7 | I had issues trying to use RxJS to subscribe to changes in my service.


--------------------------------------------------------------------------------
/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from 'angular2/core';
 2 | import { MapComponent } from './map.component';
 3 | import { HomeComponent } from './home.component';
 4 | 
 5 | @Component({
 6 |   directives: [MapComponent, HomeComponent],
 7 |     selector: 'my-app',
 8 |     template:
 9 |     `
10 |     <div>
11 |     <esri-map #mapView (viewCreated)="homeButton.setView(mapView.view)">
12 |       <esri-home #homeButton></esri-home>
13 |     </esri-map>
14 |     </div>
15 |     `
16 | })
17 | export class AppComponent { }


--------------------------------------------------------------------------------
/app/boot.ts:
--------------------------------------------------------------------------------
1 | import {bootstrap}    from 'angular2/platform/browser'
2 | import {AppComponent} from './app.component'
3 | 
4 | bootstrap(AppComponent);


--------------------------------------------------------------------------------
/app/home.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ElementRef } from 'angular2/core';
 2 | import { HomeViewModel } from 'esri-mods';
 3 | 
 4 | @Component({
 5 |   selector: 'esri-home',
 6 |   template: '<a class="esri-home" href="#" (click)="onClick($event)"><i class="material-icons">home</i></a>',
 7 |   styles: [
 8 | `
 9 | @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
10 | .esri-home {
11 |   position: absolute;
12 |   right: 1em;
13 |   top: 1em;
14 |   padding: 1em;
15 |   color: rgba(255,255,255,1);
16 | }
17 | 
18 | .esri-home:hover {
19 |   color: rgba(255,255,255,0.75);
20 | }
21 | 
22 | .esri-home>i {
23 |   font-size: 3em;
24 |   text-shadow: 1px 1px 2px black; 
25 | }
26 | `
27 |   ]
28 | })
29 | export class HomeComponent {
30 | 
31 |   vm: HomeViewModel = null;
32 | 
33 |   constructor() {
34 |     this.vm = new HomeViewModel({});
35 |   }
36 | 
37 |   setView(view) {
38 |     this.vm.set('view', view);
39 |   }
40 | 
41 |   onClick(e) {
42 |     e.preventDefault();
43 |     if (!this.vm.view) {
44 |         return;
45 |     }
46 |     this.vm.goHome();
47 |   }
48 | }


--------------------------------------------------------------------------------
/app/load.ts:
--------------------------------------------------------------------------------
 1 | declare var System: any;
 2 | 
 3 | const deps = [
 4 |   'esri/Map',
 5 |   'esri/views/MapView',
 6 |   'esri/widgets/Home/HomeViewModel'
 7 |   ];
 8 | const moduleName = (name) => name.match(/[^\/]+$/).shift();
 9 | 
10 | System.config({
11 |   packages: {
12 |     app: {
13 |       defaultExtension: 'js'
14 |     }
15 |   }
16 | });
17 | 
18 | function register(name: string, mods: any[]) {
19 |   System.register(name, [], exp => {
20 |     return {
21 |       setters: [],
22 |       execute: () => {
23 |         mods.map((mod: any, idx: number) => {
24 |           exp(moduleName(deps[idx]), mod);
25 |         });
26 |       }
27 |     }
28 |   });
29 | }
30 | 
31 | require(deps, function(...modules) {
32 |   register('esri-mods', modules);
33 |   System.import('app/boot')
34 |     .then(null, console.error.bind(console));
35 | });


--------------------------------------------------------------------------------
/app/map.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ElementRef, Output, EventEmitter } from 'angular2/core';
 2 | import MapService from './map.service';
 3 | import { MapView } from 'esri-mods';
 4 | 
 5 | @Component({
 6 |     selector: 'esri-map',
 7 |     template: '<div id="viewDiv"><ng-content></ng-content></div>',
 8 |     providers: [MapService]
 9 | })
10 | export class MapComponent {
11 | 
12 |   @Output() viewCreated = new EventEmitter();
13 |   
14 |   view: null;
15 |   
16 |   constructor(private _service: MapService, private elRef:ElementRef) {}
17 |   
18 |   ngOnInit() {
19 |     this.view = new MapView({
20 |       container: this.elRef.nativeElement.firstChild,
21 |       map: this._service.map,
22 |       zoom: 10,
23 |       center: [-120.76, 37.93]
24 |     });
25 |     this.viewCreated.next(this.view);
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/app/map.service.ts:
--------------------------------------------------------------------------------
 1 | import { Map } from 'esri-mods';
 2 | 
 3 | export default class MapService {
 4 |   map: null;
 5 |   constructor() {
 6 |     this.map = new Map({ basemap: 'topo' });
 7 |   }
 8 | }
 9 | 
10 | 


--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
 1 | @import url('https://js.arcgis.com/4.0beta3/esri/css/main.css');
 2 | html,
 3 | body {
 4 |   padding: 0;
 5 |   margin: 0;
 6 | }
 7 | 
 8 | #viewDiv {
 9 |   position: absolute;
10 |   top: 1em;
11 |   bottom: 1em;
12 |   right: 1em;
13 |   left: 1em;
14 | }
15 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <link rel="stylesheet" href="css/main.css">
 4 |     <title>ArcGIS JS API 4.0beta3 & Angular 2</title>
 5 | 
 6 |     <!-- 1. Load libraries -->
 7 |     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
 8 |     <script src="node_modules/systemjs/dist/system.src.js"></script>
 9 |     <script src="node_modules/rxjs/bundles/Rx.js"></script>
10 |     <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
11 | 
12 |     <!-- 2. Configure SystemJS -->
13 |     <script>
14 |       window.dojoConfig = {
15 |         async: true
16 |       };
17 |    </script>
18 |     <script src="https://js.arcgis.com/4.0beta3/"></script>
19 |   </head>
20 | 
21 |   <!-- 3. Display the application -->
22 |   <body>
23 |     <my-app>Loading...</my-app>
24 |     <script src="app/load.js"></script>
25 |   </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "esrijs4-vm-angular2",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "tsc": "tsc",
 8 |     "tsc:w": "tsc -w",
 9 |     "lite": "lite-server",
10 |     "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
11 |   },
12 |   "author": "Rene Rubalcava <rrubalcava@esri.com>",
13 |   "license": "MIT",
14 |   "dependencies": {
15 |     "angular2": "2.0.0-beta.0",
16 |     "systemjs": "0.19.6",
17 |     "es6-promise": "^3.0.2",
18 |     "es6-shim": "^0.33.3",
19 |     "reflect-metadata": "0.1.2",
20 |     "rxjs": "5.0.0-beta.0",
21 |     "zone.js": "0.5.10"
22 |   },
23 |   "devDependencies": {
24 |     "concurrently": "^1.0.0",
25 |     "lite-server": "^1.3.1",
26 |     "typescript": "^1.7.3"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES5",
 4 |     "module": "amd",
 5 |     "moduleResolution": "node",
 6 |     "sourceMap": true,
 7 |     "emitDecoratorMetadata": true,
 8 |     "experimentalDecorators": true,
 9 |     "removeComments": false,
10 |     "noImplicitAny": false
11 |   },
12 |   "exclude": [
13 |     "node_modules"
14 |   ]
15 | }


--------------------------------------------------------------------------------