#### Table of Contents

1. package.json
2. main.ts
3. news-app2.component.ts
4. news-app2.component.html
5. shortenHtml.pipe.ts
6. news.json
7. newsModel.ts
8. news-data-service.service.ts
9. news-tags.component.ts
10. news-tags.component.html
11. news-summary.component.ts
12. news-summary.component.html
13. news-display.component.ts
14. news-display.component.html
15. news-detail.component.ts
16. news-detail.component.html
17. Where to get this code

This blog demo how to build angualr2 master/detail page, following is the
template page for now.

![](http:/res.cloudinary.com/dmwrakaup/image/upload/v1468912664/kfpdfisrqixymolvz9cu.png)

![](http:/res.cloudinary.com/dmwrakaup/image/upload/v1468912664/u7e7hxsrsyjgx3oo2mus.png)

**Anything under here will code which make above things happen.**

### package.json

```
{
        "name": "news-app2",
        "version": "0.0.0",
        "license": "MIT",
        "angular-cli": {},
        "scripts": {
          "start": "ng server",
          "postinstall": "typings install",
          "pree2e": "webdriver-manager update",
          "e2e": "protractor"
        },
        "private": true,
        "dependencies": {
          "@angular/common": "2.0.0-rc.4",
          "@angular/compiler": "2.0.0-rc.4",
          "@angular/core": "2.0.0-rc.4",
          "@angular/forms": "^0.2.0",
          "@angular/http": "2.0.0-rc.4",
          "@angular/platform-browser": "2.0.0-rc.4",
          "@angular/platform-browser-dynamic": "2.0.0-rc.4",
          "@angular/router": "3.0.0-beta.2",
          "es6-shim": "^0.35.0",
          "ng2-bootstrap": "^1.0.23",
          "reflect-metadata": "0.1.3",
          "rxjs": "5.0.0-beta.6",
          "systemjs": "0.19.26",
          "zone.js": "^0.6.12"
        },
        "devDependencies": {
          "angular-cli": "0.0.*",
          "clang-format": "^1.0.35",
          "codelyzer": "0.0.14",
          "ember-cli-inject-live-reload": "^1.4.0",
          "jasmine-core": "^2.4.1",
          "jasmine-spec-reporter": "^2.4.0",
          "karma": "^0.13.15",
          "karma-chrome-launcher": "^0.2.3",
          "karma-jasmine": "^0.3.8",
          "protractor": "^3.3.0",
          "ts-node": "^0.5.5",
          "tslint": "^3.6.0",
          "typescript": "^1.8.10",
          "typings": "^0.8.1"
        }
      }
```

### main.ts

```
import {
        bootstrap
      } from '@angular/platform-browser-dynamic';
      import {
        enableProdMode
      } from '@angular/core';
      import {
        NewsApp2AppComponent,
        environment
      } from './app/';
      import {
        provideRouter,
        RouterConfig
      } from '@angular/router';
      import {
        LocationStrategy,
        HashLocationStrategy,
        PathLocationStrategy
      } from '@angular/common';
      import {
        NewsDisplayComponent,
        NewsDetailComponent
      } from './app/news-display/';
      import {
        HTTP_PROVIDERS
      } from '@angular/http';
      if (environment.production) {
        enableProdMode();
      }
      const routes: RouterConfig = [{
        path: '',
        redirectTo: 'news',
        pathMatch: 'full'
      }, {
        path: 'news',
        component: NewsDisplayComponent
      }, {
        path: 'detail/:id',
        component: NewsDetailComponent
      }, ];
      bootstrap(NewsApp2AppComponent, [provideRouter(routes), HTTP_PROVIDERS, {
        provide: LocationStrategy,
        useClass: PathLocationStrategy
      }]).catch(error => {
        console.error(error);
      });
```

### news-app2.component.ts

```
import {
        Component
      } from '@angular/core';
      import {
        ROUTER_DIRECTIVES
      } from '@angular/router';
      @Component({
        moduleId: module.id,
        selector: 'news-app2-app',
        templateUrl: 'news-app2.component.html',
        styleUrls: ['news-app2.component.css'],
        directives: [ROUTER_DIRECTIVES]
      }) export class NewsApp2AppComponent {
        title = 'TECH News App';
        constructor() {}
      }
```

### news-app2.component.html

```
  {{title}}

```

### shortenHtml.pipe.ts

```
import {
        Pipe,
        PipeTransform
      } from '@angular/core';
      @Pipe({
          name: 'shortenHtml'
        }) export class ShortenHtmlPipe implements PipeTransform {
          transform(value: string, args: number, endString: string) {
              let length = args || 100;
              let _endString = endString || "...";
              if (args !== undefined) {
                length = args;
              }
              var parser = new DOMParser(),
                doc = parser.parseFromString(value, "text/html");
              if (Array.from(doc.body.childNodes).some(node => node.nodeType === 1)) { // is html            value = doc.getElementsByTagName("p")[0].textContent;        }        let resValue;        if (value.length > length) {            resValue = value.substring(0, args);        }        else {            resValue = value;        }        return resValue + _endString;    }}
```

### news.json

