Skip to main content

Angular Architecture

 

Angular Architecture:

Angular is a platform and framework to build single-page client applications using HTML and TypeScript. It is written in Typescript.

   The basic building blocks are NgModules. It provides compilation context to components. An angular app has always a root module to enable bootstrapping.

overview

                                                              Architectural diagram src: Angular.io

 

The main building blocks of Angular applications:

  1.              Modules 
  2.             Component
  3.             Metadata
  4.             Templates
  5.             Directives 
  6.             Data binding
  7.             Services
  8.             Dependency injection


Modules:

Angular applications are modular and every Angular app has a root module, which provides the bootstrap mechanism. 

    • An angular module is a class with an @NgModule decorator.
    • NgModules import the functionalities form other NgModules just like other JavaScript modules.
    • We can divide the functionality by making several modules. By making this it allows the reusability of code.

 

Components:

The component is the basic building block of Angular application. Every Angular app has at least 1 component known as the root component that connects a component hierarchy with the page document object model (DOM)

Command to create a Component by using Terminal:

  ng g component componentName

When you creating a component it will create the following files. 

Component.ts –  here, we can define the module, properties, data logics.

Component.html -  HTML file where you can see the view.

Component.scss - CSS file for the new component is created.

Component.spec.ts – testing file to perform unit testing

 

A component is defined using the @Component decorator. Under the  @Component decorator, you can define the following items.

Component  selector  - 'app-root',

Component template(HTML  File) -'./app.component.html'

Style for the component -'./app.component.scss'

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'AngularConcepts';
}



Labels:

Comments

Post a Comment

Popular posts from this blog

React JS - Beginners

  React JS React is an open-source JavaScript library for building user interfaces or UI components. It was created at Facebook and open-sourced in March of 2013. It is used on social platforms like Instagram, Facebook, Twitter. And It is used on content delivery platforms like NetFlix, Spotify. Beyond Web applications, you can create native mobile applications using React Native. Check your system node and npm version. Node version should be greater than 8.10 and for npm, we need version 5.6.   Create a new React-app: Command to create a new react app: npx create-react-app new-app   To start the react app: npm start   Folder Structure: package.json – It contains all the project dependencies. src folder – It contains the files required to build the application public folder – when we ready to build the app for production all the built files will be placed in the public folder.   Create a React element: Elements are the building blocks of React apps
Post a Comment
Read more

Convert Base64 code to PDF file in Angular

Component.ts: import { DomSanitizer } from '@angular/platform-browser' ; base64Code = 'your base64 code ' ; byteCharacters : any ; pdfUrl : any ; constructor ( public sanitizer : DomSanitizer ) { } convertToPdf () { // tslint:disable-next-line:max-line-length this . byteCharacters = this . base64Code ; // atob() function decodes a string of data which has been encoded using base-64 encoding const byteCharacters = atob ( this . base64Code ); const byteNumbers = new Array ( byteCharacters . length ); for ( let i = 0 ; i < byteCharacters . length ; i ++) { byteNumbers [ i ] = byteCharacters . charCodeAt ( i ); } const byteArray = new Uint8Array ( byteNumbers ); const blob = new Blob ([ byteArray ], { 'type' : 'application/pdf' }); this . pdfUrl = URL . createObjectURL ( blob ); } Component.html: < embed [src] = "sanitizer.bypassSecurityTr
1 comment
Read more

Observable, Subject , Behavior Subject using RxJS:

  Create an Observable using RxJS:   Import the Observable                                    import  {  Observable  }  from   'rxjs' ; The Observable execution deliver three types of values: "Next" - sends a value such as a Number, a String, an Object, etc. "Error - sends the Error or exception. "Complete" - does not send a value after the Complete                                             ngOnInit ():  void  {                    this . observable$  =  new   Observable ( subscriber   =>  {                      subscriber . next ( 1 );                      subscriber . next ( 2 );                      subscriber . next ( 3 );                      subscriber . complete ();  //Complete the subscribing here                      subscriber . next ( 4 );   // Value not send after complete                   });                    this . observable$ . subscribe ( value   =>  {                      console . log ( value );   
Post a Comment
Read more