Advanced Angular & Angular 6 Preview Bibhas Bhattacharya
Agenda Lazy loading modules Using Bootstrap with Angular Publish/subscribe with the RxJS Subject API What's new in Angular 6
Lazy Loading Modules
Eager Loading Modules By default code and assets of all feature modules are loaded by the browser when the application is first accessed Imports Catalog Module App Module Checkout Module Account Module @NgModule({ imports: [ CatalogModule, CheckoutModule, AccountModule ],... }) export class AppModule{}
Lazy Loading Modules Code and assets of a lazy loaded module is asynchronously loaded by the browser when user navigates to a component in that module Imports Catalog Module App Module Checkout Module Links Account Module @NgModule({ imports: [ CatalogModule ],... }) export class AppModule{}
Linking to a Module The route table of the application needs to link to the lazy loaded modules const routes: Routes = [ {path: "browse", component: CatalogComponent}, {path: "checkout", loadchildren:"app/checkout/checkout.module#checkoutmodule"}, {path: "account", loadchildren:"app/account/account.module#accountmodule"} ] @NgModule({...}) export class AppRoutingModule{}
Navigating to a Component A hyperlink to a component in a lazy loaded module needs to start with the path to that module <a href [routerlink]="['/browse']">view Products</a> <a href [routerlink]="['/checkout/shipping']">shipping</a> <a href [routerlink]="['/checkout/billing']">billing</a> <a href [routerlink]="['/account/orders']">past Orders</a> <a href [routerlink]="['/account/address']">address Book</a> Module path
Publish Subscribe
Inter-Component Communication All communication between sibling components must be routed via the parent. This becomes complicated when many sibling components need to communicate with each other Parent Component A @Output @Input @Input Child A Child B Child C B C
RxJs Subject API Pub/sub can simplify complex inter-component communication rxjs/subject subject.next("hello") subject.subscribe() Child A Child B Child C
Bootstrap Toolkit
Using Bootstrap Bootstrap is available from two NPM packages: bootstrap - Gives us the CSS for layout and styling @ng-bootstrap/ng-bootstrap - Gives us the Angular version of the Bootstrap widgets like tooltip and pagination Install what you need: npm install bootstrap --save npm install @ng-bootstrap/ng-bootstrap --save
Bootstrap CSS Add this to your application's styles.css: @import '~bootstrap/dist/css/bootstrap.min.css'; This will inline the entire Bootstrap CSS in a <style> tag in index.html. Inlining makes the page load and render faster. Alternatively, get the CSS from a CDN. Add this to index.html. (no need to install the bootstrap NPM package). <link rel="stylesheet" href="https://.../bootstrap.min.css">
Example Layout In app.component.html: <div class="container"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-8"> <router-outlet></router-outlet> </div> <div class="col-md-2"></div> </div> </div>
Using Bootstrap Widgets Widgets are implemented as Angular directives or components in the NgbModule module. Import it in your application import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ imports: [ NgbModule.forRoot() ],... }) export class AppModule{}
Example Widget This will show a tooltip for a button: <button (click)="..." placement="top" ngbtooltip="delete this comment">delete</button>
Bootstrap Alternatives Bulma provides a responsive layout framework that solely uses a browser's CSS Flexbox layout engine. [bulma.io]. Clarity like Bootstrap provides layout and Angular widgets. [vmware.github.io/clarity] Angular Material provides widgets that comply with the Material design language. [material.angular.io]. Angular Material does not have a layout framework. Use either Bootstrap or Bulma for responsive layout.
What's new in Angular 6?
CLI Changes ng update can update all your dependencies. Example: migrate from Angular 5 to 6 ng add can add new features to an existing app. Like add Angular Material, Bootstrap and Clarity Design System Allow third parties to add new code generation support via schematics.
New Build System - Bazel + Closure + Ivy ng build will now use Bazel and Closure. You can still choose to use Webpack if you wish. Ivy renderer will compile templates into JS. The result is smaller build size and better optimized code. Also faster builds
Angular Elements Web Components is an emerging W3C standard for building reusable GUI widgets and business logic components for the web. [www.webcomponents.org] Angular Elements lets you package an Angular component as a Web Component. A benefit of this is that you can then use the Angular component inside other frameworks like React, Vue, jquery and Polymer.
Angular 6 Education WA2725 Comprehensive Angular 6 Programming [https://www.webagesolutions.com/courses/wa2725] Added new chapters on advanced directive development, material and bootstrap toolkit.
Questions & Answers