```
{    "Id": "aba3702c-2a8c-460e-898b-002389ecdd14",    "Title": "20 top examples of JavaScript",    "SlugTitle": "20-top-examples-of-javascript",    "Link": "https://javascript.com/news/20-top-examples-of-javascript-vybb-er2e",    "Description": "JavaScript creates platforms that can engage a user and ensure that they remember your site and continue to revisit. It can be used to create games, APIs, scrolling abilities and much more.",    "PublishDate": "0001-01-01T00:00:00",    "Tags": [      "Javascript"    ],    "Category": "Javascript"  },  {    "Id": "0bc93851-7464-44cb-8aba-016f1c7eca7c",    "Title": "Diagnostics",    "SlugTitle": "diagnostics",    "Link": "http://docs.asp.net/en/latest/fundamentals/diagnostics.html",    "Description": "   Steve Smith    ASP.NET Core includes a number of new features that can assist with diagnosing problems.     Sections      The developer error page     The welcome page     Glimpse     Logging      ...",    "PublishDate": "2016-06-01T00:00:00",    "Tags": [      "ASP.NET Core",      "ASP.NET"    ],    "Category": "ASP.NET"  },  {    "Id": "ee6f4d70-d47c-4f69-a613-021b0d13da4b",    "Title": "Angular 2 with ES6: How to Set It Up",    "SlugTitle": "angular-2-with-es6-how-to-set-it-up",    "Link": "https://javascript.com/news/angular-2-with-es6-how-to-set-it-up-eyautd2me",    "Description": "Want to start playing with Angular 2, but don't know where to begin? So many new libraries and build tools! Don't worry. We're going to take the easy route, and get a skeleton app up in about 2 minutes.",    "PublishDate": "0001-01-01T00:00:00",    "Tags": [      "Javascript",      "ES6",      "Angular2"    ],    "Category": "Javascript"  },  {    "Id": "dc97108d-a9b7-4952-a0c3-02a732853d2a",    "Title": "JSConf 2015 Notes",    "SlugTitle": "jsconf-2015-notes",    "Link": "https://javascript.com/news/jsconf-2015-notes-ejue6dbs",    "Description": "Donato Borrello has published his notes from JSConf 2015 for each session he has attended. If you'd like to see an overview of some interesting talks, check them out.",    "PublishDate": "0001-01-01T00:00:00",    "Tags": [      "Javascript",      "JSConf 2015"    ],    "Category": "Javascript"  },  {    "Id": "c98c445d-be18-48ff-a011-02c72099330b",    "Title": "How to Learn ES6",    "SlugTitle": "how-to-learn-es6",    "Link": "https://javascript.com/news/how-to-learn-es6-vjpsytjol",    "Description": "We ran a survey at about the time the standard became official in June 2015 to see how many people were using ES6. Nearly half of respondents already were. ES6 includes lots of great enhancements that will make you & your team more effective.\\n\\nIf you haven&rsquo;t learned ES6 yet, the time is now.",    "PublishDate": "0001-01-01T00:00:00",    "Tags": [      "ES6"    ],    "Category": "Javascript"  },  {    "Id": "8e13f87d-c47e-4ac7-a78a-02df59bb4cfe",    "Title": "Building a Full Featured Translation Service Using ES6",    "SlugTitle": "building-a-full-featured-translation-service-using-es6",    "Link": "https://javascript.com/news/building-a-full-featured-translation-service-using-es6-4yhvpzgal",    "Description": "Step by step tutorial of building a translation module that supports new languages fetching, string interpolation and pluralization (using ES6).",    "PublishDate": "0001-01-01T00:00:00",    "Tags": [      "ES6"    ],    "Category": "Javascript"  },  {    "Id": "3e0e8d16-5a5c-4928-9edc-03363476d805",    "Title": "Working with Multiple Environments",    "SlugTitle": "working-with-multiple-environments",    "Link": "http://docs.asp.net/en/latest/fundamentals/environments.html",    "Description": "   ASP.NET Core introduces improved support for controlling application behavior across multiple environments, such as development, staging, and production. Environment variables are used to indicate ...",    "PublishDate": "2016-05-16T00:00:00",    "Tags": [      "ASP.NET",      "ASP.NET Core"    ],    "Category": "ASP.NET"  },  {    "Id": "885a2736-fdba-4a69-8bce-03ca3e8cca30",    "Title": "Gentest - Generative testing for JavaScript",    "SlugTitle": "gentest-generative-testing-for-javascript",    "Link": "https://javascript.com/news/gentest-generative-testing-for-javascript-eyge8cqs",    "Description": "Generative testing for JavaScript. Save time and catch more bugs by letting the computer write test cases for you. WIP",    "PublishDate": "0001-01-01T00:00:00",    "Tags": [],    "Category": "Javascript"  },  {    "Id": "960420d2-7eba-4459-a94f-04941482828a",    "Title": ".NET Core 1.0 RC2 - Upgrading from previous versions",    "SlugTitle": "net-core-10-rc2-upgrading-from-previous-versions",    "Link": "http://feeds.hanselman.com/~/154919056/0/scotthanselman~NET-Core-RC-Upgrading-from-previous-versions.aspx",    "Description": "

   [![.NET Core at http://dot.net](http://www.hanselman.com/blog/content/binary/Windows-Live-Writer/5fd0ab1c3362_AAC8/image_81788b76-8729-4954-9565-f30e4612cd2c.png)](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~dot.net).NET Core RC2 is out, it's open source, and it's on multiple platforms. I'm particularly proud of the cool vanity domain we got for it. [http://dot.net](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~dot.net). ;) It makes me smile.


   Here's the important blog posts to check out:



      - [Announcing .NET Core RC2 and .NET Core SDK Preview 1](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~https://na01.safelinks.protection.outlook.com/?url=https%3a%2f%2fblogs.msdn.microsoft.com%2fdotnet%2f2016%2f05%2f16%2fannouncing-net-core-rc2%2f&data=01%7c01%7cDaniel.Roth%40microsoft.com%7ca3021be681b349d8cd2f08d37dbb24f8%7c72f988bf86f141af91ab2d7cd011db47%7c1&sdata=sfjYD2gdccE1SNZVCUK1zQcU%2fBv%2bnLFBBkn7WlhRslA%3d)

      - [Announcing ASP.NET Core RC2](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~https://na01.safelinks.protection.outlook.com/?url=https%3a%2f%2fblogs.msdn.microsoft.com%2fwebdev%2f2016%2f05%2f16%2fannouncing-asp-net-core-rc2%2f&data=01%7c01%7cDaniel.Roth%40microsoft.com%7ca3021be681b349d8cd2f08d37dbb24f8%7c72f988bf86f141af91ab2d7cd011db47%7c1&sdata=IrfXwCuiE8mWZaWLHaXc%2fTPzYlijGmsYjVKTJl%2fbKYw%3d)


         - [Announcing Updated Web Development Tools for ASP.NET Core RC2](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~https://na01.safelinks.protection.outlook.com/?url=https%3a%2f%2fblogs.msdn.microsoft.com%2fvisualstudio%2f2016%2f05%2f16%2fannouncing-updated-web-development-tools-for-asp-net-core-rc2%2f&data=01%7c01%7cDaniel.Roth%40microsoft.com%7ca3021be681b349d8cd2f08d37dbb24f8%7c72f988bf86f141af91ab2d7cd011db47%7c1&sdata=UlQGNrdiT2FtooN9kSnkgScf3ZU8LqwzBH28o1M%2bhMY%3d)

         


      [Announcing Entity Framework Core RC2](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~https://blogs.msdn.microsoft.com/dotnet/2016/05/16/announcing-entity-framework-core-rc2/)
      [Docker and .NET Core RC2](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~Announcing Updated Web Development Tools for ASP.NET Core RC2)


            - [Visual Studio Tools for Docker](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~https://visualstudiogallery.msdn.microsoft.com/0f5b2caa-ea00-41c8-b8a2-058c7da0b3e4)





   Head over to [http://dot.net](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~dot.net) and check it out. A great aspect of .NET Core is that everything it does is side-by-side. You can work with it without affecting your existing systems. Be sure also explore the [complete .NET Downloads Page](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~https://www.microsoft.com/net/download) for all the manual downloads as well as SHA hashes


   > The best way to develop with .NET Core on Windows is to download the [Visual Studio official MSI Installer](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~https://go.microsoft.com/fwlink/?LinkId=798481) and the latest [NuGet Manager extension for Visual Studio](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~https://dist.nuget.org/visualstudio-2015-vsix/v3.5.0-beta/NuGet.Tools.vsix). If you don't have Visual Studio already, you can download [Visual Studio Community 2015](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~https://www.visualstudio.com/products/visual-studio-community-vs) for free.


   We'll have documentation and insights on how to moving from ASP.NET 4.x over to ASP.NET Core 1.0 soon, but for now I've collected these resources for folks who are upgrading from previous versions of .NET Core and ASP.NET Core (the framework formerly new as ASP.NET 5).



      - [Migrating from DNX to .NET Core](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~dotnet.github.io/docs/core-concepts/dnx-migration.html)
      [Migrating from ASP.NET 5 RC1 to ASP.NET Core 1.0 RC2](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~https://docs.asp.net/en/latest/migration/rc1-to-rc2.html)
      [Migrating your Entity Framework Code from RC1 to RC2](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~https://docs.efproject.net/en/latest/miscellaneous/rc1-rc2-upgrade.html)



   Enjoy!



---


   **Sponsor:** Build servers are great at compiling code and running tests, but not so great at deployment. When you find yourself knee-deep in custom scripts trying to make your build server do something it wasn't meant to, [give Octopus Deploy a try](http://feeds.hanselman.com/~/t/0/0/scotthanselman/~bit.ly/1W4LRAn).


   \\n


---


   &copy; 2016 Scott Hanselman. All rights reserved. \\n


![](http://feeds.hanselman.com/~/i/154919056/0/scotthanselman)

\\n
[![](http://assets.feedblitz.com/i/fblike20.png)](http://feeds.hanselman.com/_/28/154919056/scotthanselman) [![](http://assets.feedblitz.com/i/googleplus20.png)](http://feeds.hanselman.com/_/30/154919056/scotthanselman) [![](http://assets.feedblitz.com/i/twitter20.png)](http://feeds.hanselman.com/_/24/154919056/scotthanselman) [![](http://assets.feedblitz.com/i/email20.png)](http://feeds.hanselman.com/_/19/154919056/scotthanselman) [![](http://assets.feedblitz.com/i/rss20.png)](http://feeds.hanselman.com/_/20/154919056/scotthanselman)
",    "PublishDate": "2016-05-19T12:35:48",    "Tags": [],    "Category": "  }]
```

