Angular 2 quick notes

This are my side notes to quick start an Angular 2 Application and refresh my mind about basic syntax, best practices and structure. Nothing can be better then the official angular 2 documentation to start. To start I recommend to visit the official docs in special the Architecture Overview section.

Getting started basics

Angular cheat sheet is very usefull.

Using angular2 cli tool

The easyest option is to use angular2-cli to bootstrap development, their documentation is very clear and direct to the point, so I recommend to check that.

If not installed:

npm install angular-cli -g

Generate Project:

ng new ${project_name}
cd ${project_name}
ng serve

Then generate component, directive, pipe, service or route

routes are currently deprecated and being replaced by component routes, which at this moment I couldn't find documentation.

Commands to generate:

component ng g component my-new-component
directive ng g directive my-new-directive
pipe ng g pipe my-new-pipe
service ng g service my-new-service
route ng generate route hero (the current route is being replaced by component routes and I couldn't find documentation on the new approach as of today).

To do the manual way, follow this steps:

Create directory and add the following initial files.

package.json - node package manager
tsconfig.json -
typings.json -
systemjs.config.js -

Install packages: npm install
Run application: npm start

Basics

Angular 2 supports TypeScript, Dart and JavaScript. Here I am using TypeScript for code snippets.

TypeScript code is very close to javascript but it has some nice features that are very useful in large projects.

There's a simple but complete tutorial at Angular 2 Website, a must do, as it's very well written and shows the components and how to use them.

Main components

Components - Components are defined in typescript files and are possibly the basic and most important element in Angular2. Components allows direct usage from html like tagg to be used on the presentation layer and also do the wiring with other modules of Angular2 like directives and providers. It's in the component declaration that you also picks a css and template / templateUrl in which you can have html code or reference to an html file.

Basic structure:

  @Component({
      selector: 'my-app',  // this can then be used in html <my-app></my-app>
      directives: [HeroDetailComponent],
      providers: [HeroService],
      styles: [], 
      template:

A component can then be used in your html page as a tag, that is defined bye the selector property of the Component(see above).

Components can be included in pages in any html code, so in the component template property where you can add html it's possible to include another component, this approach is powerful as it gives a lot of modularity and flexibility.

Services

Directives

Routing

Pipes