Embed Size (px)
Citation preview
SystemJSjspmTypeScriptEcmaScript 7and more!
Angular 2 Ecosystem
- 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
➜ 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
➜ 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"
➜ 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.
➜ angular2example jspm i npm:materialize-css
Looking up npm:materialize-css
Updating registry cache...
Downloading npm:[email protected]
...
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.
➜ angular2example jspm i immutablejs=github:facebook/immutable-js
Looking up github:facebook/immutable-js Updating registry cache... Downloading github:facebook/[email protected] 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.
http://bit.ly/jspm-docs
ES 6export default class Helper {} import Helper from 'helper';
CommonJSclass Helper {} module.exports = Helper; const helper = require('./helper');
AMD define(['helper'], () => { /* ... */ }); require(['helper'], (helper) => {});
Universal dynamic module loader
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
config.js
http://bit.ly/systemjs-docs
TypeScript
EcmaScript 2016
EcmaScript 2015
EcmaScript 5
typesannotations
classesmodules
just JavaScript
async/awaitguards
types (function and class)generic typesinterfacesinstance variablesenumsnamespacesprivate class members
Types
Enums
Instance variables
Namespaces
Interfaces
live-servernpm i live-server --save-dev
usage
installation
config
2
bootstrap(AppComponent, [AppService, ...]);import {bootstrap} from 'angular2/angular2';
Components
Views
Services
Directives
Directives
30
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...
} from 'angular2/router';
Routing
Routing
<router-outlet></router-outlet>
@CanActivate(() => { ... }) class MyComponent() {}
<a [routerLink]="[route.path]">{{route.name}}</a>
Networking
Networking
Wrapping up
jspm (package manager)SystemJS (modules loader)TypeScript (superset of JavaScript)Angular 2 (web and mobile)
Is Angular 2 production ready?
Should we use Angular 2 at all?