### newsModel.ts

```
export class NewsModel {
        Id: string;
        TItle: string;
        SlugTitle: string;
        Link: string;
        Description: string;
      }
```

### news-data-service.service.ts

```
import {
        Injectable
      } from '@angular/core';
      import {
        Http,
        Response
      } from '@angular/http';
      import 'rxjs/add/operator/map'
      import 'rxjs/Rx';
      import {
        Observable
      } from 'rxjs/Observable';
      import {
        NewsModel
      } from './newsModel';
      @Injectable() export class NewsDataService {
        constructor(private http: Http) {}
        getData(): Observable < NewsModel[] > {
          return this.http.get('./app/dataServices/news.json').map((res: Response) => res.json()).do((d: NewsModel) => console.log('test data', d));
        }
        getOneData(id: NewsModel): Observable < any > {
          return this.http.get('./app/dataServices/news.json').map(res => res.json()).map((list: Array < any > ) => {
            let result: NewsModel = new NewsModel();
            if (list) {
              list.forEach(element => {
                if (element.Id === id) {
                  result = element;
                }
              });
              return result;
            }
          })
        }
      }
```

### news-tags.component.ts

```
import {
        Component,
        OnInit,
        Input
      } from '@angular/core';
      @Component({
        moduleId: module.id,
        selector: 'app-news-tags',
        templateUrl: 'news-tags.component.html'
      }) export class NewsTagsComponent implements OnInit {
        @Input() selectedNews;
        constructor() {}
        ngOnInit() {}
      }
```

### news-tags.component.html

```

           {{tag}}

```

### news-summary.component.ts

```
import {
    Component,
    OnInit,
    Input
  } from '@angular/core';
  import {
    ShortenHtmlPipe
  } from '../shared/pipes/ShortenHtml.pipe';
  @Component({
    moduleId: module.id,
    selector: 'app-news-summary',
    templateUrl: 'news-summary.component.html',
    pipes: [ShortenHtmlPipe]
  }) export class NewsDetailComponent implements OnInit {
    @Input() selectedNews;
    constructor() {}
    ngOnInit() {}
  }
```

### news-summary.component.html

```

```

### news-display.component.ts

```
import {
    Component,
    OnInit
  } from '@angular/core';
  import {
    NewsDataService
  } from '../dataServices/news-data-service.service';
  import {
    NewsDetailComponent
  } from './news-summary.component';
  import {
    NewsTagsComponent
  } from './news-tags.component';
  import {
    ROUTER_DIRECTIVES
  } from '@angular/router';
  import {
    Observable
  } from 'rxjs/Observable';
  @Component({
    moduleId: module.id,
    selector: 'app-news-display',
    templateUrl: 'news-display.component.html',
    styleUrls: ['news-display.component.css'],
    providers: [NewsDataService],
    directives: [NewsDetailComponent, NewsTagsComponent, ROUTER_DIRECTIVES]
  }) export class NewsDisplayComponent implements OnInit {
    techNewsList$: Observable < any[] > ;selectedNews: {};constructor(private newsDataSvc: NewsDataService) {}
    ngOnInit() {
      this.techNewsList$ = this.newsDataSvc.getData();
    }
    selectEvent(news: any) {
      this.selectedNews = news;
    }
  }
```

