├── .angular-cli.json
├── .editorconfig
├── .firebaserc
├── .gitignore
├── .travis.yml
├── GETTING_STARTED.md
├── README.md
├── database.rules.json
├── e2e
    ├── app.e2e-spec.ts
    ├── app.po.ts
    └── tsconfig.e2e.json
├── firebase.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
    ├── app
    │   ├── app.component.css
    │   ├── app.component.html
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── dashboard
    │   │   ├── dashboard.component.css
    │   │   ├── dashboard.component.html
    │   │   ├── dashboard.component.spec.ts
    │   │   └── dashboard.component.ts
    │   ├── hero-detail
    │   │   ├── hero-detail.component.css
    │   │   ├── hero-detail.component.html
    │   │   ├── hero-detail.component.spec.ts
    │   │   └── hero-detail.component.ts
    │   ├── hero-search
    │   │   ├── hero-search.component.css
    │   │   ├── hero-search.component.html
    │   │   ├── hero-search.component.spec.ts
    │   │   └── hero-search.component.ts
    │   ├── heroes
    │   │   ├── heroes.component.css
    │   │   ├── heroes.component.html
    │   │   ├── heroes.component.spec.ts
    │   │   └── heroes.component.ts
    │   ├── models
    │   │   └── hero.ts
    │   ├── routing.module.ts
    │   └── services
    │   │   ├── hero-search
    │   │       ├── hero-search.service.spec.ts
    │   │       └── hero-search.service.ts
    │   │   ├── hero.service.spec.ts
    │   │   ├── hero.service.ts
    │   │   └── in-memory-data.service.ts
    ├── assets
    │   └── .gitkeep
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── main.ts
    ├── polyfills.ts
    ├── styles.css
    ├── test.ts
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    └── typings.d.ts
├── tsconfig.json
└── tslint.json


/.angular-cli.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 3 |   "project": {
 4 |     "name": "hero-tutorial-material"
 5 |   },
 6 |   "apps": [
 7 |     {
 8 |       "root": "src",
 9 |       "outDir": "dist",
10 |       "assets": [
11 |         "assets",
12 |         "favicon.ico"
13 |       ],
14 |       "index": "index.html",
15 |       "main": "main.ts",
16 |       "polyfills": "polyfills.ts",
17 |       "test": "test.ts",
18 |       "tsconfig": "tsconfig.app.json",
19 |       "testTsconfig": "tsconfig.spec.json",
20 |       "prefix": "app",
21 |       "styles": [
22 |         "styles.css"
23 |       ],
24 |       "scripts": [],
25 |       "environmentSource": "environments/environment.ts",
26 |       "environments": {
27 |         "dev": "environments/environment.ts",
28 |         "prod": "environments/environment.prod.ts"
29 |       }
30 |     }
31 |   ],
32 |   "e2e": {
33 |     "protractor": {
34 |       "config": "./protractor.conf.js"
35 |     }
36 |   },
37 |   "lint": [
38 |     {
39 |       "project": "src/tsconfig.app.json"
40 |     },
41 |     {
42 |       "project": "src/tsconfig.spec.json"
43 |     },
44 |     {
45 |       "project": "e2e/tsconfig.e2e.json"
46 |     }
47 |   ],
48 |   "test": {
49 |     "karma": {
50 |       "config": "./karma.conf.js"
51 |     }
52 |   },
53 |   "defaults": {
54 |     "styleExt": "css",
55 |     "component": {}
56 |   }
57 | }


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "material2-angular2workshop"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | 
 8 | # dependencies
 9 | /node_modules
