Creating an Angular 2 (alpha 46 48) app that works

How to start with Angular 2?

• TypeScript vs ES6 vs ES5?
• Webpack vs Gulp?
• SystemJS vs JSPM vs CommonJS?
• How to create a build?
• Should I use classes?
• Do i need to learn RxJS?
• ... and more doubts!

The easy way

fork a starter project!

https://github.com/mgechev/angular2-seed

• Always up-to-date to latest versions
• Great devs behind
• Very good best practices
• Router support
• IT WORKS!

Let's start!

import {Component, ViewEncapsulation, CORE_DIRECTIVES} from 'angular2/angular2';

@Component({
  selector: 'github',
  templateUrl: './components/github/github.html',
  styleUrls: ['./components/github/github.css'],
  encapsulation: ViewEncapsulation.Emulated,
  directives: [CORE_DIRECTIVES]
})
export class GithubCmp {
  public projects: Array;

  constructor() {
    this.projects = [];
  }

  onSearch(search) {
    console.log("Search projects on Github by keyword " + search);
  }
}

Create a @Component()

github.ts

<form (submit)="onSearch(search)">
  <input type="text" #search>
  <button type="submit">Search</button>
</form>

<div *ng-for="#project of projects" 
     class="project">
  <h3>{{ project.name }}</h3>
  <h4>{{ project.stargazers_count }}</h4>
  <p>{{ project.description }}</p>
</div>

Write the @Component() view

github.html

/*
We can emulate :host selector thanks to
'encapsulation: ViewEncapsulation.Emulated'
*/

:host .project h3, :host .project h4 {
  display: inline-block;
}

:host .project h4:before {
  content: url('components/github/star.svg');
  margin-left: 10px;
  vertical-align: sub;
}

github.css

import {bootstrap, provide} from 'angular2/angular2';
import {ROUTER_PROVIDERS, APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppCmp} from './components/app/app';

bootstrap(AppCmp, [
  provide(APP_BASE_HREF, { useValue: '<%= APP_BASE + APP_DEST %>' } ),
  ROUTER_PROVIDERS,
  HTTP_PROVIDERS,
  provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

Import Http module

bootstrap.ts

import {Injectable} from 'angular2/angular2';
import {Http} from 'angular2/http';
import Observable from '../../node_modules/@reactivex/rxjs/src/Observable';
import {Response} from '../../node_modules/angular2/ts/src/http/static_response';

@Injectable()
export class GithubService {
  url: string = 'https://api.github.com/search/repositories?q=';
  http: Http;

  constructor(http: Http) {
    this.http = http;
  }

  search(query: string): Observable<Response> {
    return this.http.get(this.url + query);
  }
}

Create an @Injectable() Service

github_service.ts

Use your @Injectable() service!

import {Component, ViewEncapsulation, CORE_DIRECTIVES} from 'angular2/angular2';

import {GithubService} from '../../services/github_service';

@Component({
  selector: 'github',
  templateUrl: './components/github/github.html',
  styleUrls: ['./components/github/github.css'],
  encapsulation: ViewEncapsulation.Emulated,
  directives: [CORE_DIRECTIVES]
})
export class GithubCmp {
  public projects: Array;

  constructor(public ghService: GithubService) {
    this.projects = [];
  }

  onSearch(search) {
    this.ghService
      .search(search.value)
      .map(res => res.json().items)
      .map(projects => projects.sort((a, b) => (b.stargazers_count - a.stargazers_count)))
      .subscribe(projects => this.projects = projects);
  }
}

github.ts

Add your new route

import {Component, ViewEncapsulation} from 'angular2/angular2';
import {
  RouteConfig,
  ROUTER_DIRECTIVES
} from 'angular2/router';

import {HomeCmp} from '../home/home';
import {AboutCmp} from '../about/about';
import {GithubCmp} from '../github/github';
import {NameList} from '../../services/name_list';
import {GithubService} from '../../services/github_service';

@Component({
  selector: 'app',
  viewProviders: [NameList, GithubService],
  templateUrl: './components/app/app.html',
  styleUrls: ['./components/app/app.css'],
  encapsulation: ViewEncapsulation.None,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path: '/', component: HomeCmp, as: 'Home' },
  { path: '/about', component: AboutCmp, as: 'About' },
  { path: '/github', component: GithubCmp, as: 'Github' }
])
export class AppCmp {}

app.ts

<section class="sample-app-content">
  <nav>
    <a [router-link]="['/Home']">Home</a>
    <a [router-link]="['/About']">About</a>
    <a [router-link]="['/Github']">Github</a>
  </nav>

  <router-outlet></router-outlet>
</section>

app.html

And even more cool things!!

• Web Components support
• Router
• Revamped directives (NgFor, NgIf, etc...)
• Amazing Dependency Injection
• Pipes
• New Forms
• And more!!

Yeah, but... WHEN

Check: https://splintercode.github.io/is-angular-2-ready/

A beta is possible very soon in 2016!

THANK YOU!

QUESTIONS?