### news-display.component.html

```
News List
        1. {{tn.Title}}




```

### news-detail.component.ts

```
import {
    Component,
    OnInit
  } from '@angular/core';
  import {
    ActivatedRoute
  } from '@angular/router';
  import {
    NewsDataService
  } from '../dataServices/news-data-service.service';
  import 'rxjs/add/operator/map'
  import 'rxjs/Rx';
  import {
    Observable
  } from 'rxjs/Observable';
  import {
    NewsModel
  } from '../dataServices/newsModel';
  @Component({
    moduleId: module.id,
    selector: 'app-news-detail',
    templateUrl: 'news-detail.component.html',
    styleUrls: ['news-detail.component.css'],
    providers: [NewsDataService]
  }) export class NewsDetailComponent implements OnInit {
    newsModel: NewsModel = new NewsModel();constructor(private route: ActivatedRoute, private newsDataSvc: NewsDataService) {}
    ngOnInit() {
      this.route.params.subscribe(params => {
        let id = params['id'];
        let news$ = this.newsDataSvc.getOneData(id);
        news$.subscribe(res => {
          this.newsModel = res;
        })
      });
    }
    goBack() {
      window.history.back();
    }
  }
```

### news-detail.component.html

```
News Detail
    Back
    {{newsModel.Category}}

       Title:
       {{newsModel.Title}}
       Description:

       Tags:
                 {{tag}}

    Back
```

#### Where to get this code

github - NewsApp_AngularCli

This blog demo how to build angualr2 master/detail page, following is the template page for now.

Angular2 Master/Detail Page Example


#### Table of Contents

1. Detect breakpoint by use **@angular/cdk**
2. First intall **@angular/cdk**
3. Add Layout Module to root angular module
4. Use **@angular/cdk** at Angular component
5. References

## Detect breakpoint by use **@angular/cdk**

breakpoint usually is CSS, you write media query for different style for
different view. However, sometime you might want to do that in Javascript
instead of CSS. At this blog, we'll use **@angular/cdk** at
Angular Universal App project.

## First intall **@angular/cdk**

```
"@angular/cdk": "^7.3.3",
```

## Add Layout Module to root angular module

```
import { LayoutModule } from "@angular/cdk/layout";

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [
    BrowserModule.withServerTransition({ appId: "my-app" }),
    RouterModule.forRoot([
      { path: "", component: HomeComponent, pathMatch: "full" },
      { path: "lazy", loadChildren: "./lazy/lazy.module#LazyModule" },
      { path: "lazy/nested", loadChildren: "./lazy/lazy.module#LazyModule" }
    ]),
    TransferHttpCacheModule,
    LayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

## Use **@angular/cdk** at Angular component

```
ngOnInit(): void {
    this.breakpointObserver
      .observe(["(min-width: 500px)"])
      .subscribe((state: BreakpointState) => {
        if (state.matches) {
          console.log("Viewport is 500px or over!");
        } else {
          console.log("Viewport is getting smaller!");
        }
      });
  }
```

### References

https://alligator.io/angular/breakpoints-angular-cdk/


Sample code about how to detect breakpoint at Angular.

Detect Breakpoint at Angular


[Angular2 Webpack Starter is prototype Angular2 application for you to start build application.
You can reference their Github for the latest information, https://github.com/AngularClass/angular2-webpack-starter.

First you'll need to install or make sure your npm and node is correct
version, `Node >= 5.0 & NPM >= 3`

### Then, you'll need to install `webpack`

You can reference following link for webpack's documentation. Webpack document, webpack npm.

```
npm install -g webpack
```

You could also check
webpack-bundle-size-analyzer](https://github.com/AngularClass/angular2-webpack-starter) tool.

Then, following angualr2-webpack-starter's quick start guide to run command.
Following is the the one I run production mode, you can see the javascript
bundle become much more smaller now.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_szsm8abny.png)


Get start with Angular2 with Angular2-webpack-starter

Start Angular2 with Angular2-Webpack-starter


#### Table of Contents

1. Get Start angular2 with angualr-cli
2. Issues:

## Get Start angular2 with angualr-cli

There're lots of thing you have to worry about for starting angular2, now
`Angular-CLI` is build for this kind of purpose, it's a Prototype
Angular2 application based on the ember-cli project.

For this blog's example, I'm using tools as following.

```
node: 6.5.0
os: win32 x64
```

For Angular-CLI, I'm using following version.

```
angular-cli: 1.0.0-beta.10
```

Then, run following to install angular-cli to your environment

```
npm install -g angular-cli
```

Now, the first command you'd like to try is `ng --help`. You would
able to check the document from github, but thought from the downloaded
angular-cli code will show the latest document by just type
`ng --help`.

#### Following is what `ng --help` shows by above version

```
(node:16908) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please u
pdate it to a more recent version.
Usage: ng

Available commands in angular-cli:

ng addon
  Generates a new folder structure for building an addon, complete with test harness.
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --blueprint (String) (Default: addon)
    aliases: -b
  --skip-npm (Boolean) (Default: false)
    aliases: -sn
  --skip-bower (Boolean) (Default: false)
    aliases: -sb
  --skip-git (Boolean) (Default: false)
    aliases: -sg
  --directory (String)
    aliases: -dir

ng asset-sizes
  Shows the sizes of your asset files.
  --output-path (Path) (Default: dist/)
    aliases: -o

ng build
  Builds your app and places it into the output path (dist/ by default).
  aliases: b
  --environment (String) (Default: development)
    aliases: -e , -dev (--environment=development), -prod (--environment=production)
  --output-path (Path) (Default: dist/)
    aliases: -o
  --watch (Boolean) (Default: false)
    aliases: -w
  --watcher (String)
  --suppress-sizes (Boolean) (Default: false)

