Architecture - High Level

Angular architecture

• Angular is a platform and framework for building single-page client applications using HTML and TypeScript.
• The basic building blocks of the Angular framework are Angular components that are organized into NgModules.
• Organizing your code into distinct functional modules helps in managing development of complex applications, and in designing for reusability. In addition, this technique lets you take advantage of lazy-loading

Angular - an overview

Building blocks of Angular and their relation

Module

Every application has at least one module

                     
                        import {NgModule} from "@angular/core";
                        import {AppComponent} from "./app.component";
                        import {HttpModule} from "@angular/http";
                        import {CustomerService} from "./customer.service";
                        @NgModule({
                            declarations: [AppComponent],
                            imports: [HttpModule],
                            providers: [CustomerService],
                            bootstrap: [AppComponent]
                        })
                        export class AppModule {}
                     
                 

@NgModule Decorator

A function that expects an object as argument

• declarations - ALL components, pipes and directives of this module
• exports - a subset of the declarations, that can be used by other modules that import this module
• imports - other modules we use
• providers - globally available services and injectables that should be available for the dependency injector

Services

• are provided with the dependency injection
• are simple TypeScript classes
• are injected by their Type
• need the decorator @Injectable()
• are normally singletons (when they are provided on the root module level, or in a module that is only imported by the AppModule)

A simple service example

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

                        @Injectable({
                          providedIn: 'root', // if provided in the root module. Used for tree-shaking
                        })
                        export class MyAwesomeService {

                          constructor() { }

                          sayHello() {
                              console.log('Hello');
                          }

                        }
                     
                 

Data Binding

Binding in Templates

                 
                    
{{person.name}}
                    
                    

                 
               

• Interpolation: {{person.name}} - shows the value of the person.name property
• Property Binding: [person] - hands over the value of "selectedPerson" to the person component
• Event Binding: (click) - for each click, calls selectPerson()