Download as PDF, PPTX
![➜ 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/75/Angular2-ecosystem-4-2048.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/75/Angular2-ecosystem-10-2048.jpg)
![2 bootstrap(AppComponent, [AppService, ...]); import {bootstrap} from 'angular2/angular2';](https://image.slidesharecdn.com/angular2-160114123059/75/Angular2-ecosystem-25-2048.jpg)
![Routing <router-outlet></router-outlet> @CanActivate(() => { ... }) class MyComponent() {} <a [routerLink]="[route.path]">{{route.name}}</a>](https://image.slidesharecdn.com/angular2-160114123059/75/Angular2-ecosystem-32-2048.jpg)
Uploaded byKamil Lelonek
Angular2 ecosystem
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.
Angular2 ecosystem
- 1.
- 3. - jspm isa 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 npminstall 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 jspmi 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 jspmi 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 jspmi 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 jspmi 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.
- 10. ES 6 export defaultclass 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 fromjspm_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.
- 13.
- 19. TypeScript EcmaScript 2016 EcmaScript 2015 EcmaScript5 types annotations classes modules just JavaScript async/await guards
- 20. types (function andclass) generic types interfaces instance variables enums namespaces private class members
- 21.
- 22.
- 23.
- 24. live-server npm i live-server--save-dev usage installation config
- 25. 2 bootstrap(AppComponent, [AppService, ...]); import{bootstrap} from 'angular2/angular2';
- 26.
- 27.
- 28.
- 29.
- 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.
- 34.
- 35. Wrapping up jspm (packagemanager) SystemJS (modules loader) TypeScript (superset of JavaScript) Angular 2 (web and mobile)
- 36. Is Angular 2production ready? Should we use Angular 2 at all?