ng destroy
  Destroys code generated by `generate` command.
  aliases: d
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --pod (Boolean) (Default: false)
    aliases: -p
  --classic (Boolean) (Default: false)
    aliases: -c
  --dummy (Boolean) (Default: false)
    aliases: -dum, -id
  --in-repo-addon (String) (Default: null)
    aliases: --in-repo , -ir

ng generate
  Generates new code from blueprints.
  aliases: g
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --pod (Boolean) (Default: false)
    aliases: -p
  --classic (Boolean) (Default: false)
    aliases: -c
  --dummy (Boolean) (Default: false)
    aliases: -dum, -id
  --in-repo-addon (String) (Default: null)
    aliases: --in-repo , -ir

ng help
  Outputs the usage instructions for all commands or the provided command
  aliases: h, --help, -h
  --verbose (Boolean) (Default: false)
    aliases: -v
  --json (Boolean) (Default: false)

ng init
  Creates a new angular-cli project in the current folder.
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --blueprint (String)
    aliases: -b
  --skip-npm (Boolean) (Default: false)
    aliases: -sn
  --skip-bower (Boolean) (Default: false)
    aliases: -sb
  --name (String) (Default: )
    aliases: -n

ng install
  Installs an angular-cli addon from npm.
  aliases: i

ng new
  Creates a new directory and runs ng init in it.
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --blueprint (String) (Default: app)
    aliases: -b
  --skip-npm (Boolean) (Default: false)
    aliases: -sn
  --skip-bower (Boolean) (Default: false)
    aliases: -sb
  --skip-git (Boolean) (Default: false)
    aliases: -sg
  --directory (String)
    aliases: -dir

ng serve
  Builds and serves your app, rebuilding on file changes.
  aliases: server, s
  --port (Number) (Default: 4200)
    aliases: -p
  --host (String) Listens on all interfaces by default
    aliases: -H
  --proxy (String)
    aliases: -pr , -pxy
  --insecure-proxy (Boolean) (Default: false) Set false to proxy self-signed SSL certificates
    aliases: --inspr
  --watcher (String) (Default: events)
    aliases: -w
  --live-reload (Boolean) (Default: true)
    aliases: -lr
  --live-reload-host (String) Defaults to host
    aliases: -lrh
  --live-reload-base-url (String) Defaults to baseURL
    aliases: -lrbu
  --live-reload-port (Number) (Defaults to port number within [49152...65535])
    aliases: -lrp
  --environment (String) (Default: development)
    aliases: -e , -dev (--environment=development), -prod (--environment=production)
  --output-path (Path) (Default: dist/)
    aliases: -op , -out
  --ssl (Boolean) (Default: false)
  --ssl-key (String) (Default: ssl/server.key)
  --ssl-cert (String) (Default: ssl/server.crt)

ng test
  Runs your app's test suite.
  aliases: t
  --environment (String) (Default: test)
    aliases: -e
  --config-file (String)
    aliases: -c , -cf
  --server (Boolean) (Default: false)
    aliases: -s
  --host (String)
    aliases: -H
  --test-port (Number) (Default: 7357) The test port to use when running with --server.
    aliases: -tp
  --filter (String) A string to filter tests to run
    aliases: -f
  --module (String) The name of a test module to run
    aliases: -m
  --watcher (String) (Default: events)
    aliases: -w
  --launch (String) (Default: false) A comma separated list of browsers to launch for tests.
  --reporter (String) Test reporter to use [tap|dot|xunit] (default: tap)
    aliases: -r
  --silent (Boolean) (Default: false) Suppress any output except for the test report
  --test-page (String) Test page to invoke
  --path (Path) Reuse an existing build at given path.
  --query (String) A query string to append to the test page URL.

ng version
  outputs angular-cli version
  aliases: v, --version, -v
  --verbose (Boolean) (Default: false)


Available commands from ng2:
ng new
  Creates a new directory and runs ng init in it.
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --blueprint (String) (Default: ng2)
    aliases: -b
  --link-cli (Boolean) (Default: false)
    aliases: -lc
  --skip-npm (Boolean) (Default: false)
    aliases: -sn
  --skip-bower (Boolean) (Default: true)
    aliases: -sb
  --skip-git (Boolean) (Default: false)
    aliases: -sg
  --directory (String)
    aliases: -dir
  --source-dir (String) (Default: src)
    aliases: -sd
  --style (String) (Default: css)
  --prefix (String) (Default: app)
    aliases: -p
  --mobile (Boolean) (Default: false)

ng generate
  Generates new code from blueprints.
  aliases: g
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --pod (Boolean) (Default: false)
    aliases: -p
  --classic (Boolean) (Default: false)
    aliases: -c
  --dummy (Boolean) (Default: false)
    aliases: -dum, -id
  --in-repo-addon (String) (Default: null)
    aliases: --in-repo , -ir

ng init
  Creates a new angular-cli project in the current folder.
  aliases: i
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --blueprint (String)
    aliases: -b
  --link-cli (Boolean) (Default: false)
    aliases: -lc
  --skip-npm (Boolean) (Default: false)
    aliases: -sn
  --skip-bower (Boolean) (Default: true)
    aliases: -sb
  --name (String) (Default: )
    aliases: -n
  --source-dir (String) (Default: src)
    aliases: -sd
  --style (String) (Default: css)
  --prefix (String) (Default: app)
    aliases: -p
  --mobile (Boolean) (Default: false)

ng test
  Runs your app's test suite.
  aliases: t
  --watch (Boolean) (Default: true)
    aliases: -w
  --browsers (String)
  --colors (Boolean)
  --log-level (String)
  --port (Number)
  --reporters (String)
  --build (Boolean) (Default: true)

ng e2e
  Run e2e tests in existing project

ng lint
  Lints code in existing project

ng version
  outputs angular-cli version
  aliases: v, --version, -v
  --verbose (Boolean) (Default: false)

ng completion
  Adds autocomplete functionality to `ng` commands and subcommands

ng doc
  Opens the official Angular documentation for a given keyword.

ng make-this-awesome

ng set
  Set a value in the configuration.
  --global (Boolean) (Default: false)
    aliases: -g

ng get
  Get a value from the configuration.
