eggheadio-projects/angular2-lessons: Angular 2 Lessons

# Created by .ignore support plugin (hsz.mobi)
### JetBrains template
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839

# User-specific stuff:
.idea/

## File-based project format:
*.iws

## Plugin-specific files:

# IntelliJ
/out/

### Node template
# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules
jspm_packages

# Optional npm cache directory
.npm

# Optional REPL history
.node_repl_history

import {Component} from "@angular/core";
@Component({
    selector:'app',
    styles:[`
a{
    text-decoration: none;
}

a.active{
    font-weight: bold;
}
`],
    template: `
<nav>
    <a *ngFor="let nav of navs" 
        [routerLink]="nav.url" 
        routerLinkActive="active"
        [routerLinkActiveOptions]="{exact:true}"
        >
        {{nav.content}}
    </a>
</nav>
<router-outlet></router-outlet>
`
})
export class AppComponent{
    navs = [
        {url: "", content: "Home"},
        {url: "contacts", content: "Contacts"},
        {url: "contacts/1", content: "One"},
    ];
}

import {BrowserModule} from "@angular/platform-browser";
import {AppComponent} from "./app.component";
import {NgModule} from "@angular/core";
import appRoutes from "./app.routes";
import {APP_BASE_HREF} from "@angular/common";

@NgModule({
    imports:[BrowserModule, appRoutes],
    declarations:[AppComponent],
    bootstrap:[AppComponent]
})
export class AppModule{}

import {RouterModule} from "@angular/router";

const routes = [
    {path: '', loadChildren: 'app/home/home.module'},
    {path: 'contacts', loadChildren: 'app/contacts/contacts.module'}
];


export default RouterModule.forRoot(routes);

import { Component } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import "rxjs/add/operator/map";
import "rxjs/add/operator/switchMap";
import { Http } from "@angular/http";
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Component({
    template: `
<h2>{{(contact$ | async).name}}</h2>
<img [src]="(contact$ | async).image">
`
})
export class ContactComponent {
    contact$ = new BehaviorSubject({name: 'Loading...', image: ''});

    constructor(private route: ActivatedRoute, private http: Http) {
        const api = 'https://starwars-json-server-ewtdxbyfdz.now.sh/';

        route.params
            .map((p: any) => p.id)
            .switchMap(id => http.get(api + 'people/' + id)
                .map(res => res.json())
                .map(contact => Object.assign({}, contact, {image: api + contact.image}))
            )
            .subscribe(this.contact$);
    }
}

import {Component} from "@angular/core";
import {Http} from "@angular/http";
import "rxjs/add/operator/map";
@Component({
    template:`
<div *ngFor="let contact of contacts$ | async">
<a [routerLink]="contact.id">
    {{contact.name}}
</a>
</div>
`
})
export class ContactsComponent{
    contacts$;

    constructor(private http:Http){
        this.contacts$ = http.get('https://starwars-json-server-ewtdxbyfdz.now.sh/people')
            .map(res => res.json());
    }
}

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {ContactsComponent} from "./contacts.component";
import contactsRoutes from "./contacts.routes";
import {ContactComponent} from "./contact.component";
import {HttpModule} from "@angular/http";
@NgModule({
    imports:[CommonModule, contactsRoutes, HttpModule],
    declarations: [ContactsComponent, ContactComponent]
})
export default class ContactsModule{}

import {ContactsComponent} from "./contacts.component";
import {RouterModule} from "@angular/router";
import {ContactComponent} from "./contact.component";
const routes = [
    {path: '', component: ContactsComponent},
    {path: ':id', component: ContactComponent}
];

export default RouterModule.forChild(routes);

import {Component} from "@angular/core";
@Component({
    template: `
I'm a home component
`
})
export class HomeComponent{}

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {HomeComponent} from "./home.component";
import homeRoutes from "./home.routes";

@NgModule({
    imports:[CommonModule, homeRoutes],
    declarations: [HomeComponent]
})
export default class HomeModule{}

import {RouterModule} from "@angular/router";
import {HomeComponent} from "./home.component";
const routes = [
    {path: '', component: HomeComponent}
];


export default RouterModule.forChild(routes);

import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
import {AppModule} from "./app.module";


platformBrowserDynamic().bootstrapModule(AppModule);

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Lessons</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script>
      var path = document.location.href.includes('plnkr')
              ? './'
              : '/';
      document.write('<base href="' + path + '"/>');
    </script>


    <link rel="stylesheet" href="styles.css">




    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <body>
    <app>Loading...</app>
  </body>
</html>

{
  "name": "angular2-lessons",
  "version": "1.0.1",
  "description": "Angular 2 Lessons",
  "scripts": {
    "start": "echo 'These node packages are only for tooling/IDE. This repo is meant for online demos'",
    "live-server": "live-server --entry-file=index.html"
  },
  "contributors": [
    "John Lindquist"
  ],
  "license": "MIT",
  "dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@angular/router": "4.1.3",
    "@angular/upgrade": "4.1.3",

    "systemjs": "0.20.12",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.4.0",
    "zone.js": "^0.8.11",

    "angular2-in-memory-web-api": "0.0.21",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "typescript": "^2.3.3",
    "typings": "^2.1.1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/johnlindquist/angular2-lessons.git"
  },
  "bugs": {
    "url": "https://github.com/johnlindquist/angular2-lessons/issues"
  },
  "homepage": "https://github.com/johnlindquist/angular2-lessons#readme"
}

:root{
  font-family: Arial;
}

/**
 * PLUNKER VERSION
 * (based on systemjs.config.js in angular.io)
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
        transpiler: 'ts',
        typescriptOptions: {
            tsconfig: true
        },
        meta: {
            'typescript': {
                "exports": "ts"
            }
        },
        paths: {
            // paths serve as alias
            'npm:': 'https://unpkg.com/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            // angular testing umd bundles
            '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
            '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
            '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
            '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
            '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
            '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
            '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
            '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',

            // other libraries
            'rxjs':                       'npm:rxjs',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
            'ts':                         'npm:plugin-typescript@4.0.10/lib/plugin.js',
            'typescript':                 'npm:typescript@1.9.0-dev.20160409/lib/typescript.js',

        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.ts',
                defaultExtension: 'ts'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular2-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);


/*
 Copyright 2016 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license
 */

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}