What is the Architecture Overview of Angular ?
Angular is the most popular web development framework for developing mobile and desktop applications. The Angular framework is also used in cross-platform mobile development called IONIC so it is not limited to web applications only. Angular is an open source framework written and managed by the Angular team of Google and the Father of Angular is Mesko Hevery. The bootstrapping process creates the components listed in the bootstrap array and inserts each into the browser (DOM).
How to use Bootstrap with angular | Angular With Bootstrap
With the help of above image, you can identify the seven main building blocks of an Angular Application, which are:
1. Component
2. Templates
3. Metadata
4. Data Binding
5. Directives
6. Services
7. Dependency Injection The basic building blocks of an Angular application are NgModules, which provide a compilation context for components. Angular application is defined by a set of NgModules and always has at least a root module that enables bootstrapping, and many more feature modules. 8. Components define views
9. Components use services
Introduction to Modules
The NgModule is a class and work with the @NgModule decorator function and also accepts a metadata object that tells Angular how to compile and run the module code. The purpose of the module is to declare everything that is created in Angular and group them together. The NgModule is used to simplify the ways of defining and managing the dependencies in applications and you can also consolidate different components and services in associative blocks of functionality.
Lazy Loading in Angular in Hindi | Angular Modules | Types of Modules loading
Introduction to Components
Components are the basic building block of a user interface (UI) in Angular applications and it controls views (HTML/CSS). They also communicate with other components and services to provide functionality to your applications. Introduction to Templates The Template is only a subset of HTML, which tells Angular how to display the HTML view. Templates are created using the normal HTML tags and also use the Angular-specific markup such as interpolation or Property binding. Interpolation – {{}} double-curly braces
Property binding – []
Most of all HTML syntax is a valid template syntax.
A template expression produces a value. Angular runs the expression and assigns it to a property of a binding target. The target can be HTML elements, components, or directives.
1. Template
A template is a piece HTML code that tells Angular how to render the component in angular application.
The template is immediately associated with the component that defines the view of that component.
Types of Templates
There are 2 ways of defining template in an angular component.
Inline Template
The inline template is defined by placing the HTML code in back ticks “and is linked to the component metadata using the template property of @Component decorator.
Template File
The template is defined in a separate HTML file and is linked to the component metadata using the templateUrl property of the @Component decorator.
Introduction to metadata
It tells Angular how to compile and run the application.
Data binding
Angular uses Data Binding to get the data from the Component to Template View using Template Syntax.
Angular supports four types of Data binding
Interpolation: It is used to bind the data from component to View. Property Binding: It is used to bind the data from component to the property of an HTML control in the view. Event Binding: The DOM Events are bind from View to the Component method. Pipes – Pipes transform displayed values within a template.
Use the @Pipe annotation to declare that a given class is a pipe. A pipe class must also implement a Pipe Transform interface. The @Pipe decorator allows you to define the pipe name that is globally available for use in any template across Angular application. Pipe decorator and metadata –
Directives
Angular Directive is a TypeScript class which is declared as a @directive decorator. The directives allow you to attach behaviour with the DOM elements and the @directive decorator provides you an additional metadata that determine how directives should be processed, instantiated, and used at run-time.
Services
Services are commonly used to store data and make HTTP calls. The main idea behind a service is to provide a simple way to share data between components and with the help of dependency injection (DI) you can control how the instances of service are shared. Dependency injection (DI) Dependency Injection is a powerful pattern for managing code dependencies. DI is a way to create objects that depend upon other objects. Angular has its own DI framework pattern, and you can’t really build an Angular application without Dependency injection (DI).