```

To actually create prototype angular2 application you'll need to type
following command.

```
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
```

#### Following is example when use Angular-CLI to create a project

```
PS C:\Test> cd a_cli
PS C:\Test\a_cli> ng new cl
installing ng2
  create .clang-format
  create .editorconfig
  create src\app\cli-1.component.css
  create src\app\cli-1.component.html
  create src\app\cli-1.component.spec.ts
  create src\app\cli-1.component.ts
  create src\app\environment.ts
  create src\app\index.ts
  create src\app\shared\index.ts
  create src\favicon.ico
  create src\icon.png
  create src\index.html
  create src\main.ts
  create src\manifest.webapp
  create src\system-config.ts
  create src\tsconfig.json
  create src\typings.d.ts
  create angular-cli-build.js
  create angular-cli.json
  create config\environment.dev.ts
  create config\environment.js
  create config\environment.prod.ts
  create config\karma-test-shim.js
  create config\karma.conf.js
  create config\protractor.conf.js
  create e2e\app.e2e.ts
  create e2e\app.po.ts
  create e2e\tsconfig.json
  create e2e\typings.d.ts
  create .gitignore
  create package.json
  create public\.npmignore
  create tslint.json
  create typings.json
Successfully initialized git.
- Installing packages for tooling via npm
├── es6-shim (ambient)
├── angular-protractor (ambient dev)
├── jasmine (ambient dev)
└── selenium-webdriver (ambient dev)

Installed packages for tooling via npm.
```

#### `ng serve` to start the site

Following is example when run ng serve to start the site, it's using Broccoli
but Angular-CLI will move to WebPack.

```
PS C:\Test\cli_1> ng serve
Livereload server on http://localhost:49152
Serving on http://localhost:4200/

Build successful - 3400ms.

Slowest Trees                                 | Total
----------------------------------------------+-----------
vendor                                        | 2431ms
BroccoliTypeScriptCompiler                    | 705ms

