Angular2 ecosystem
8 likes9,302 views
Jspm is a package manager that supports npm, GitHub registries and extends package.json, allowing installation of packages like jquery, materialize-css and immutablejs using commands like jspm install. It uses SystemJS as its module loader and supports TypeScript, enabling development of Angular 2 applications with features such as components, services and routing. The document provides an overview of the Angular 2 ecosystem including jspm, SystemJS, TypeScript and highlights of the Angular 2 framework.
![➜ 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](https://image.slidesharecdn.com/angular2-160114123059/85/Angular2-ecosystem-4-320.jpg)
![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](https://image.slidesharecdn.com/angular2-160114123059/85/Angular2-ecosystem-10-320.jpg)
![2
bootstrap(AppComponent, [AppService, ...]);
import {bootstrap} from 'angular2/angular2';](https://image.slidesharecdn.com/angular2-160114123059/85/Angular2-ecosystem-25-320.jpg)
![Routing
<router-outlet></router-outlet>
@CanActivate(() => { ... })
class MyComponent() {}
<a [routerLink]="[route.path]">{{route.name}}</a>](https://image.slidesharecdn.com/angular2-160114123059/85/Angular2-ecosystem-32-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (11)
![[1B4]안드로이드 동시성_프로그래밍](https://cdn.slidesharecdn.com/ss_thumbnails/1b4-140928080341-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Similar to Angular2 ecosystem (20)
More from Kamil Lelonek (8)
Recently uploaded (20)
Angular2 ecosystem
- 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:[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.
- 8. ➜ angular2example jspm i immutablejs=github:facebook/immutable-js Looking up github:facebook/immutable-js Updating registry cache... Downloading github:facebook/immutable- [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.
- 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
- 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
- 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?