10 | 
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 | 
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 | 
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | testem.log
34 | /typings
35 | 
36 | # e2e
37 | /e2e/*.js
38 | /e2e/*.map
39 | 
40 | # System Files
41 | .DS_Store
42 | Thumbs.db
43 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - "6"
 4 | 
 5 | branches:
 6 |   only:
 7 |     - master
 8 | 
 9 | before_script:
10 |   - npm install -g firebase-tools
11 |   - npm install -g @angular/cli
12 | 
13 | script:
14 |   - ng build --prod --aot
15 | 
16 | after_success:
17 |   - firebase deploy --token $FIREBASE_TOKEN
18 | 
19 | notifications:
20 |   email:
21 |     on_failure: change
22 |     on_success: change


--------------------------------------------------------------------------------
/GETTING_STARTED.md:
--------------------------------------------------------------------------------
  1 | Getting started with Angular 2
  2 | ====================
  3 | 
  4 | TABLE OF CONTENTS
  5 | ---------------------
  6 | * [Setting up Angular 2](#setting-up-angular-2)
  7 | * [Introduction](#introduction)
  8 | * [Adding more heroes](#adding-more-heroes)
  9 | * [Multiple components](#multiple-components)
 10 | * [Services](#services)
 11 | * [Routing](#routing)
 12 | * [HTTP-Promises](#http-promises)
 13 | * [HTTP-Observables](#http-observables)
 14 | 
 15 | ## SETTING UP ANGULAR 2
 16 | ---------------------
 17 | * [NodeJS](https://nodejs.org/en/)
 18 | * npm install -g @angular/cli
 19 | * ng new Angular2Workshop
 20 | * cd Angular2Workshop
 21 | * ng serve
 22 | 
 23 | ## INTRODUCTION
 24 | ---------------------
 25 | Add new Hero class to src/app/app.component.ts file:
 26 | 
 27 |     export class Hero {
 28 |         id: number;
 29 |         name: string;
 30 |     }
 31 | 
 32 | Change title and add hero property to app.component.ts
 33 | 
 34 |     title = 'Tour of Heroes';
 35 |     hero: Hero = {
 36 |         id: 1,
 37 |         name: 'Windstorm'
 38 |     };
 39 | 
 40 | Open app.component.html and display title in h1, name of hero in h2 and create label and input for changing hero's name. Note that [(ngModel)] is 2-way data binding. When we change input, change is shown immediately.
 41 | 
 42 |     <h1>{{title}}</h1>
 43 |     <h2>{{hero.name}} details!</h2>
 44 |     <div><label>id: </label>{{hero.id}}</div>
 45 |     <div>
 46 |         <label>name: </label>
 47 |         <input [(ngModel)]="hero.name" placeholder="name">
 48 |     </div>
 49 | 
 50 | ## ADDING MORE HEROES
 51 | ---------------------
 52 | 
 53 | We will display more heroes, so we create a Hero array in app.component.ts below Hero class with 10 heroes.
 54 | 
 55 |     const HEROES: Hero[] = [
 56 |         { id: 11, name: 'Mr. Nice' },
 57 |         { id: 12, name: 'Narco' },
 58 |         { id: 13, name: 'Bombasto' },
 59 |         { id: 14, name: 'Celeritas' },
 60 |         { id: 15, name: 'Magneta' },
 61 |         { id: 16, name: 'RubberMan' },
 62 |         { id: 17, name: 'Dynama' },
 63 |         { id: 18, name: 'Dr IQ' },
 64 |         { id: 19, name: 'Magma' },
 65 |         { id: 20, name: 'Tornado' }
 66 |     ];
 67 | 
 68 | Assign HEROES array to heroes object, rename hero to selectedHero and unassign it. Also create onSelect method which takes a Hero parameter and assigns selectedHero.
 69 | 
 70 |     heroes = HEROES;
 71 |     selectedHero: Hero;
 72 |     onSelect(hero: Hero): void {
 73 |         this.selectedHero = hero;
 74 |     }
 75 | 
 76 | Go to .html file and add a ul with li and use *ngFor for iteration on heroes. 
 77 | We display hero.id and hero.name in the span. Also the selected hero with receive selected class and we create click handler for onSelect.
 78 | 
 79 |     <h1>{{title}}</h1>
 80 |     <h2>My Heroes</h2>
 81 |     <ul class="heroes">
 82 |         <li *ngFor="let hero of heroes"
 83 |         [class.selected]="hero === selectedHero"
 84 |         (click)="onSelect(hero)">
 85 |         <span class="badge">{{hero.id}}</span> {{hero.name}}
 86 |         </li>
 87 |     </ul>
 88 | 
 89 | Second part of .html is for display of selected hero (change hero -> selectedHero). We display it only if the selectedHero is assigned (*ngIf).
 90 | 
 91 |     <div *ngIf="selectedHero">
 92 |         <h2>{{selectedHero.name}} details!</h2>
 93 |         <div><label>id: </label>{{selectedHero.id}}</div>
 94 |         <div>
 95 |         <label>name: </label>
 96 |         <input [(ngModel)]="selectedHero.name" placeholder="name"/>
 97 |         </div>
 98 |     </div>
 99 | 
100 | Styling can be added to app.component.css file.
101 | 
102 |     .selected {
103 |       background-color: #CFD8DC !important;
104 |       color: white;
105 |     }
106 |     .heroes {
107 |       margin: 0 0 2em 0;
108 |       list-style-type: none;
109 |       padding: 0;
110 |       width: 15em;
111 |     }
112 |     .heroes li {
113 |       cursor: pointer;
114 |       position: relative;
115 |       left: 0;
116 |       background-color: #EEE;
117 |       margin: .5em;
118 |       padding: .3em 0;
119 |       height: 1.6em;
120 |       border-radius: 4px;
121 |     }
122 |     .heroes li.selected:hover {
123 |       background-color: #BBD8DC !important;
124 |       color: white;
125 |     }
126 |     .heroes li:hover {
127 |       color: #607D8B;
128 |       background-color: #DDD;
129 |       left: .1em;
130 |     }
131 |     .heroes .text {
132 |       position: relative;
133 |       top: -3px;
134 |     }
135 |     .heroes .badge {
136 |       display: inline-block;
137 |       font-size: small;
138 |       color: white;
139 |       padding: 0.8em 0.7em 0 0.7em;
140 |       background-color: #607D8B;
141 |       line-height: 1em;
142 |       position: relative;
143 |       left: -1px;
144 |       top: -4px;
145 |       height: 1.8em;
146 |       margin-right: .8em;
147 |       border-radius: 4px 0 0 4px;
148 |     }
149 | 
150 | ## MULTIPLE COMPONENTS
151 | ---------------------
152 | 
153 | Let's first extract Hero class to separate file. Create hero.ts in the /models folder.
154 | 
155 |     export class Hero {
156 |         id: number;
157 |         name: string;
158 |     }
159 | 
160 | We will also extract hero details to separate component. You can generate new component by running ng g component hero-detail from CLI.
161 | Add hero input to HeroDetailComponent class. Also, grab the html for displaying separate hero and paste it in the hero-detail.component.html and rename selectedHero -> hero.
162 | 
163 |     @Input()
164 |     hero: Hero;
165 | 
166 | Finally, go to app.component.html and add hero-detail directive and bind hero property to selectedHero.
167 | 
168 |     <app-hero-detail [hero]="selectedHero"></app-hero-detail>
169 | 
170 | ## SERVICES
171 | ---------------------
172 | 
173 | Create new services folder and generate hero service with ng g service services/hero. We must provide this service in app.module.ts
174 | 
175 |     providers: [HeroService]
176 | 
177 | Next, let's extract multiple heroes data to models/mock-heroes.ts file.
178 | 
179 |     import { Hero } from './hero';
180 | 
181 |     export const HEROES: Hero[] = [
182 |         { id: 11, name: 'Mr. Nice' },
183 |         { id: 12, name: 'Narco' },
184 |         { id: 13, name: 'Bombasto' },
185 |         { id: 14, name: 'Celeritas' },
186 |         { id: 15, name: 'Magneta' },
187 |         { id: 16, name: 'RubberMan' },
188 |         { id: 17, name: 'Dynama' },
189 |         { id: 18, name: 'Dr IQ' },
190 |         { id: 19, name: 'Magma' },
191 |         { id: 20, name: 'Tornado' }
192 |     ];
193 | 
194 | Now go to hero.service.ts and add getHeroes method which returns a promise.
195 | 
196 |     getHeroes(): Promise<Hero[]> {
197 |         return Promise.resolve(HEROES);
198 |     }
199 | 
200 | Let's go to app.component.ts and consume this service.
201 | 
202 |     export class AppComponent implements OnInit{
203 |         title = 'Tour of Heroes';
204 |         heroes: Hero[] = [];
205 |         selectedHero: Hero;
206 | 
207 |         constructor(private heroService: HeroService) { }
208 | 
209 |         getHeroes(): void {
210 |             this.heroService.getHeroes().then(heroes => this.heroes = heroes);
211 |         }
212 | 
213 |         ngOnInit(): void {
214 |             this.getHeroes();
215 |         }
216 | 
217 |         onSelect(hero: Hero): void {
218 |             this.selectedHero = hero;
219 |         }
220 |     }
221 | 
222 | ## ROUTING
223 | ---------------------
224 | 
225 | Create new Heroes component with ng g component heroes . We will move our heroes list to this component. Go to app.component.html and move everything to heroes template (.html file). 
226 | 
227 |     <h2>My Heroes</h2>
228 |     <ul class="heroes">
229 |         <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
230 |             <span class="badge">{{hero.id}}</span>{{hero.name}}
231 |         </li>
232 |     </ul>
233 |     <app-hero-detail [hero]="selectedHero"></app-hero-detail>
234 | 
235 | Meanwhile, copy the .css from app.component.css to heroes.component.css.
236 | 
237 | Also, move all the variables and methods from .ts file to heroes.component.ts file, because we will need them there to display the heroes. Also delete the OnInit implements, because we are not using it anymore in app.component.ts.
238 | 
239 |     selectedHero: Hero;
240 |     heroes: Hero[];
241 | 
242 |     constructor(private heroService: HeroService){}
243 | 
244 |     onSelect(hero: Hero){
245 |         this.selectedHero = hero;
246 |     }
247 | 
248 |     ngOnInit(): void {
249 |         this.getHeroes();
250 |     }
251 | 
252 |     getHeroes(): void {
253 |         this.heroService.getHeroes().then(heroes => this.heroes = heroes);
254 |     }
255 | 
256 | Let's create separate module for routing in the app/routing.module.ts (create new .ts file). Open app.module.ts and add routing module to imports array and copy content below to routing.module.ts.
257 | 
258 |     import { NgModule } from '@angular/core';
259 |     import { RouterModule, Routes } from '@angular/router';
260 |     import { DashboardComponent } from './dashboard/dashboard.component';
261 |     import { HeroesComponent } from './heroes/heroes.component';
262 |     import { HeroDetailComponent } from './hero-detail/hero-detail.component';
263 | 
264 |     const routes: Routes = [
265 |         { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
266 |         { path: 'dashboard', component: DashboardComponent },
267 |         { path: 'detail/:id', component: HeroDetailComponent },
268 |         { path: 'heroes', component: HeroesComponent }
269 |     ];
270 |     @NgModule({
271 |         imports: [RouterModule.forRoot(routes)],
272 |         exports: [RouterModule]
273 |     })
274 |     export class RoutingModule { }
275 | 
276 | Move the title of app in the app.component.html and add two links, to dashboard and heroes views.
277 | 
278 |     <h1>{{title}}</h1>
279 |     <nav>
280 |       <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
281 |       <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
282 |     </nav>
283 |     <router-outlet></router-outlet>
284 | 
285 | Create dashboard folder in /app and generate dashboard component with ng g component dashboard and add a title to dashboard.component.html. We will also display top 4 heroes here.
286 | 
287 |     <h3>My Dashboard</h3>
288 |     <h3>Top Heroes</h3>
289 |     <div class="grid grid-pad">
290 |         <a *ngFor="let hero of heroes" [routerLink]="['/detail', hero.id]" class="col-1-4">
291 |             <div class="module hero">
292 |                 <h4>{{hero.name}}</h4>
293 |             </div>
294 |         </a>
295 |     </div>
296 | 
297 | We will now implement logic for top heroes. Open dashboard.component.ts and add.
298 | 
299 |     heroes: Hero[] = [];
300 | 
301 |     constructor(private heroService: HeroService) { }
302 | 
303 |     ngOnInit(): void {
304 |         this.heroService.getHeroes()
305 |             .then(heroes => this.heroes = heroes.slice(1, 5));
306 |     }
307 | 
308 | Try to run ng serve and you should be able to navigate between two routes /dashboard, /heroes
309 | 
310 | We will now set up the navigation to specific hero with passing the hero id as a number in the params. Implement the ngOnInit and get the data from params on the component init in the hero-detail.component.ts.
311 | 
312 |     import { HeroService } from './../services/hero.service';
313 |     import { Hero } from './../models/hero';
314 |     import { Component, Input, OnInit } from '@angular/core';
315 |     import { ActivatedRoute, Params } from '@angular/router';
316 |     import { Location } from '@angular/common';
317 |     import 'rxjs/add/operator/switchMap';
318 | 
319 |     constructor(
320 |         private heroService: HeroService,
321 |         private route: ActivatedRoute,
322 |         private location: Location
323 |     ) { }
324 | 
325 |     ngOnInit() {
326 |         this.route.params.switchMap((params: Params) =>
327 |             this.heroService.getHero(+params['id'])).subscribe(hero => this.hero = hero);
328 |     }
329 | 
330 | We already have a method in our hero.service.ts to get all the heroes, but we need to add a method to get a specific hero, which we consume here in the ngOnInit. Add this to your hero.service.ts
331 | 
332 |     getHero(id: number): Promise<Hero> {
333 |         return this.getHeroes().then(heroes => heroes.find(hero => hero.id === id));
334 |     }
335 | 
336 | When we are on the hero.detail view, we want to have an option to get back to the dashboard. Let's add the back method and the button in the hero-detail component.
337 | 
338 |     <div>
339 |         <button (click)="goBack()">Back</button>
340 |     </div>
341 | 
342 |     goBack(): void {
343 |         this.location.back();
344 |     }
345 | 
346 | We will modify heroes component too, so when you click on hero, you will be presented with a link which takes you to the hero detail component. 
347 | 
348 | Delete this part in heroes.component.html
349 | 
350 |     <app-hero-detail [hero]="selectedHero"></app-hero-detail>
351 | 
352 | Add add this instead.
353 | 
354 |     <div *ngIf="selectedHero">
355 |         <h2>
356 |             {{selectedHero.name | uppercase}} is my hero
357 |         </h2>
358 |         <button (click)="goToDetail()">View Details</button>
359 |     </div>
360 | 
361 | Let's implement goToDetail method in heroes.component.ts
362 | 
363 |     constructor(private heroService: HeroService, private router: Router) {}
364 | 
365 |     goToDetail(): void {
366 |         this.router.navigate(['/detail', this.selectedHero.id]);
367 |     }
368 | 
369 | The final thing in this chapter is styling of our app, just add this to hero-detail.component.css
370 | 
371 |     label {
372 |         display: inline-block;
373 |         width: 3em;
374 |         margin: .5em 0;
375 |         color: #607D8B;
376 |         font-weight: bold;
377 |     }
378 |     input {
379 |         height: 2em;
380 |         font-size: 1em;
381 |         padding-left: .4em;
382 |     }
383 |     button {
384 |         margin-top: 20px;
385 |         font-family: Arial;
386 |         background-color: #eee;
387 |         border: none;
388 |         padding: 5px 10px;
389 |         border-radius: 4px;
390 |         cursor: pointer; cursor: hand;
391 |     }
392 |     button:hover {
393 |         background-color: #cfd8dc;
394 |     }
395 |         button:disabled {
396 |         background-color: #eee;
397 |         color: #ccc; 
398 |         cursor: auto;
399 |     }
400 | 
401 | Add some dashboard styling too.
402 | 
403 |     [class*='col-'] {
404 |     float: left;
405 |     padding-right: 20px;
406 |     padding-bottom: 20px;
407 |     }
408 |     [class*='col-']:last-of-type {
409 |     padding-right: 0;
410 |     }
411 |     a {
412 |     text-decoration: none;
413 |     }
414 |     *, *:after, *:before {
415 |     -webkit-box-sizing: border-box;
416 |     -moz-box-sizing: border-box;
417 |     box-sizing: border-box;
418 |     }
419 |     h3 {
420 |     text-align: center; margin-bottom: 0;
421 |     }
422 |     h4 {
423 |     position: relative;
424 |     }
425 |     .grid {
426 |     margin: 0;
427 |     }
428 |     .col-1-4 {
429 |     width: 25%;
430 |     }
431 |     .module {
432 |     padding: 20px;
433 |     text-align: center;
434 |     color: #eee;
435 |     max-height: 120px;
436 |     min-width: 120px;
437 |     background-color: #607D8B;
438 |     border-radius: 2px;
439 |     }
440 |     .module:hover {
441 |     background-color: #EEE;
442 |     cursor: pointer;
443 |     color: #607d8b;
444 |     }
445 |     .grid-pad {
446 |     padding: 10px 0;
447 |     }
448 |     .grid-pad > [class*='col-']:last-of-type {
449 |     padding-right: 20px;
450 |     }
451 |     @media (max-width: 600px) {
452 |     .module {
453 |         font-size: 10px;
454 |         max-height: 75px; }
455 |     }
456 |     @media (max-width: 1024px) {
457 |     .grid {
458 |         margin: 0;
459 |     }
460 |     .module {
461 |         min-width: 60px;
462 |     }
463 |     }
464 | 
465 | And finally, add these to src/styles.css (global styles)
466 | 
467 |     /* Master Styles */
468 |     h1 {
469 |     color: #369;
470 |     font-family: Arial, Helvetica, sans-serif;
471 |     font-size: 250%;
472 |     }
473 |     h2, h3 {
474 |     color: #444;
475 |     font-family: Arial, Helvetica, sans-serif;
476 |     font-weight: lighter;
477 |     }
478 |     body {
479 |     margin: 2em;
480 |     }
481 |     body, input[text], button {
482 |     color: #888;
483 |     font-family: Cambria, Georgia;
484 |     }
485 |     /* . . . */
486 |     /* everywhere else */
487 |     * {
488 |     font-family: Arial, Helvetica, sans-serif;
489 |     }
490 | 
491 | ## HTTP-Promises
492 | ---------------------
493 | 
494 | We can provide HTTP services by adding HttpModule in our app.module.ts. Since we are using Angular-CLI, our http is already included and provided under imports.
495 | 
496 | Let's create a new in-memory service with ng g service services/in-memory-data and add createDb method and heroes data to it.
497 | 
498 | Add this package in package.json under dependecies and run npm install.
499 | 
500 |     "angular-in-memory-web-api": "0.1.13",
501 | 
502 | In real example, we would be using a real API in the backend, but we will fake it with inmemory API module, so import these in the app.module.ts
503 | 
504 |     import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
505 |     import { InMemoryDataService } from './services/in-memory-data.service';
506 | 
507 | 
508 |     @NgModule({
509 |     imports: [
510 |         InMemoryWebApiModule.forRoot(InMemoryDataService),
511 |     ],
512 | 
513 | in-memory-data.service.ts
514 | 
515 |     import { InMemoryDbService } from 'angular-in-memory-web-api';
516 |   
517 |     export class InMemoryDataService implements InMemoryDbService {
518 |         createDb() {
519 |             let heroes = [
520 |             {id: 11, name: 'Mr. Nice'},
521 |             {id: 12, name: 'Narco'},
522 |             {id: 13, name: 'Bombasto'},
523 |             {id: 14, name: 'Celeritas'},
524 |             {id: 15, name: 'Magneta'},
525 |             {id: 16, name: 'RubberMan'},
526 |             {id: 17, name: 'Dynama'},
527 |             {id: 18, name: 'Dr IQ'},
528 |             {id: 19, name: 'Magma'},
529 |             {id: 20, name: 'Tornado'}
530 |             ];
531 |             return {heroes};
532 |         }
533 |     }
534 | 
535 | Amazing work till now. We will now use HTTP in our hero service to get the heroes from our web api server.
536 | 
537 |     import { Injectable } from '@angular/core';
538 |     import { Headers, Http } from '@angular/http';
539 |     import 'rxjs/add/operator/toPromise';
540 |     import { Hero } from './../models/hero';
541 | 
542 |     private heroesUrl = 'api/heroes';  // URL to web api
543 | 
544 |     constructor(private http: Http) { }
545 | 
546 |     getHeroes(): Promise<Hero[]> {
547 |         return this.http.get(this.heroesUrl)
548 |                 .toPromise()
549 |                 .then(response => response.json().data as Hero[])
550 |                 .catch(this.handleError);
551 |     }
552 | 
553 |     private handleError(error: any): Promise<any> {
554 |         console.error('An error occurred', error); // for demo purposes only
555 |         return Promise.reject(error.message || error);
556 |     }
557 | 
558 | Next, we will modify the method where we get the hero by id. For now, we are getting all the heroes from web api and extracting the right hero on the client. We want to get only one hero by id.
559 | 
560 |     getHero(id: number): Promise<Hero> {
561 |         const url = `${this.heroesUrl}/${id}`;
562 |         return this.http.get(url)
563 |             .toPromise()
564 |             .then(response => response.json().data as Hero)
565 |             .catch(this.handleError);
566 |     }
567 | 
568 | We want to create fully featured CRUD capable app, so we will first add the ability to save changed hero details. First add a save button with click handler and implement it in hero-detail component.
569 | 
570 |     <button (click)="save()">Save</button>
571 | 
572 |     save(): void {
573 |         this.heroService.update(this.hero)
574 |             .then(() => this.goBack());
575 |     }
576 | 
577 | This update method on heroService does not exist yet, so open hero.service.ts and implement it.
578 | 
579 |     private headers = new Headers({'Content-Type': 'application/json'});
580 | 
581 |     update(hero: Hero): Promise<Hero> {
582 |         const url = `${this.heroesUrl}/${hero.id}`;
583 |         return this.http
584 |             .put(url, JSON.stringify(hero), {headers: this.headers})
585 |             .toPromise()
586 |             .then(() => hero)
587 |             .catch(this.handleError);
588 |     }
589 | 
590 | We added headers to http request, because we are transfering json. We call the put method to update the entry.
591 | The R(read) and U(update) in CRUD are done. Now it is time to implement C(create) functionallity in our app. Let's add some input and button to our heroes.component.html on the top of the file.
592 | 
593 |     <div>
594 |         <label>Hero name:</label> <input #heroName />
595 |         <button (click)="add(heroName.value); heroName.value=''">
596 |             Add
597 |         </button>
598 |     </div>
599 | 
600 | Now in heroes.component.ts implement the add method, where we pass the value of input field.
601 | 
602 |     add(name: string): void {
603 |         name = name.trim();
604 |         if (!name) { return; }
605 |             this.heroService.create(name)
606 |             .then(hero => {
607 |                 this.heroes.push(hero);
608 |                 this.selectedHero = null;
609 |             });
610 |     }
611 | 
612 | Lastly, let's implement the missing create method in heroService.
613 | 
614 |     create(name: string): Promise<Hero> {
615 |         return this.http
616 |             .post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers})
617 |             .toPromise()
618 |             .then(res => res.json().data)
619 |             .catch(this.handleError);
620 |     }
621 | 
622 | Delete is the last part of CRUD we are going to implement. Add this delete button after the hero name in heroes.component.html and styling to heroes.component.css
623 | 
624 |     <button class="delete"
625 |         (click)="delete(hero); $event.stopPropagation()">x</button>
626 | 
627 |     button.delete {
628 |         float:right;
629 |         margin-top: 2px;
630 |         margin-right: .8em;
631 |         background-color: gray !important;
632 |         color:white;
633 |     }
634 | 
635 | The logic of delete method is implemented in heroes.component.ts
636 | 
637 |     delete(hero: Hero): void {
638 |         this.heroService
639 |             .delete(hero.id)
640 |             .then(() => {
641 |                 this.heroes = this.heroes.filter(h => h !== hero);
642 |                 if (this.selectedHero === hero) { this.selectedHero = null; }
643 |             });
644 |         }
645 | 
646 | Finally, we update the hero service with a delete method
647 | 
648 |     delete(id: number): Promise<void> {
649 |         const url = `${this.heroesUrl}/${id}`;
650 |         return this.http.delete(url, {headers: this.headers})
651 |             .toPromise()
652 |             .then(() => null)
653 |             .catch(this.handleError);
654 |     }
655 | 
656 | ## HTTP-Observables
657 | ---------------------
658 | 
659 | Observables are HTTP response objects, just another way to get data from our API.
660 | 
661 | Let's add the hero search functionallity using observables. First, generate new hero-search service with angular-cli with: ng g service services/hero-search and add this service to the providers array in app.module.ts
662 | 
663 |     import { Injectable } from '@angular/core';
664 |     import { Http, Response } from '@angular/http';
665 |     import { Observable } from 'rxjs';
666 |     import { Hero } from '../models/hero';
667 | 
668 |     @Injectable()
669 |     export class HeroSearchService {
670 |         constructor(private http: Http) {}
671 |         search(term: string): Observable<Hero[]> {
672 |             return this.http
673 |                     .get(`app/heroes/?name=${term}`)
674 |                     .map((r: Response) => r.json().data as Hero[]);
675 |         }
676 |     }
677 | 
678 | Notice that now, with search method, we don't convert it to promise, but return a observable instead.
679 | 
680 | Now, lets generate a new component with: ng g component hero-search and copy below code to its .html file
681 | 
682 |     <div id="search-component">
683 |         <h4>Hero Search</h4>
684 |         <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
685 |         <div>
686 |             <div *ngFor="let hero of heroes | async"
687 |                 (click)="goToDetail(hero)" class="search-result" >
688 |             {{hero.name}}
689 |             </div>
690 |         </div>
691 |     </div>
692 | 
693 | Apply some styling to hero-search component (hero-search.component.css).
694 | 
695 |     .search-result{
696 |         border-bottom: 1px solid gray;
697 |         border-left: 1px solid gray;
698 |         border-right: 1px solid gray;
699 |         width:195px;
700 |         height: 20px;
701 |         padding: 5px;
702 |         background-color: white;
703 |         cursor: pointer;
704 |     }
705 | 
706 |     #search-box{
707 |         width: 200px;
708 |         height: 20px;
709 |     }
710 | 
711 | Add logic for search and goToDetail (hero-search.component.ts).
712 | 
713 |     import { Component, OnInit } from '@angular/core';
714 |     import { Router } from '@angular/router';
715 |     import { Observable } from 'rxjs/Observable';
716 |     import { Subject } from 'rxjs/Subject';
717 |     import { HeroSearchService } from '../services/hero-search.service';
718 |     import { Hero } from '../models/hero';
719 | 
720 |     @Component({
721 |         selector: 'app-hero-search',
722 |         templateUrl: './hero-search.component.html',
723 |         styleUrls: ['./hero-search.component.css']
724 |     })
725 |     export class HeroSearchComponent implements OnInit {
726 | 
727 |         heroes: Observable<Hero[]>;
728 |         private searchTerms = new Subject<string>();
729 | 
730 |         constructor(
731 |             private heroSearchService: HeroSearchService,
732 |             private router: Router) { }
733 | 
734 |         search(term: string): void {
735 |             this.searchTerms.next(term);
736 |         }
737 | 
738 |         ngOnInit(): void {
739 |             this.heroes = this.searchTerms
740 |             .debounceTime(300)        // wait for 300ms pause in events
741 |             .distinctUntilChanged()   // ignore if next search term is same as previous
742 |             .switchMap(term => term   // switch to new observable each time
743 |                 ? this.heroSearchService.search(term)
744 |                 : Observable.of<Hero[]>([]))
745 |             .catch(error => {
746 |                 console.log(error);
747 |                 return Observable.of<Hero[]>([]);
748 |             });
749 |         }
750 | 
751 |         goToDetail(hero: Hero): void {
752 |             let link = ['/detail', hero.id];
753 |             this.router.navigate(link);
754 |         }
755 |     }
756 | 
757 | 
758 | Add these rxjs operator import to the app.module.ts
759 | 
760 |     // Observable class extensions
761 |     import 'rxjs/add/observable/of';
762 |     import 'rxjs/add/observable/throw';
763 | 
764 |     // Observable operators
765 |     import 'rxjs/add/operator/catch';
766 |     import 'rxjs/add/operator/debounceTime';
767 |     import 'rxjs/add/operator/distinctUntilChanged';
768 |     import 'rxjs/add/operator/do';
769 |     import 'rxjs/add/operator/filter';
770 |     import 'rxjs/add/operator/map';
771 |     import 'rxjs/add/operator/switchMap';
772 | 
773 | The last part of our search is to add search component to the dashboard under the list of top 4 heroes.
774 | 
775 |     <app-hero-search></app-hero-search>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Angular TOH - Styling our app with Material2
 2 | 
 3 | [![Build Status](https://travis-ci.org/jamzi/Angular2Workshop-material2.svg?branch=master)](https://travis-ci.org/jamzi/Angular2Workshop-material2)
 4 | <p><a href="https://material2-angular2workshop.firebaseapp.com/">View App</a></p>
 5 | 
 6 | # Steps to install and run
 7 | * install [NodeJS](https://nodejs.org/en/)
 8 | * npm install -g @angular/cli
 9 | * git clone https://github.com/jamzi/Angular2Workshop-material2.git
10 | * npm install 
11 | * ng serve
12 | 


--------------------------------------------------------------------------------
/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |     ".read": "auth != null",
4 |     ".write": "auth != null"
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { HeroTutorialPage } from './app.po';
 2 | 
 3 | describe('hero-tutorial App', function() {
 4 |   let page: HeroTutorialPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new HeroTutorialPage();
 8 |   });
 9 | 
10 |   it('should display message saying app works', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toEqual('app works!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, element, by } from 'protractor';
 2 | 
 3 | export class HeroTutorialPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types":[
 8 |       "jasmine",
 9 |       "node"
10 |     ]
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
1 | {
2 |   "database": {
3 |     "rules": "database.rules.json"
4 |   },
5 |   "hosting": {
6 |     "public": "dist"
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/0.13/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular/cli'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular/cli/plugins/karma')
14 |     ],
15 |     client:{
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     files: [
19 |       { pattern: './src/test.ts', watched: false }
20 |     ],
21 |     preprocessors: {
22 |       './src/test.ts': ['@angular/cli']
23 |     },
24 |     mime: {
25 |       'text/x-typescript': ['ts','tsx']
26 |     },
27 |     coverageIstanbulReporter: {
28 |       reports: [ 'html', 'lcovonly' ],
29 |       fixWebpackSourcePaths: true
30 |     },
31 |     angularCli: {
32 |       environment: 'dev'
33 |     },
34 |     reporters: config.angularCli && config.angularCli.codeCoverage
35 |               ? ['progress', 'coverage-istanbul']
36 |               : ['progress', 'kjhtml'],
37 |     port: 9876,
38 |     colors: true,
39 |     logLevel: config.LOG_INFO,
40 |     autoWatch: true,
41 |     browsers: ['Chrome'],
42 |     singleRun: false
43 |   });
44 | };
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hero-tutorial-material",
 3 |   "version": "0.0.0",
 4 |   "license": "MIT",
 5 |   "angular-cli": {},
 6 |   "scripts": {
 7 |     "ng": "ng",
 8 |     "start": "ng serve",
 9 |     "build": "ng build",
10 |     "test": "ng test",
11 |     "lint": "ng lint",
12 |     "e2e": "ng e2e"
13 |   },
14 |   "private": true,
15 |   "dependencies": {
16 |     "@angular/animations": "^4.0.2",
17 |     "@angular/common": "^4.0.0",
18 |     "@angular/compiler": "^4.0.0",
19 |     "@angular/core": "^4.0.0",
20 |     "@angular/forms": "^4.0.0",
21 |     "@angular/http": "^4.0.0",
22 |     "@angular/material": "2.0.0-beta.3",
23 |     "@angular/platform-browser": "^4.0.0",
24 |     "@angular/platform-browser-dynamic": "^4.0.0",
25 |     "@angular/router": "^4.0.0",
26 |     "angular-in-memory-web-api": "0.3.1",
27 |     "core-js": "^2.4.1",
28 |     "rxjs": "^5.1.0",
29 |     "zone.js": "^0.8.4"
30 |   },
31 |   "devDependencies": {
32 |     "@angular/cli": "1.0.0",
33 |     "@angular/compiler-cli": "^4.0.0",
34 |     "@types/jasmine": "2.5.38",
35 |     "@types/node": "~6.0.60",
36 |     "codelyzer": "~2.0.0",
37 |     "jasmine-core": "~2.5.2",
38 |     "jasmine-spec-reporter": "~3.2.0",
39 |     "karma": "~1.4.1",
40 |     "karma-chrome-launcher": "~2.0.0",
41 |     "karma-cli": "~1.0.1",
42 |     "karma-jasmine": "~1.1.0",
43 |     "karma-jasmine-html-reporter": "^0.2.2",
44 |     "karma-coverage-istanbul-reporter": "^0.2.0",
45 |     "protractor": "~5.1.0",
46 |     "ts-node": "~2.0.0",
47 |     "tslint": "~4.5.0",
48 |     "typescript": "~2.2.0"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './e2e/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   beforeLaunch: function() {
23 |     require('ts-node').register({
24 |       project: 'e2e/tsconfig.e2e.json'
25 |     });
26 |   },
27 |   onPrepare() {
28 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
29 |   }
30 | };
31 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | .main-content {
2 |   padding: 32px;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <md-sidenav-container fullscreen>
 2 |     <md-sidenav #start>
 3 |         <md-nav-list>
 4 |             <a md-list-item routerLink="/dashboard">Dashboard</a>
 5 |             <a md-list-item routerLink="/heroes">Heroes</a>
 6 |         </md-nav-list>
 7 |         <hr>
 8 |         <button md-button (click)="start.close()">CLOSE</button>
 9 |     </md-sidenav>
10 |     <md-toolbar color="primary">
11 |         <button md-icon-button (click)="start.open()">
12 |             <md-icon>menu</md-icon>
13 |         </button> {{ title }}
14 |     </md-toolbar>
15 |     <div class="main-content">
16 |       <router-outlet></router-outlet>
17 |     </div>
18 | </md-sidenav-container>


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |     selector: 'app-root',
 5 |     templateUrl: './app.component.html',
 6 |     styleUrls: ['./app.component.css']
 7 | })
 8 | export class AppComponent {
 9 |     title = 'Tour of Heroes';
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | import { FormsModule } from '@angular/forms';
 4 | import { HttpModule } from '@angular/http';
 5 | import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 6 | import { RoutingModule } from './routing.module';
 7 | import { MaterialModule } from '@angular/material';
 8 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 9 | 
10 | import { AppComponent } from './app.component';
11 | import { HeroesComponent, SelectedHeroDialog } from './heroes/heroes.component';
12 | import { HeroDetailComponent } from './hero-detail/hero-detail.component';
13 | import { HeroSearchComponent } from './hero-search/hero-search.component';
14 | import { DashboardComponent } from './dashboard/dashboard.component';
15 | 
16 | import { HeroService } from './services/hero.service';
17 | import { InMemoryDataService } from './services/in-memory-data.service';
18 | 
19 | @NgModule({
20 |   declarations: [
21 |     AppComponent,
22 |     HeroesComponent,
23 |     HeroDetailComponent,
24 |     DashboardComponent,
25 |     HeroSearchComponent,
26 |     SelectedHeroDialog
27 |   ],
28 |   imports: [
29 |     BrowserModule,
30 |     FormsModule,
31 |     HttpModule,
32 |     RoutingModule,
33 |     InMemoryWebApiModule.forRoot(InMemoryDataService),
34 |     MaterialModule,
35 |     BrowserAnimationsModule
36 |   ],
37 |   providers: [HeroService],
38 |   bootstrap: [AppComponent],
39 |   entryComponents: [SelectedHeroDialog]
40 | })
41 | export class AppModule { }
42 | 


--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.css:
--------------------------------------------------------------------------------
1 | .dashboard-card {
2 |    width: 300px;
3 |    display: inline-block;
4 |    margin-right: 15px;
5 | }


--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.html:
--------------------------------------------------------------------------------
1 | <h3>Top Heroes</h3>
2 | <md-card class="dashboard-card" *ngFor="let hero of heroes" [routerLink]="['/detail', hero.id]">
3 |   <h4>{{ hero.name }}</h4>
4 | </md-card>
5 | <app-hero-search></app-hero-search>


--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { DashboardComponent } from './dashboard.component';
 4 | 
 5 | describe('DashboardComponent', () => {
 6 |   let component: DashboardComponent;
 7 |   let fixture: ComponentFixture<DashboardComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ DashboardComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(DashboardComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | import { Hero } from './../models/hero';
 4 | import { HeroService } from './../services/hero.service';
 5 | 
 6 | @Component({
 7 |   selector: 'app-dashboard',
 8 |   templateUrl: './dashboard.component.html',
 9 |   styleUrls: ['./dashboard.component.css']
10 | })
11 | export class DashboardComponent implements OnInit {
12 | 
13 |   heroes: Hero[] = [];
14 | 
15 |   constructor(private heroService: HeroService) { }
16 | 
17 |   ngOnInit() {
18 |     this.heroService.getHeroes().then((heroes) => {
19 |       this.heroes = heroes.slice(1, 5);
20 |     });
21 |   }
22 | 
23 | }
24 | 


--------------------------------------------------------------------------------
/src/app/hero-detail/hero-detail.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamzi/Angular2Workshop-material2/23cbddfee2cc87b2622603f98c12493f5d99f41b/src/app/hero-detail/hero-detail.component.css


--------------------------------------------------------------------------------
/src/app/hero-detail/hero-detail.component.html:
--------------------------------------------------------------------------------
 1 | <div *ngIf="hero">
 2 |   <md-input-container>
 3 |     <input mdInput placeholder="Id" [(ngModel)]="hero.id" disabled>
 4 |   </md-input-container>
 5 |   <md-input-container>
 6 |     <input mdInput placeholder="Name" [(ngModel)]="hero.name">
 7 |   </md-input-container>
 8 | </div>
 9 | <div>
10 |   <button md-raised-button color="primary" (click)="save()">Save</button>
11 |   <button md-raised-button (click)="goBack()">Back</button>
12 | </div>


--------------------------------------------------------------------------------
/src/app/hero-detail/hero-detail.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { By } from '@angular/platform-browser';
 4 | import { DebugElement } from '@angular/core';
 5 | 
 6 | import { HeroDetailComponent } from './hero-detail.component';
 7 | 
 8 | describe('HeroDetailComponent', () => {
 9 |   let component: HeroDetailComponent;
10 |   let fixture: ComponentFixture<HeroDetailComponent>;
11 | 
12 |   beforeEach(async(() => {
13 |     TestBed.configureTestingModule({
14 |       declarations: [ HeroDetailComponent ]
15 |     })
16 |     .compileComponents();
17 |   }));
18 | 
19 |   beforeEach(() => {
20 |     fixture = TestBed.createComponent(HeroDetailComponent);
21 |     component = fixture.componentInstance;
22 |     fixture.detectChanges();
23 |   });
24 | 
25 | /*  it('should create', () => {
26 |     expect(component).toBeTruthy();
27 |   });*/
28 | });
29 | 


--------------------------------------------------------------------------------
/src/app/hero-detail/hero-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input, OnInit } from '@angular/core';
 2 | import { ActivatedRoute, Params } from '@angular/router';
 3 | import { Location } from '@angular/common';
 4 | import 'rxjs/add/operator/switchMap';
 5 | 
 6 | import { Hero } from './../models/hero';
 7 | import { HeroService } from './../services/hero.service';
 8 | 
 9 | @Component({
10 |   selector: 'app-hero-detail',
11 |   templateUrl: './hero-detail.component.html',
12 |   styleUrls: ['./hero-detail.component.css']
13 | })
14 | export class HeroDetailComponent implements OnInit {
15 |   @Input()
16 |   hero: Hero;
17 | 
18 |   constructor(
19 |     private heroService: HeroService,
20 |     private route: ActivatedRoute,
21 |     private location: Location
22 |   ) { }
23 | 
24 |   ngOnInit() {
25 |     this.route.params.switchMap((params: Params) =>
26 |       this.heroService.getHero(+params['id'])).subscribe(hero => this.hero = hero);
27 |   }
28 | 
29 |   save(): void {
30 |     this.heroService.update(this.hero)
31 |       .then(() => this.goBack());
32 |   }
33 | 
34 |   goBack(): void {
35 |     this.location.back();
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/app/hero-search/hero-search.component.css:
--------------------------------------------------------------------------------
 1 | .search-result{
 2 |   border-bottom: 1px solid gray;
 3 |   border-left: 1px solid gray;
 4 |   border-right: 1px solid gray;
 5 |   width:195px;
 6 |   height: 20px;
 7 |   padding: 5px;
 8 |   background-color: white;
 9 |   cursor: pointer;
10 | }
11 | #search-box{
12 |   width: 200px;
13 |   height: 20px;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app/hero-search/hero-search.component.html:
--------------------------------------------------------------------------------
1 | <h3>Hero Search</h3>
2 | <md-input-container>
3 |   <input mdInput #searchBox placeholder="Search for hero name" (keyup)="search(searchBox.value)">
4 | </md-input-container>
5 | <md-nav-list>
6 |   <a md-list-item *ngFor="let hero of heroes | async" (click)="gotoDetail(hero)">
7 |     {{hero.name}}
8 |   </a>
9 | </md-nav-list>


--------------------------------------------------------------------------------
/src/app/hero-search/hero-search.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { By } from '@angular/platform-browser';
 4 | import { DebugElement } from '@angular/core';
 5 | 
 6 | import { HeroSearchComponent } from './hero-search.component';
 7 | 
 8 | describe('HeroSearchComponent', () => {
 9 |   let component: HeroSearchComponent;
10 |   let fixture: ComponentFixture<HeroSearchComponent>;
11 | 
12 |   beforeEach(async(() => {
13 |     TestBed.configureTestingModule({
14 |       declarations: [ HeroSearchComponent ]
15 |     })
16 |     .compileComponents();
17 |   }));
18 | 
19 |   beforeEach(() => {
20 |     fixture = TestBed.createComponent(HeroSearchComponent);
21 |     component = fixture.componentInstance;
22 |     fixture.detectChanges();
23 |   });
24 | 
25 |   it('should create', () => {
26 |     expect(component).toBeTruthy();
27 |   });
28 | });
29 | 


--------------------------------------------------------------------------------
/src/app/hero-search/hero-search.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Router } from '@angular/router';
 3 | import { Observable } from 'rxjs';
 4 | import { Subject } from 'rxjs/Subject';
 5 | 
 6 | import { Hero } from './../models/hero';
 7 | import { HeroSearchService } from './../services/hero-search/hero-search.service';
 8 | 
 9 | @Component({
10 |   selector: 'app-hero-search',
11 |   templateUrl: './hero-search.component.html',
12 |   styleUrls: ['./hero-search.component.css'],
13 |   providers: [HeroSearchService]
14 | })
15 | export class HeroSearchComponent implements OnInit {
16 | 
17 |   heroes: Observable<Hero[]>;
18 |   private searchTerms = new Subject<string>();
19 | 
20 |   constructor(private heroSearchService: HeroSearchService, private router: Router) { }
21 | 
22 |   ngOnInit(): void {
23 |     this.heroes = this.searchTerms
24 |       .debounceTime(300)
25 |       .distinctUntilChanged()
26 |       .switchMap(term => term ? this.heroSearchService.search(term) : Observable.of<Hero[]>([]))
27 |       .catch(error => {
28 |         console.log(error);
29 |         return Observable.of<Hero[]>([]);
30 |       });
31 |   }
32 | 
33 |   search(term: string): void {
34 |     this.searchTerms.next(term);
35 |   }
36 | 
37 |   gotoDetail(hero: Hero): void {
38 |     let link = ['/detail', hero.id];
39 |     this.router.navigate(link);
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/app/heroes/heroes.component.css:
--------------------------------------------------------------------------------
1 | .hero-card {
2 |     margin-top: 10px;
3 | }
4 | 
5 | .delete-hero {
6 |     float: right;
7 | }


--------------------------------------------------------------------------------
/src/app/heroes/heroes.component.html:
--------------------------------------------------------------------------------
 1 | <h2>My Heroes</h2>
 2 | <md-card>
 3 |   <md-input-container>
 4 |     <input mdInput #heroName placeholder="Hero name">
 5 |   </md-input-container>
 6 |   <button md-raised-button (click)="add(heroName.value); heroName.value=''">Add</button>
 7 | </md-card>
 8 | <md-nav-list>
 9 |   <a md-list-item *ngFor="let hero of heroes" (click)="onSelect(hero)">
10 |     <span md-line>{{ hero.name }}</span>
11 |     <button md-icon-button (click)="delete(hero)">
12 |       <md-icon>delete</md-icon>
13 |     </button>
14 |   </a>
15 | </md-nav-list>


--------------------------------------------------------------------------------
/src/app/heroes/heroes.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, async } from '@angular/core/testing';
 2 | import { HeroesComponent } from './heroes.component';
 3 | 
 4 | describe('App: HeroTutorial', () => {
 5 |   beforeEach(() => {
 6 |     TestBed.configureTestingModule({
 7 |       declarations: [
 8 |         HeroesComponent
 9 |       ],
10 |     });
11 |   });
12 | 
13 | /*  it('should create the app', async(() => {
14 |     let fixture = TestBed.createComponent(HeroesComponent);
15 |     let app = fixture.debugElement.componentInstance;
16 |     expect(app).toBeTruthy();
17 |   }));
18 | 
19 |   it(`should have as title 'app works!'`, async(() => {
20 |     let fixture = TestBed.createComponent(HeroesComponent);
21 |     let app = fixture.debugElement.componentInstance;
22 |     expect(app.title).toEqual('app works!');
23 |   }));
24 | 
25 |   it('should render title in a h1 tag', async(() => {
26 |     let fixture = TestBed.createComponent(HeroesComponent);
27 |     fixture.detectChanges();
28 |     let compiled = fixture.debugElement.nativeElement;
29 |     expect(compiled.querySelector('h1').textContent).toContain('app works!');
30 |   }));*/
31 | });
32 | 


--------------------------------------------------------------------------------
/src/app/heroes/heroes.component.ts:
--------------------------------------------------------------------------------
 1 | import { Router } from '@angular/router';
 2 | import { Component, OnInit, Input } from '@angular/core';
 3 | import { MdDialog, MdDialogRef } from '@angular/material';
 4 | 
 5 | import { Hero } from '../models/hero';
 6 | import { HeroService } from '../services/hero.service';
 7 | 
 8 | @Component({
 9 |   selector: 'app-heroes',
10 |   templateUrl: './heroes.component.html',
11 |   styleUrls: ['./heroes.component.css'],
12 |   providers: [HeroService]
13 | })
14 | export class HeroesComponent implements OnInit {
15 |   selectedHero: Hero;
16 |   heroes: Hero[];
17 |   dialogRef: MdDialogRef<SelectedHeroDialog>;
18 | 
19 |   constructor(
20 |     private heroService: HeroService,
21 |     private router: Router,
22 |     private dialog: MdDialog) { }
23 | 
24 |   ngOnInit(): void {
25 |     this.getHeroes();
26 |   }
27 | 
28 |   getHeroes(): void {
29 |     this.heroService.getHeroes().then(heroes =>
30 |       this.heroes = heroes);
31 |   }
32 | 
33 |   onSelect(hero: Hero): void {
34 |     this.dialogRef = this.dialog.open(SelectedHeroDialog);
35 |     this.dialogRef.componentInstance.selectedHero = hero;
36 |   }
37 | 
38 |   add(name: string): void {
39 |     name = name.trim();
40 |     if (!name) { return; }
41 |     this.heroService.create(name)
42 |       .then(hero => {
43 |         this.heroes.push(hero);
44 |         this.selectedHero = null;
45 |       });
46 |   }
47 | 
48 |   delete(hero: Hero): void {
49 |     this.heroService
50 |       .delete(hero.id)
51 |       .then(() => {
52 |         this.heroes = this.heroes.filter(h => h !== hero);
53 |         if (this.selectedHero === hero) {
54 |           this.selectedHero = null;
55 |         }
56 |       });
57 |   }
58 | 
59 |   gotoDetail(): void {
60 |     this.router.navigate(['/detail', this.selectedHero.id]);
61 |   }
62 | }
63 | 
64 | @Component({
65 |   selector: 'selected-hero-dialog',
66 |   template: `
67 |   <h2>
68 |     {{selectedHero.name | uppercase}} is my hero
69 |   </h2>
70 |   <button md-raised-button color="primary" (click)="gotoDetail()">View Details</button>
71 |   <button md-raised-button (click)="dialogRef.close()">Close dialog</button>`
72 | })
73 | export class SelectedHeroDialog {
74 |   selectedHero: any;
75 | 
76 |   constructor(
77 |     public dialogRef: MdDialogRef<SelectedHeroDialog>,
78 |     private router: Router) { }
79 | 
80 |   gotoDetail(): void {
81 |     this.dialogRef.close();
82 |     this.router.navigate(['/detail', this.selectedHero.id]);
83 |   }
84 | }


--------------------------------------------------------------------------------
/src/app/models/hero.ts:
--------------------------------------------------------------------------------
1 | export class Hero {
2 |     id: number;
3 |     name: string;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/app/routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule, Routes } from '@angular/router';
 3 | 
 4 | import { HeroesComponent } from './heroes/heroes.component';
 5 | import { DashboardComponent } from './dashboard/dashboard.component';
 6 | import { HeroDetailComponent } from './hero-detail/hero-detail.component';
 7 | 
 8 | const routes: Routes = [
 9 |   {
10 |     path: '',
11 |     component: DashboardComponent
12 |   },
13 |   {
14 |     path: 'heroes',
15 |     component: HeroesComponent
16 |   },
17 |   {
18 |     path: 'dashboard',
19 |     component: DashboardComponent
20 |   },
21 |   {
22 |     path: 'detail/:id',
23 |     component: HeroDetailComponent
24 |   }
25 | ];
26 | 
27 | @NgModule({
28 |   imports: [RouterModule.forRoot(routes)],
29 |   exports: [RouterModule]
30 | })
31 | export class RoutingModule { }
32 | 


--------------------------------------------------------------------------------
/src/app/services/hero-search/hero-search.service.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | 
 3 | import { TestBed, async, inject } from '@angular/core/testing';
 4 | import { HeroSearchService } from './hero-search.service';
 5 | 
 6 | describe('Service: HeroSearch', () => {
 7 |   beforeEach(() => {
 8 |     TestBed.configureTestingModule({
 9 |       providers: [HeroSearchService]
10 |     });
11 |   });
12 | 
13 |   it('should ...', inject([HeroSearchService], (service: HeroSearchService) => {
14 |     expect(service).toBeTruthy();
15 |   }));
16 | });
17 | 


--------------------------------------------------------------------------------
/src/app/services/hero-search/hero-search.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { Http, Response } from '@angular/http';
 3 | import { Observable } from 'rxjs';
 4 | 
 5 | import { Hero } from './../../models/hero';
 6 | 
 7 | @Injectable()
 8 | export class HeroSearchService {
 9 | 
10 |   constructor(private http: Http) { }
11 | 
12 |   search(term: string): Observable<Hero[]> {
13 |     return this.http
14 |       .get(`app/heroes/?name=${term}`)
15 |       .map((r: Response) => r.json().data as Hero[]);
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/app/services/hero.service.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | 
 3 | import { TestBed, async, inject } from '@angular/core/testing';
 4 | import { HeroService } from './hero.service';
 5 | 
 6 | describe('Service: Hero', () => {
 7 |   beforeEach(() => {
 8 |     TestBed.configureTestingModule({
 9 |       providers: [HeroService]
10 |     });
11 |   });
12 | 
13 | /*  it('should ...', inject([HeroService], (service: HeroService) => {
14 |     expect(service).toBeTruthy();
15 |   }));*/
16 | });
17 | 


--------------------------------------------------------------------------------
/src/app/services/hero.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { Http, Headers } from '@angular/http';
 3 | import 'rxjs/add/operator/toPromise';
 4 | 
 5 | import { Hero } from './../models/hero';
 6 | 
 7 | @Injectable()
 8 | export class HeroService {
 9 | 
10 |   private heroesUrl = 'app/heroes';
11 |   private headers = new Headers({ 'Content-Type': 'application/json' });
12 | 
13 |   constructor(private http: Http) { }
14 | 
15 |   getHeroes(): Promise<Hero[]> {
16 |     return this.http.get(this.heroesUrl)
17 |       .toPromise()
18 |       .then(response => response.json().data as Hero[])
19 |       .catch(this.handleError);
20 |   }
21 | 
22 |   getHero(id: number): Promise<Hero> {
23 |     return this.getHeroes().then(heroes => heroes.find(hero => hero.id === id));
24 |   }
25 | 
26 |   create(name: string): Promise<Hero> {
27 |     return this.http
28 |       .post(this.heroesUrl, JSON.stringify({ name: name }), { headers: this.headers })
29 |       .toPromise()
30 |       .then(res => res.json().data)
31 |       .catch(this.handleError);
32 |   }
33 | 
34 |   update(hero: Hero): Promise<Hero> {
35 |     const url = `${this.heroesUrl}/${hero.id}`;
36 |     return this.http.put(url, JSON.stringify(hero), { headers: this.headers })
37 |       .toPromise()
38 |       .then(() => hero)
39 |       .catch(this.handleError);
40 |   }
41 | 
42 |   delete(id: number): Promise<void> {
43 |     const url = `${this.heroesUrl}/${id}`;
44 |     return this.http.delete(url, { headers: this.headers })
45 |       .toPromise()
46 |       .then(() => null)
47 |       .catch(this.handleError);
48 |   }
49 | 
50 |   private handleError(error: any): Promise<any> {
51 |     console.error('An error occurred', error); // for demo purposes only
52 |     return Promise.reject(error.message || error);
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/app/services/in-memory-data.service.ts:
--------------------------------------------------------------------------------
 1 | import { InMemoryDbService } from 'angular-in-memory-web-api';
 2 | export class InMemoryDataService implements InMemoryDbService {
 3 |   createDb() {
 4 |     let heroes = [
 5 |       {id: 11, name: 'Mrs. Nice'},
 6 |       {id: 12, name: 'Narco'},
 7 |       {id: 13, name: 'Bombasto'},
 8 |       {id: 14, name: 'Celeritas'},
 9 |       {id: 15, name: 'Magneta'},
10 |       {id: 16, name: 'RubberMan'},
11 |       {id: 17, name: 'Dynama'},
12 |       {id: 18, name: 'Dr IQ'},
13 |       {id: 19, name: 'Magma'},
14 |       {id: 20, name: 'Tornado'}
15 |     ];
16 |     return {heroes};
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamzi/Angular2Workshop-material2/23cbddfee2cc87b2622603f98c12493f5d99f41b/src/assets/.gitkeep


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `angular-cli.json`.
5 | 
6 | export const environment = {
7 |   production: false
8 | };
9 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamzi/Angular2Workshop-material2/23cbddfee2cc87b2622603f98c12493f5d99f41b/src/favicon.ico


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>HeroTutorial</title>
 7 |   <base href="/">
 8 | 
 9 |   <meta name="viewport" content="width=device-width, initial-scale=1">
10 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
11 |   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
12 |   <link href="../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" rel="stylesheet">
13 | </head>
14 | 
15 | <body>
16 |   <app-root>Loading...</app-root>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule);
12 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/set';
35 | 
36 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
37 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
38 | 
39 | /** IE10 and IE11 requires the following to support `@angular/animation`. */
40 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
41 | 
42 | 
43 | /** Evergreen browsers require these. **/
44 | import 'core-js/es6/reflect';
45 | import 'core-js/es7/reflect';
46 | 
47 | 
48 | /** ALL Firefox browsers require the following to support `@angular/animation`. **/
49 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
50 | 
51 | 
52 | 
53 | /***************************************************************************************************
54 |  * Zone JS is required by Angular itself.
55 |  */
56 | import 'zone.js/dist/zone';  // Included with Angular CLI.
57 | 
58 | 
59 | 
60 | /***************************************************************************************************
61 |  * APPLICATION IMPORTS
62 |  */
63 | 
64 | /**
65 |  * Date, currency, decimal and percent pipes.
66 |  * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
67 |  */
68 | // import 'intl';  // Run `npm install --save intl`.
69 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 |   font-family: Roboto, 'Helvetica Neue', sans-serif;
3 | }


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/long-stack-trace-zone';
 4 | import 'zone.js/dist/proxy.js';
 5 | import 'zone.js/dist/sync-test';
 6 | import 'zone.js/dist/jasmine-patch';
 7 | import 'zone.js/dist/async-test';
 8 | import 'zone.js/dist/fake-async-test';
 9 | import { getTestBed } from '@angular/core/testing';
10 | import {
11 |   BrowserDynamicTestingModule,
12 |   platformBrowserDynamicTesting
13 | } from '@angular/platform-browser-dynamic/testing';
14 | 
15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
16 | declare var __karma__: any;
17 | declare var require: any;
18 | 
19 | // Prevent Karma from running prematurely.
20 | __karma__.loaded = function () {};
21 | 
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 |   BrowserDynamicTestingModule,
25 |   platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | // Finally, start Karma to run the tests.
32 | __karma__.start();
33 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "module": "es2015",
 6 |     "baseUrl": "",
 7 |     "types": []
 8 |   },
 9 |   "exclude": [
10 |     "test.ts",
11 |     "**/*.spec.ts"
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "baseUrl": "",
 8 |     "types": [
 9 |       "jasmine",
10 |       "node"
11 |     ]
12 |   },
13 |   "files": [
14 |     "test.ts"
15 |   ],
16 |   "include": [
17 |     "**/*.spec.ts",
18 |     "**/*.d.ts"
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 |   id: string;
5 | }
6 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "outDir": "./dist/out-tsc",
 5 |     "baseUrl": "src",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "moduleResolution": "node",
 9 |     "emitDecoratorMetadata": true,
10 |     "experimentalDecorators": true,
11 |     "target": "es5",
12 |     "typeRoots": [
13 |       "node_modules/@types"
14 |     ],
15 |     "lib": [
16 |       "es2016",
17 |       "dom"
18 |     ]
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "callable-types": true,
  7 |     "class-name": true,
  8 |     "comment-format": [
  9 |       true,
 10 |       "check-space"
 11 |     ],
 12 |     "curly": true,
 13 |     "eofline": true,
 14 |     "forin": true,
 15 |     "import-blacklist": [true, "rxjs"],
 16 |     "import-spacing": true,
 17 |     "indent": [
 18 |       true,
 19 |       "spaces"
 20 |     ],
 21 |     "interface-over-type-literal": true,
 22 |     "label-position": true,
 23 |     "max-line-length": [
 24 |       true,
 25 |       140
 26 |     ],
 27 |     "member-access": false,
 28 |     "member-ordering": [
 29 |       true,
 30 |       "static-before-instance",
 31 |       "variables-before-functions"
 32 |     ],
 33 |     "no-arg": true,
 34 |     "no-bitwise": true,
 35 |     "no-console": [
 36 |       true,
 37 |       "debug",
 38 |       "info",
 39 |       "time",
 40 |       "timeEnd",
 41 |       "trace"
 42 |     ],
 43 |     "no-construct": true,
 44 |     "no-debugger": true,
 45 |     "no-duplicate-variable": true,
 46 |     "no-empty": false,
 47 |     "no-empty-interface": true,
 48 |     "no-eval": true,
 49 |     "no-inferrable-types": [true, "ignore-params"],
 50 |     "no-shadowed-variable": true,
 51 |     "no-string-literal": false,
 52 |     "no-string-throw": true,
 53 |     "no-switch-case-fall-through": true,
 54 |     "no-trailing-whitespace": true,
 55 |     "no-unused-expression": true,
 56 |     "no-use-before-declare": true,
 57 |     "no-var-keyword": true,
 58 |     "object-literal-sort-keys": false,
 59 |     "one-line": [
 60 |       true,
 61 |       "check-open-brace",
 62 |       "check-catch",
 63 |       "check-else",
 64 |       "check-whitespace"
 65 |     ],
 66 |     "prefer-const": true,
 67 |     "quotemark": [
 68 |       true,
 69 |       "single"
 70 |     ],
 71 |     "radix": true,
 72 |     "semicolon": [
 73 |       "always"
 74 |     ],
 75 |     "triple-equals": [
 76 |       true,
 77 |       "allow-null-check"
 78 |     ],
 79 |     "typedef-whitespace": [
 80 |       true,
 81 |       {
 82 |         "call-signature": "nospace",
 83 |         "index-signature": "nospace",
 84 |         "parameter": "nospace",
 85 |         "property-declaration": "nospace",
 86 |         "variable-declaration": "nospace"
 87 |       }
 88 |     ],
 89 |     "typeof-compare": true,
 90 |     "unified-signatures": true,
 91 |     "variable-name": false,
 92 |     "whitespace": [
 93 |       true,
 94 |       "check-branch",
 95 |       "check-decl",
 96 |       "check-operator",
 97 |       "check-separator",
 98 |       "check-type"
 99 |     ],
100 | 
101 |     "directive-selector": [true, "attribute", "app", "camelCase"],
102 |     "component-selector": [true, "element", "app", "kebab-case"],
103 |     "use-input-property-decorator": true,
104 |     "use-output-property-decorator": true,
105 |     "use-host-property-decorator": true,
106 |     "no-input-rename": true,
107 |     "no-output-rename": true,
108 |     "use-life-cycle-interface": true,
109 |     "use-pipe-transform-interface": true,
110 |     "component-class-suffix": true,
111 |     "directive-class-suffix": true,
112 |     "no-access-missing-member": true,
113 |     "templates-use-public": true,
114 |     "invoke-injectable": true
115 |   }
116 | }
117 | 


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