Skip to content

Angular

Jump to bottom
Kota edited this page Oct 30, 2018 · 28 revisions

  • https://angular.io

  • Application = Components + Services | Components = View + Class + MetaData

  • Modules => Root Angular Module (components) + Feature Angular Modules (components)

  • Supports ES 5. Scripts written in ES 2015 (ES 6) or Typescript should be transpiled. ES = ECMA Script (European Computer Manufacturer's Association)

  • Angular is modular (consists of many modules) https://www.npmjs.com/~angular

  • Why not Javascript

    • Doesn't provide namespace and all methods/function will be under global namespace
    • No Code Organization
    • AngularJS Modules helps in addressing it (In ES 2015, a file is a module).
      • ES 2015 module
      // exporting module 
export class Product { }     -> transpiles to ->   function Product() { }

// importing it for use
import { Product } from './product'
      • Angular Module: can communicate to other modules and a module can have many components

component

  • Includes a template (view) which is created with HTML. includes binding and directives to show the intended View
  • Contains a Class (Code, ex: typescript) with Properties and Methods
  • Contains Metadata, which is defined with a decorator
  • Component = Template + Class (Properties,methods) + Metadata
import { Component } from '@angular/core';

// Metadata & Template  : Like an attribute for the class
@Component ({      
  selector: 'app-root',   // directive name - a custom element
  template: `<div> <h1> {{ pageTitle }} </h1> 
                <div> My First Component </div>
             </div>`
})
export class AppComponent {                     // Class
  pageTitle: string = 'Hello World!'
}

// index.html
<body>
  <pm-root></pm-root>
</body>

// module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent} from './app.component';

@NgModule({
  imports: [ BrowserModule ],         // external modules
  declarations: [ AppComponent ],     // our custom components
  bootstrap: [ AppComponent ]         // startup components
})
export class AppModule {}
  • Decorator adds metadata to a class, its members, or its method arguments (prefixed with @) (~ attribute)
  • Module organizes and loads the required components and bootstraps what is required
  • Component should belong to only one module
  • Any new component added should be loaded in the base module so that angular can find it.
  • template: use "" for inline template. backticks (`) for multiple lines. Or a templateUrl: './test.html'
  • Directives: Custom & Angular Built In (Ex: *ngIf, *ngFor - structural directives)
  • Binding:
    • {{ }} One way Binding Interpolation
    • <img [src]='product.imageUrl' /> Property binding
    • <img src={{product.imageUrl}} /> Property binding
    • <button (click)='toggleImage()' /> Event binding
    • <input [(ngModel)]='listFilter' > Two way binding (ngModule belongs to FormsNodule)
  • Pipes for display
    • {{ name | lowercase }}
    • {{ amount | currency:'USD':'symbol':'1.2-2' }}
  • Strong Typing: In Typescript we can specify the type of data for properties and methods
  • Interface in typescript
export interface IProduct {
  productId: number;
  productName: string;
  releaseDate: Date;
  calculate(percent: number): number;
}

// use
import { IProduct } from './product';

export class ProductList {
  pageTitle: string = "Welcome";
  products: IProduct[] = [...];
}
  • Encapsulating Component Styles
    • Through @Component decorator properties: styles and styleUrls
@Component({
  selector:...,
  styles: ['thead {color: black;}'],    // applicable only to the content of the component
  styleUrls: ['./custom-component.css']
});

Clone this wiki locally