Slowest Trees (cumulative)                    | Total (avg
----------------------------------------------+-----------
vendor (1)                                    | 2431ms
BroccoliTypeScriptCompiler (1)                | 705ms
```

#### What shows the browser?

#### What kinds of files will generate for you?

Try following command, which will generate tree of directory folder.

```
tree /A /F ["directory path"] > tree.txt
```

Following files is not include files for `node_modules, bowers`,
because it's running Angular-CLI as
`ng new [Project-Name] --skip-npm --skip-bower --skip-git`. If you
run default command `ng new [project-name]` will include above
tasks, but sometime depend on your enviroment, it'll take a long time and at
the end it's because of the permission issue. You could
`npm insall -d` to install all dependencies files.

```
|   .editorconfig
|   .gitignore
|   angular-cli-build.js
|   angular-cli.json
|   package.json
|   README.md
|   tslint.json
|   typings.json
|
+---config
|       environment.dev.ts
|       environment.js
|       environment.prod.ts
|       karma-test-shim.js
|       karma.conf.js
|       protractor.conf.js
|
// Your unit test(karma) or intergration test(protractor)
+---e2e
|       app.e2e-spec.ts
|       app.po.ts
|       tsconfig.json
|       typings.d.ts
|
// when run ng build, Angular-CLI will buidl production ready which will set here
+---public
|       .npmignore
|
// during development, you'll add code here.
\---src
    |   favicon.ico
    |   index.html
    |   main.ts
    |   system-config.ts
    |   tsconfig.json
    |   typings.d.ts
    |
    \---app
        |   app.component.css
        |   app.component.html
        |   app.component.spec.ts
        |   app.component.ts
        |   environment.ts
        |   index.ts
        |
        \---shared
                index.ts
```

#### Package.json's Angular2 version rc4!?

At this point, 9/1/2016, angular2 is already in rc7, so whey when using
Angular-CLI is using couple month version behind!? Actually, angular-cli is
moving to webpack, so you'll have uninstall angular-cli and install the
webpack version of angular-cli.

```
npm uninstall -g angular-cli
```

```
npm install -g angular-cli@webpack
```

After install the angular-cli's webpack version, run the project command to
create prototype again.

```
ng new [project-name] --skip-npm --skip-bower --skip-git
```

Then run this comannd to generate directory tree,
`tree /a /f "myfolder" > tree.txt`

```
|   .gitignore
|   angular-cli.json
|   karma.conf.js
|   package.json
|   protractor.conf.js
|   README.md
|   tree.txt
|   tslint.json
|
+---e2e
|       app.e2e-spec.ts
|       app.po.ts
|       tsconfig.json
|
\---src
    |   favicon.ico
    |   index.html
    |   main.ts
    |   polyfills.ts
    |   styles.css
    |   test.ts
    |   tsconfig.json
    |   typings.d.ts
    |
    +---app
    |   |   app.component.css
    |   |   app.component.html
    |   |   app.component.spec.ts
    |   |   app.component.ts
    |   |   app.module.ts
    |   |   index.ts
    |   |
    |   \---shared
    |           index.ts
    |
    \---environments
            environment.prod.ts
            environment.ts
```

#### Angular2 is using `2.0.0.-rc7` now!

```
{
  "name": "ali-006",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.7",
    "@angular/compiler": "2.0.0-rc.7",
    "@angular/core": "2.0.0-rc.7",
    "@angular/forms": "2.0.0-rc.7",
    "@angular/http": "2.0.0-rc.7",
    "@angular/platform-browser": "2.0.0-rc.7",
    "@angular/platform-browser-dynamic": "2.0.0-rc.7",
    "@angular/router": "3.0.0-rc.3",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.21"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.11-webpack.9-4",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.5",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }
}
```

### Issues:

One of my biggest issue is when I use Angular-CLI@webpack the vendor
javascript size is 2.7MB, that's killing, I think Angular-CLI will fix or
maybe just document is not good I'm not able to set up it correctly by running
the webpack.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_vsdpc4kd6.png)

If you're concern of this production assests bundle issue, you can use
following Angular2-webpack-starter


This blog will show how to get start with Angular2 with angular-cli.

Start Angular2 with angular-cli

#### Table of Contents

1. Learn Angular2 from angular.io's QuickStart Example
2. Get quickstart from github

### Learn Angular2 from angular.io's QuickStart Example

So I'm trying to learn Angular by checking angular.io's QuickStart Example.
Once you get all the files as following,
`index.html,package.json`,`styles.css`,`systemjs.config.js`,`tsconfig.json`,`typings.json`.
Also, you'll need `main.ts` and `app.component.ts`, but
you can get all these files at Angular quickstart. I'll list my files here which I copied from angular.io because the code
here you can reference what's file are using.

Once you got all files, run `npm install` so you can all npm
modules, then run `npm start` you should be see site by running at
`http://localhost:3000`. You might see following issue as...

```
zone.js:101 GET http://localhost:3000/node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM146:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
(index):17 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js(&hellip;)(anonymous function) @ (index):17ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
zone.js:101 GET http://localhost:3000/node_modules/@angular/core/core.umd.js 404 (Not Found)
```

This is because the file `systemjs.config.js` is missing
`'/bundles/'`, looks like the current
https://angular.io/docs/ts/latest/quickstart.html# already has the code, but
that's why for the umd.js is missing issue.

```
function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
```

Also, when you run the site and once you see the text 'My First Angular 2
App', check the console window, if you have log says.

```
(index):17 Error: ReferenceError: enableProdMode is not defined(&hellip;)
```

You can add following code to enable it.

```
// at main.ts
import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
// add following two lines
import {enableProdMode} from '@angular/core';
enableProdMode();
bootstrap(AppComponent);
```

`index.html`

```


    Angular 2 QuickStart




    
     




    


      System.import('app').catch(function(err){ console.error(err); });


  

    Loading...


```

`package.json`

```
{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.2",
    "@angular/compiler":  "2.0.0-rc.2",
    "@angular/core":  "2.0.0-rc.2",
    "@angular/http":  "2.0.0-rc.2",
    "@angular/platform-browser":  "2.0.0-rc.2",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.2",
    "@angular/router":  "2.0.0-rc.2",
    "@angular/router-deprecated":  "2.0.0-rc.2",
    "@angular/upgrade":  "2.0.0-rc.2",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.12",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  },
  "description": "asdf",
  "repository": "sss"
}
```

`systemjs.config.js`

```
/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);
```

`tsconfig.json`

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

`typings.json`

```
{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}
```

`main.ts`

```
import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import {enableProdMode} from '@angular/core';
enableProdMode();
bootstrap(AppComponent);
```

`app.component.ts`

```
import { Component } from '@angular/core';
enableProdMode();
@Component({
  selector: 'my-app',
  template: 'My First Angular 2 App2'
})
export class AppComponent { }
```

### Get quickstart from github

Also, you can get all these code from github, which is most update to
date, https://github.com/angular/quickstart.

To start use this is easy, you'll need to
`git clone https://github.com/angular/quickstart`, then run
`npm install`, and `run npm start`, the github is also
contains the unitest.

Getting started with Angular2 using the angular.io QuickStart example, covering all the required files and setup.

Angular2 - Quickstart Angular2 with angular.io


#### Table of Contents

1. A resource to Learn Angular2
2. Resource for other languages/tools relative to Angular2
3. Environment for start doing Anglar2
4. Angular2 Tags
5. Angular2 Coding Styles
6. How to Learn Angular2
7. Question for Angular2

### A resource to Learn Angular2

This blog just provides a few links to learn Angular2, I create this page just
want to memo a few links of how to learn Angular2.

  - BadAssList - Resource of Learn Angular2

    - A very helpful list to learn Angular2

PDF - Become a Ninja with Angular2

Info - Angular2 Home Page

    - Go to the Angular2 home page to check what's the main features.

Try 1 - Angular2 Quick Start

    - Use this Angular.io's quick start to learn how to build a Hello world by
Angular2.

Try 2 - Angular2 Tutorial

    - This Angular2.io's tutorial will learn how to use angular2 Components,
services, Routing, and HTTP.

Document - Angular.io's guide

    - A basic guide for the developer

Document - Angular.io's developer guide

    - More information about Angular2.

Angular2 API

Example - generator-gulp-angular2

    - Yeoman generator's angular2 version

Angular.io quick start's github location

Blog - how to learn Angular2

News - Positive - Google Preps Angular 2 for Final Release

Video - Angular2 Tutorial for beginner

Video - egghead - Learn Angular2

Video - Angular 2 : First Look

Video - Angular 2 - Getting Started

Video - Play by Play

site - learnangular2.com

    - a website build for people who want to learn angular2

site - angular2.com

Tool - Node.js - You need this to try angular2

Tool - TypeScript - Angular2 could build with TypeScript

Course - Paid to learn Angular2 - Pluralsight

    - If you pay you can take the angular2 course here.

### Resource for other languages/tools relative to Angular2

1. TypeScript

2. SystemJs

### Environment for start doing Anglar2

  - node.js

    - http://nodejs.org/

    - version: 4.x is better stable than 5.x (7/72016 point)

npm

    - version: 2.x, will come along when installing node.js

IDE

    - Visual Studio Code

      - https://code.visualstudio.com/Docs/?dv=win

Cloud9
WebStorm
Sublime

Git

    - http://git-scm.com/

### Angular2 Tags

  - TypeScript

  - SystemJs

  - Single Responsibility Principle

  - dash case (aka kebab-case)

  - decorator

  - Injectable

  - @Injectable()

  - Dependency Injection

  - Promise

  - ngOnInt

  - Angular Lifecycle Hook

  - Pipes

  - interpolation

  - one-way data binding

  - two-way data binding

  - Multi-line template strings

  - template strings feature in ES2015

  - double curly braces of interpolation

  - ngFor

    - build-in directive

ngIf
Structural Directives
property binding
Attribute Directives
@Input()
angular2 promise service
Async Angular Service with Promises
ES2015 Promises
ES2015 arrow function
Angular2 base href
component-relative paths
parent component property binding
ActivateRoute
ngOnDesroy
angular2's subscribe -> params.subscribe
angular2's unsubscribe -> this.sub.unsubscribe();
Javascript(+) operator
CanDeactivate guard
routerLinkActive

### Angular2 Coding Styles

  - service

    - .service

    - MyGreateService -> my-greate.service.ts

### How to Learn Angular2

1. Angular2

2. First, learn basic angular2, tutorial, read documentation, build a
prototype.

3. TypeScript

4. Learn basic with angular2, also dive deep into TypeScript

5. Visual Studio Code

6. SystemJs

7. Npm

8. Grunt/Gulp

9. Visual Studio

10. How to integrate the above technology into visual studio, let's say,
ASP.NET MVC, MVC5

### Question for Angular2

1. When should we use Angular2?

2. Angular2 for SEO?

3. Why need to unsubscribe()? -> this.sub.unsubscribe();

4. The angular component could add CSS URLs, but how to work with SASS or
minified CSS?


Start Angular2 - Resources

#### Table of Contents

1. TypeScript Build error
2. Html comment on Angular decorator
3. Fix
4. Angular2 Decorator's order
5. Fix
6. 404 javascript issue on platform-browser-dynamic.umd.js
7. Fix
8. Error: ReferenceError: enableProdMode is not defined
9. Fix

### TypeScript Build error

```
Html comment on Angular decorator
Now, you want to add html comment to angular decorator, following will fail.


@Component({
  selector: 'my-app',
  template: `
  {{title}}
  //{{name.first}} {{name.last}}
  /*

  	first name:


  	last name:


  */
  `
})

Fix
Now, add as html comment will not throw typescript error, and will return remove the comment section during TypeScript compiler


@Component({
  selector: 'my-app',
  template: `
{{title}}
  

  `
})

Angular2 Decorator's order
Now, following code will break, you have to put AppComponent under decorator @Component, that's the way angular2 will recorgize the AppComponent.


import {Component} from '@angular/core';
export class Name {
    id: number;
    firstname: string;
}
export class AppComponent {
    title = 'hi yo';
    name: Name = {
        id: 1,
        firstname: 'tt'
    };
}
@Component({
    selector: 'my-app',
    template: `
    {{title}}
    {{name.firstname}} man!
    {{name.id}}

        name:


    `
})

Fix
import {Component} from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
    {{title}}
    {{name.firstname}} man!
    {{name.id}}

        name:


    `
})
export class AppComponent {
    title = 'hi yo';
    name: Name = {
        id: 1,
        firstname: 'tt'
    };
}
export class Name {
    id: number;
    firstname: string;
}

