Skip to content

Angular

Jump to bottom
Kota edited this page Oct 24, 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 { NgModule } from '@angular/core';
import { NgModule } from '@angular/core';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [ BrowserModule ],         // external modules
  declarations: [ AppComponent ],     // our custom components
  bootstrap: [ AppComponent ]         // 
})
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

Clone this wiki locally