Angular - Notes - CRIS
Angular - Notes - CRIS
-----------
Angular is a client side JS framework which allows to create reactive responsive
Applications.
Angular supports Routing, that means you can navigate from one components to
another components
Angular uses the Mobile First Approach
Typescript does not understand the browser.
Typescript(ts)-----tsc compiler-----Javascript(js)-------DOM------Browers
File.ts---------------tsc compiler---------------File.js
***********************************************************************************
**********************
TypeScript
------------------
TypeScript is not directly run on the browser. It needs a compiler to compile and
generate in JavaScript file.
Compilation of Typescript
---------------------------
TypeScript cannot run directly on the browser. It needs a compiler to compile the
file and generate it in JavaScript file, which can run directly on the browser.
FileName.ts-----------------tsc-----------------FileName.js
TypeScript uses TSC (TypeScript Compiler) compiler, which convert Typescript code
(.ts file) to JavaScript (.js file).
Features of Typescript
--------------------------
TypeScript supports Static typing, Strongly type, Modules, Optional Parameters,
etc.
Great tooling supports with IntelliSense which provides active hints as the code is
added.
Variables
--------------
Syntax of variables
---------------------
variable : data_type= value;
variable.ts
-----------------
let i:number = 90;
//i is the variable of type number which is holding or assigning the value 90
console.log("The value of i would be = "+ i);
***********************************************************************************
*************************
Function in Typescript
-----------------------
Function is a block of code that executes the statements.
Function may or may not return the values.
Function Should be the unique name
Advantages of function
------------------------
Code reusability:
-----------------
We can call a function several times without writing the same block of code again.
The code reusability saves time and reduces the program size.
Less coding:
--------------
Functions makes our program compact. So, we don't need to write many lines of code
each time to perform a common task.
Easy to debug: It makes the programmer easy to locate and isolate faulty
information.
***********************************************************************************
*************************
Enums
-----------
***********************************************************************************
*************************
Arrays
-----------
Characteristics of an Array
-----------------------------
----An array stores elements which have the same data type.
----Array elements stored in contiguous memory locations.
----The storage of 2-D array elements is rowed by row in a contiguous memory
location.
----Array name represents the address of the starting element.
----The size of an array should be initialized at the declaration time.
----Array size should be a constant expression and not a variable.
----We can retrieve array elements by specifying the element's corresponding index
value
Example-1
------------
export {}
let
employee:string[]=["Saurabh","Harish","Amita","Manjeet","Vinay","Sravani","Joe","Jo
y","Stefanie"];
***********************************************************************************
*************************
Data members-----variables
Data Functions----Functions
Object
-------
***********************************************************************************
*************************
For Example
---------------
In case of Single Page Application, Data is important
Client-----------Request-----------Server(html/js/Images/css/Data----xml--json)
http://localhost:4200/home
http://localhost:4200-------->URL
/Home------------------------>Routes
For Example
---------------
Gmail/Google Maps/Instagram/Facebook/PayPal/NetFlix/Amonzon
***********************************************************************************
*************************
Angular supports Routing, that means you can navigate from one components to
another components
Angular uses the Mobile First Approach
Typescript does not understand the browser.
Typescript(ts)-----tsc compiler-----Javascript(js)-------DOM------Browers
File.ts---------------tsc compiler---------------File.js
***********************************************************************************
*************************
ng new Application_name
ng----------------------------->Angular
new---------------------------->New Application
Application_name--------------->Name of the Application
***********************************************************************************
*************************
Execution of ng serve
-------------------------
ng serve -o
ng serve
npm start
It create 5 files
---------main.js
---------Style.js
---------vendor.js
---------polyfills.js
---------runtime.js
***********************************************************************************
*************************
Component
-------------
A component has a selector, template, style and other properties, using which it
specifies the metadata required to process the component.
Components are special classes that interact with the .html file of the component,
which gets displayed on the browser. Or we can say Component is a collection of
template, class and metadata.
Template
Class
Decorator
Template defines the user interface. It Contains the HTML,Directives and data
bindings.
@Component({
selector: 'app-first',
templateUrl: './first.component.html',
styleUrls: ['./first.component.css']
})
export class FirstComponent {
}
***********************************************************************************
*************************
Commands for Components
-----------------------------
ng g c First
ng g c Second --skip-tests
ng g c Third --skip-tests --inline-style=true
ng g c Fourth --skip-tests --inline-template=true
***********************************************************************************
*************************
Data Binding is one of the most powerful and important features in any software
development languauage.
DataBinding allows you to define communication between the components and view, So
we can say that Data binding is passed from component to view and from view to the
component
Component---ts-------template----html
template----html-----component----ts
ts---html or html----ts
If we declare the varaible inside the class we dont require let keywords because
it says
Unexpected token, Need Constructor, Method, accessor or property was expected
***********************************************************************************
*************************
Property Binding
-----------------------
There are some html properties that are boolean properties, which may need to bind,
for that we may need to use Property Binding.
***********************************************************************************
*************************
Attribute Binding------------attr-----
-------------------------------------------
Attribute Binding is same as the property Binding with the difference that we need
to add attr as prefix with attribute name.
Attribute Binding is useful where we dont have any property view with respect to an
HTML attributes.
[attr.property_name]=value;
bind-attr.property_name=value;
attr.property_name={{value}};
***********************************************************************************
*************************
Event Binding----------------()
Event Binding is a communication from template to component, html----------ts
***********************************************************************************
*************************
***********************************************************************************
*************************
@Input decorator binds a property within one component (child component) to receive
a value from another component (parent component).
This is one way communication from parent to child. The component property should
be annotated with @Input decorator to act as input property.
A component can receive a value from another component using component property
binding. Now we will see how to use @Input. It can be annotated at any type of
property such as number, string, array or user defined class. To use alias for the
binding property name we need to assign an alias name as @Input(alias).
Input Property----@Input()----angular/core----[]
***********************************************************************************
*************************
@Ouput decorator binds a property to send data from one comonent(child component)
to calling the component(parent component)
@Ouput() decorator------EventEmitter<>--------emit-----
@Output decorator binds a property of a component to send data from one component
(child component) to calling component (parent component).
Implements the Angular Router service , which enables navigation from one view to
the next as users perform application tasks.
Defines the Route object that maps a URL path to a component, and the RouterOutlet
directive that you use to place a routed view in a template, as well as a complete
API for configuring, querying, and controlling the router state.
What is Routing
-------------------
Routing allows you to move from one part of the application to another part or one
View to another View.
Route
-----------
Route tells the Angular Router which view to display when a user clicks a link or
pastes a URL into the browser address bar. Every Route consists of a path and a
component it is mapped to. The Router object parses and builds the final URL using
the Route
Routes
-----------
Routes is an array of Route objects our application supports
RouterOutlet
---------------
The outerOutlet is a directive (<router-outlet>) that serves as a placeholder,
where the Router should display the view
RouterLink
----------------
The RouterLink is a directive that binds the HTML element to a Route. Clicking on
the HTML element, which is bound to a RouterLink, will result in navigation to the
Route. The RouterLink may contain parameters to be passed to the route’s component.
RouterLinkActive
-------------------
RouterLinkActive is a directive for adding or removing classes from an HTML element
that is bound to a RouterLink. Using this directive, we can toggle CSS classes for
active RouterLinks based on the current RouterState
ActivatedRoute
------------------
The ActivatedRoute is an object that represents the currently activated route
associated with the loaded Component.
***********************************************************************************
*************************
Angular Service
-------------------
We might come across a situation where we need some code to be used everywhere on
the component. It can be for data connection that needs to be shared across
components, etc. Services help us achieve that. With services, we can access
methods and properties across other components in the entire project.
A Service in Angular is generally used when you need to reuse data or logic across
multiple components.
***********************************************************************************
*************************
HttpClient
------------
HttpClient class supports all the verbs for performing crud operations
-----Get()
-----Post()
-----Put()
-----Delete()
HttpClient class supports RXJS Library and provides several operators like
Map,filter,retry,forkjoin
***********************************************************************************
*************************
Directives
--------------
Directives are the important feature of an Angular Application and plays a vital
role in Angular Project
With the help of directive, we can easily manipulate our DOM Layout.
***********************************************************************************
*************************
Component Directive
---------------------
@Component({
selector: app-root,
templateUrl: './app.component.html',
styleUrl: [./app.component.css]
)}
***********************************************************************************
*************************
The Structural Directive is used to add or remove the HTML elements in the DOM
layout, by adding, removing or manipulating the elements.
----------------------------------
ngFor-----------------------------------------------------------
----------------------------------ngIf---------------------------------
The *ngIf directive is used when you want to display or remove an element based on
the condition
----------------------------------ngSwitch---------------------------------
ng Switch is a directive which is based to an expresssion.
ngSwitch
We bind an expression to it
ngSwitchCase
It defines an elements with the matched value, we neeed to provide the * before it
ngSwitchDefault
This is the default case which will be executed if no match is found.
***********************************************************************************
*************************
Attribute Directive
---------------------
----ngClass
--------------Angular ngClass is inbuilt directive in Angular that allows you to
set the CSS class dynamically for the DOM element
----The ngClass directive dynamically binds one or more CSS classes to an HTML
elements.
----If it is a string, it should contain one or more classes, provided space
separated class names
***********************************************************************************
*************************
Style Binding
----------------
[style.style-property]="style-value";
***********************************************************************************
*************************
HostBinding
------------------
HostBinding----In Angular, the @HostBinding-() function decorator which allows you
to set the properties of the host elements in the directive class.
***********************************************************************************
*************************
Bootstrap
------------
Bootstrap is a free, open source and is the most popular HTML, CSS and JavaScript
framework developed by twitter for creating responsive web applications
Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many other, as well as
optional JavaScript plugins.
Bootstrap also gives you the ability to easily create responsive designs
Easy to use: Anybody with just basic knowledge of HTML and CSS can start using
Bootstrap
There are two ways to start using Bootstrap on your own web site.
Containers
----------------
Bootstrap also requires a containing element to wrap site contents.
There are two container classes to choose from:
The .container-fluid class provides a full width container, spanning the entire
width of the viewport
***********************************************************************************
*************************
Install the BootStrap
--------------------------
Angular.json:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Style.css:
@import '~bootstrap/dist/css/bootstrap.min.css';
***********************************************************************************
*************************
Angular Forms
----------------
Forms are vital to business applications
We can use forms to register, Login and submit a request, place an order.
Schedule an appointments or any other operations.
For Developers
---------------
----Data Binding
----Error Message
----Validation
----Form Submission
----Visual Feeedback
----Change tracking
***********************************************************************************
*************************
***********************************************************************************
*************************
FormBuilder
FormGroup
FormControl
Validator
***********************************************************************************
*************************
Angular Pipes:
-----------------
***********************************************************************************
*************************
***********************************************************************************
*************************