404 javascript issue on platform-browser-dynamic.umd.js
If you getting this issue, looks like the folder is not correct.


zone.js:101 GET http://localhost:3000/node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM146:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
(index):17 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js(&hellip;)(anonymous function) @ (index):17ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
zone.js:101 GET http://localhost:3000/node_modules/@angular/core/core.umd.js 404 (Not Found)

Fix
Adding 'bundle' here, because that's the location for my .umd.js


function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }

Error: ReferenceError: enableProdMode is not defined
(index):17 Error: ReferenceError: enableProdMode is not defined(&hellip;)

Fix
// at main.ts
import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
// add following two lines
import {enableProdMode} from '@angular/core';
enableProdMode();
bootstrap(AppComponent);

```

### Html comment on Angular decorator

Now, you want to add html comment to angular decorator, following will fail.

```
@Component({
  selector: 'my-app',
  template: `
  {{title}}
  //{{name.first}} {{name.last}}
  /*

  	first name:


  	last name:


  */
  `
})
```

### Fix

Now, add as html comment will not throw typescript error, and will return
remove the comment section during TypeScript compiler

```
@Component({
  selector: 'my-app',
  template: `
{{title}}


  `
})
```

### Angular2 Decorator's order

Now, following code will break, you have to put AppComponent under decorator
@Component, that's the way angular2 will recorgize the AppComponent.

```
import {Component} from '@angular/core';
export class Name {
    id: number;
    firstname: string;
}
export class AppComponent {
    title = 'hi yo';
    name: Name = {
        id: 1,
        firstname: 'tt'
    };
}
@Component({
    selector: 'my-app',
    template: `
    {{title}}
    {{name.firstname}} man!
    {{name.id}}

        name:


    `
})
```

### Fix

```
import {Component} from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
    {{title}}
    {{name.firstname}} man!
    {{name.id}}

        name:


    `
})
export class AppComponent {
    title = 'hi yo';
    name: Name = {
        id: 1,
        firstname: 'tt'
    };
}
export class Name {
    id: number;
    firstname: string;
}
```

### 404 javascript issue on platform-browser-dynamic.umd.js

If you getting this issue, looks like the folder is not correct.

```
zone.js:101 GET http://localhost:3000/node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM146:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
(index):17 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js(&hellip;)(anonymous function) @ (index):17ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
zone.js:101 GET http://localhost:3000/node_modules/@angular/core/core.umd.js 404 (Not Found)
```

### Fix

Adding 'bundle' here, because that's the location for my .umd.js

```
function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
```

### Error: ReferenceError: enableProdMode is not defined

```
(index):17 Error: ReferenceError: enableProdMode is not defined(&hellip;)
```

### Fix

```
// at main.ts
import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
// add following two lines
import {enableProdMode} from '@angular/core';
enableProdMode();
bootstrap(AppComponent);
```

Angular2 StackOverflow List


Start doing angular2's tutorial

```
import { Component } from '@angular/core';

export class Name {
	id: number;
	first: string;
}

const NAMES: Name[] = [
  { id: 11, first: 'Mr. Nice' },
  { id: 12, first: 'Narco' },
  { id: 13, first: 'Bombasto' },
  { id: 14, first: 'Celeritas' },
  { id: 15, first: 'Magneta' },
  { id: 16, first: 'RubberMan' },
  { id: 17, first: 'Dynama' },
  { id: 18, first: 'Dr IQ' },
  { id: 19, first: 'Magma' },
  { id: 20, first: 'Tornado' }
];

@Component({
  selector: 'my-app',
  template: `
###### {{title}}


  - {{n.id}}: {{n.first}}


  ###### {{selectedName.id}}


  name:


  `,
  styles: [`
	  h6 {
	  	font-size: small;
	  }
	  ul li.selected {
	  	font-size: large;
	  }
  `]
})
export class AppComponent {
  title = 'Awesome';
  names = NAMES;

  onSelect(name: Name) {
  	this.selectedName = name;
  	console.info(name);
  }
}
```


A code snippet about how to use Angular2.