WHAT
IS ANGULAR FRAMEWORK
Angular is a Client-side (front side) JavaScript framework,
which is designed by Google. It is used to make client-side application
using the HTML and JavaScript or typescript and then it compiles to JavaScript
Why we
use Angular
Developing a web application using JQuery or JavaScript is
difficult, so angular came as front end framework to reusable the library.
The main important goal was to separate the client-side from
the server-side. The development of client-side and server-side together is
very complicated.
The structure of development needed to be improved.
Everything should be in proper order from the user interface design, through
writing business logic, to testing.
this is why it uses angular.
ADVANTAGE
OF ANGULAR
DEVELOP ACROSS ALL PLATFORMS
Learn one way to
build applications with Angular and reuse your code and abilities to
build apps for any deployment target. For web, mobile web, native mobile, and
native desktop.
SPEED & PERFORMANCE
Improved Architecture
Typescript
Mobile Support
Component-Based UI
SEO Friendly
ANGULAR
Modules
An angular module is a group of components, directives, pipes
and services that are related to the application.
If we are going to
design an application and that application contain multiple portals so all those the portal we can define as a module and this is also called a feature module.
To be able to define modules we have to use the decorator
NgModule.
Command to create a module
Ng g m ModuleName
ANGULAR
Component
Angular is component-based architecture. Angular application
is a collection of components, and a component handles one view or HTML page.
An Angular component controls a part of the UI of your
application. For example, the header, footer, or whole page can all be
components. Depending on how much reusability, you want in your code.
A component is a typescript class which is decorated with
‘@’ symbol.
A component contains the following things
1. Selector: A
selector that tells Angular to create and insert an instance of this component
wherever it finds the corresponding tag in template HTML.
2. TemplateUrl:
path of HTML Page
3. StyleUrl :
Path of Style page
Command to create a component
Ng g c
ComponentName
ANGULAR
Directive
Directives are used to manipulate the DOM( Document object
model). Directives are elements which used to change the appearance, behavior
or a layout of a DOM element. It also helps us to extend HTML as well.
There are 3 types of
directive exists in angular
Component directive
This directive
is used in the main class, this directive contains the details how the component should
proceed and how it should use at run time.
An angular
application has at least one component which is attached with a template along
with the behavior.
ANGULAR Directive
v Structural directive
Structural directives start with a *
sign. These directives are used to manipulate and add or remove elements from DOM elements.
There are basically 3 types of structural directive
*ngIf directive
*ngSwitch
directive
*ngFor
directive
Attribute directive
Attribute directives are used to modify the look and the behavior of the DOM elements.
There are mainly 2 types of Attribute directive
ngClass Directive: The ngClass directive
is used to change CSS classes in the HTML element.
ngStyle Directive: The ngStyle directive used
you to change the style of an HTML element using the expression.
ANGULAR
Routing
v Routing
is a mechanism that is used to communicate b/w the component and based on that
it shows the respective page on the browser or we can say like Angular Router uses to navigate between views or
pages that trigger by the user's actions.
v Router
import from @angular/router package.
v When
we click on the button or we can say like when we hit any URL for navigate to other
page then angular looks into the route array, and match the path as
requested and based on that it load component as well as respective HTML and
show on the browser.
v
Please watch Part 21 of angular 8 tutorial series for understanding
more on it
v
ANGULAR Service
v In
Angular, services are always singleton objects it means it instantiated only
once during the lifetime of application or module, Every Angular Service
contains methods that always contain the data throughout the life of an
application.
v It is a mechanism to share responsibilities
within one or multiple components.
v An
angular service is basically a function.
v It
helps us to maintain code reusability means instead of using the same code again
and again we can create a service and whenever we need it, so use that service
in component.
v It is easy to do unit testing as well.
v Command
to create Service
v Ng
g s ServiceName
v
Please watch Part 24 of angular 8 tutorial series for understanding
more on it
ANGULAR
Pipe
v Angular
provides some filters known as Pipes which is used to format or transform data
to desire output.
v Pipes
are used with a Pipe (|) symbol, it takes an input and returns a
desired formatted output
v For
ex, if given input by the user , we want to show in upper case on browser we use
Pipe for formatting.
v Angular
provide many built-in type pipes which is used to translate the data into
desire output and we can create a custom Pipe as well.
Types of Pipe:
v Built-in
pipe
v Parameterize pipe
v Multiple pipes (chaining pipe)
v 2. Custom pipe
Please watch Part 19,20 of angular 8 tutorial series
for understanding more on it
ANGULAR
Dependency injection
v Dependency
Injection always is one of the main benefits of an Angular Framework.
v It’s
a technique where one object is dependent on another object. In angular, a dependency is an object that is used as a service.
v
v Basically
DI is a design pattern where class receive their dependency from external
resources rather than creating himself.
v In
above picture basically, Class b depends on class A to execute class B
methods, then class A is a dependency of
class B
Please watch Part 25 of angular 8 tutorial series for
understanding more on it
ANGULAR Data Binding
v Data
binding means the communication between the component and the HTML page (DOM), or
we can say like it’s a communication b/w typescript code of component and HTML the page which the user sees on the browser.
Data binding basically One-way
data-binding or two-way data binding.
One Way Data Binding has
different ways to bind data from component to HTML
v String
Interpolation
v Property
Binding
v Style
Binding
v Class
Binding
v Attribute
Binding
v Two
Way Data Binding
v In
one way data binding when we change element in HTML file,it doesn’t reflect to
component file so to overcome this problem, we use two data binding like if I
change anything in DOM then changes reflect the component as well so basically
it updates data from component to view and vice-versa.
v The
combination of property binding and the event binding is called the two way
data binding.
Please watch Part 12 of angular 8 tutorial series for
understanding more on it
ANGULAR Forms
v Angular
forms are used to collect the data based
on the user's input. We can use Angular form for
users to log in, register page, and to perform many other data-entry
tasks.
v In
Angular 8, there are 2 type forms:
v Template-driven
forms
v Reactive
forms (model-driven forms)
Both types of Forms are used to
collect user input, validate the user input, create a form model and data model
to update.
Please
watch angular Form tutorial series for understanding more on it
ANGULAR Template-driven forms
v Template-driven
forms are simple forms it is good if we
create a simple form for your application.
v In
template-driven forms we do most of the work on the template side.
v Template-driven
forms are easy to use but they are not as scalable as Reactive forms.
v Its
good for the simple scenarios not for the complex scenarios.
v Very
less code on the component side.
v Unit
testing is difficult in it.
v Prerequisite
v Need
to import FormModule in App.module.ts
file
Please
watch angular Form tutorial series for understanding more on it
ANGULAR
Reactive Form
v Reactive
forms are better than template form.
v Reactive
forms are more scalable, reusable, and testable.
v In
these forms model which is created under app.module.ts file is responsible to
handle all the user interaction and validation.
v No
any data Binding is done.
v Mostly
code is in the component side.
v Prerequisite
v Need
to import ReactiveFormModule under app.module.ts file
Please watch angular Form tutorial series for
understanding more on it
WHAT IS COMPILER
v Compiling
is a term of transforming one source code language to another.
WHAT IS TRANSPILING
v It’s
a process of converting typescript code into the JavaScript by using traceur,
JS compiler.
What
is JIT and AOT compilation
v Angular
compile components to native JavaScript and HTML.
v There
are 2 types of compilation
v JIT(just
in time)
v The
compilation happens on the user browser at runtime
AOT (Ahead
of time)
v The
application is compiled and optimized at the build time instead of run time, so
it improves the rendering of the application UI
v What
is TRACEUR compiler
v It
compiles ECMA script Edition 6(ES6) code to regular javascript (ES5) to make it
compatible with the browser.
EmoticonEmoticon