Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular v7について

puku0x
January 19, 2019

Angular v7について

Angular & Ionic Meetup Fukuoka

puku0x

January 19, 2019
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

  1. サービス 6 @Injectable() export class AppService { constructor(private http: HttpClient)

    {} getTodos() { return this.http.get<User[]>('/users'); } }
  2. Angular CLI 8 環境構築 $ ng new コード生成 $ ng

    generate $ ng add バージョンアップ $ ng update https://cli.angular.io/
  3. Language Service(VS Code 拡張) 10 • コード補完 • テンプレートチェック •

    定義ジャンプ https://marketplace.visualstudio.com/items?itemName =Angular.ng-template
  4. Angular v7 • ライブラリ・ツール周り更新 ◦ TypeScript & RxJS 最新版対応 ◦

    Node.js 10対応 ◦ CLI、Material、Elements等も更新 • v6 → v7 で破壊的変更なし 23
  5. Router Guard Redirect @Injectable() export class AuthGuard implements CanActivate {

    canActivate(router: Router,...) { // /login にリダイレクト return router.parseUrl('/login'); } } 25
  6. Router Navigation State this.router.navigateByUrl('/users/1', { state: { foo: 'bar', //

    任意のデータ } }); // extra.stateにデータが入る this.router.getCurrentNavigation().extras.state 26
  7. Bazelビルドサポート $ npm i -g @angular/bazel $ ng new my-app

    --collection=@angular/bazel $ cd my-app $ ng serve $ ng build --prod 28
  8. CLI Prompts $ ng new my-app ? Would you like

    to add Angular routing? Yes ? Which stylesheet format would you like to use? (Use arrow keys) ❯ CSS SCSS [ http://sass-lang.com ] SASS [ http://sass-lang.com ] LESS [ http://lesscss.org ] Stylus [ http://stylus-lang.com ] 31
  9. x-prompt schematic "routing": { "type": "boolean", "description": "Generates a routing

    module.", "default": false, "x-prompt": "Would you like to add Angular routing?" }, 32
  10. Bundle budgets "budgets": [{ "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb"

    }] バンドル単位, %設定も可 { "type": "bundle", "name": "main", "baseline": "300kb", "maximumWarning": “10%" } 34
  11. Angular Material / CDK v7 • 新Material Design対応 • CDK新機能

    ◦ バーチャルスクロール ◦ ドラッグ&ドロップ 36
  12. Angular Elements • v6: ShadowDOM v1対応 • v7: Content Projection対応

    <custom-element>この部分</custom-element> 42
  13. Custom Elementsとして出力 export class AppModule implements DoBootstrap { constructor(injector: Injector)

    { const el = createCustomElement(HelloComponent, { injector }); customElements.define('app-hello', el); } ngDoBootstrap(appRef: ApplicationRef) {} } 44