Angular

• 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)

• 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

import { Component } from '@angular/core';

// Metadata & Template
@Component ({
  selector: 'app-root',
  template: '<div> <h1> {{ pageTitle }} </h1> 
                <div> My First Component </div>
             </div>'
})

// Class
export class AppComponent {
  pageTitle: string = 'Hello World!'
}