Angular 2 with the entire ecosystem around it.

1. SystemJS
jspm
TypeScript
EcmaScript 7
and more!
Angular 2 Ecosystem

3. - jspm is a package manager
- it supports the following registries:
- npm
- GitHub
- it extends the package.json config
- you can use it as easily as npm
- environment configurable:
- in development loads separate files
- in production creates a single bundle

4. ➜ angular2example npm install jspm --save-dev
➜ angular2example jspm init
Would you like jspm to prefix the jspm package.json
properties under jspm? [yes]:
Enter server baseURL (public folder path) [./]:
Enter jspm packages folder [./jspm_packages]:
Enter config file path [./config.js]:
Configuration file config.js doesn't exist,
create it? [yes]:
Enter client baseURL (public folder URL) [/]:
Do you wish to use a transpiler? [yes]:
Which ES6 transpiler would you like to use:
Babel, TypeScript or Traceur? [babel]:TypeScript

5. ➜ angular2example jspm i jquery
Updating registry cache...
Looking up github:components/jquery
ok Installed jquery as github:components/jquery@^2.1.4
ok Install complete.
https://github.com/jspm/registry/blob/master/registry.json
"jquery": "github:components/jquery"

6. ➜ angular2example jspm i materialize-css
Updating registry cache...
err Repo jspm:materialize-css not found.
Perhaps try jspm install npm:materialize-css.
warn Installation changes not saved.

7. ➜ angular2example jspm i npm:materialize-css
Looking up npm:materialize-css
Updating registry cache...
Downloading npm:materialize-css@0.97.5
...
ok Installed materialize-css
as npm:materialize-css@^0.97.5 (0.97.5)
Installed Forks
To inspect individual package constraints, use jspm
inspect registry:name.
ok Install complete.

8. ➜ angular2example jspm i
immutablejs=github:facebook/immutable-js
Looking up github:facebook/immutable-js
Updating registry cache...
Downloading github:facebook/immutable-
js@3.7.6
ok Installed immutablejs as github:facebook/
immutable-js@^3.7.6 (3.7.6)
To inspect individual package
constraints, use jspm inspect registry:name.
ok Install complete.

9. http://bit.ly/jspm-docs

10. ES 6
export default class Helper {}
import Helper from 'helper';
CommonJS
class Helper {}
module.exports = Helper;
const helper = require('./helper');
AMD
define(['helper'], () => { /* ... */ });
require(['helper'], (helper) => {});
Universal dynamic module loader

11. load SystemJS itself
from jspm_packages
initialize SystemJS with
some initial settings
bootstrap application
jspm is SystemJS
default package manager
SystemJS is jspm
module loader
'./bootstrap.js'
is an entry JS point
https://cdnjs.com/libraries/systemjs

12. config.js

13. http://bit.ly/systemjs-docs

19. TypeScript
EcmaScript 2016
EcmaScript 2015
EcmaScript 5
types
annotations
classes
modules
just JavaScript
async/await
guards

20. types (function and class)
generic types
interfaces
instance variables
enums
namespaces
private class members

21. Types

22. Enums
Instance variables
Namespaces

23. Interfaces

24. live-server
npm i live-server --save-dev
usage
installation
config

25. 2
bootstrap(AppComponent, [AppService, ...]);
import {bootstrap} from 'angular2/angular2';

26. Components

27. Views

28. Services

29. Directives

30. Directives
30

31. import {
RouteConfig,
ROUTER_DIRECTIVES,
ROUTER_PROVIDERS,
...
} from 'angular2/router';
Routing

32. Routing
<router-outlet></router-outlet>
@CanActivate(() => { ... })
class MyComponent() {}
<a [routerLink]="[route.path]">{{route.name}}</a>

33. Networking

34. Networking

35. Wrapping up
jspm (package manager)
SystemJS (modules loader)
TypeScript (superset of JavaScript)
Angular 2 (web and mobile)

36. Is Angular 2 production ready?
Should we use Angular 2 at all?