Creating a website
in itself gives a great feeling
and it just gets better
when you're doing
it using angular.
Hey everyone.
Welcome back to a whole
new exciting session
from Edureka.
My name is Wajiha.
And in this Angular tutorial,
you will learn all
that you need to know
about angular 8 and also
to create your own angular
application from scratch
So our discussion,
we'll start with the basic stuff
like types of web applications
angularjs and its drawbacks
the rise of angular
and the differences
between angular and Angular JS.
Then we shall see
who uses angular
and why is it so popular
following that we shall see
what is new in angular
8 and then I will show you guys
how to install
Visual Studio code
and angular on your systems.
Then we shall be creating
a project in angular and see
what are the files and folders.
Are created along
with that project?
Also we shall see
how this angular
application actually works
before we move on
towards the details of creating
an angular application.
You must first know typescript.
So for that we will take
a deep look at typescript
and the building blocks
of angular after that is done.
We shall move on
to the most exciting part
that is creating
a website from scratch.
So before we begin just
make sure you subscribe
to our Channel and hit
the Bell icon to stay updated
with all the latest
area Rekha videos.
Also, if you're interested
in getting an online
training certification
and angular check
out the link given
in the description box below.
So coming back
towards the session.
Let us first see
what is web development web
development is nothing but
the development of applications
or websites professionals
who create web applications
are known as web developers
these professionals
use various methodologies
such as agile to create
websites the applications
that were created earlier
followed the traditional
web applications model.
Today web applications are
mostly single page applications
that are compatible
both with desktops and mobiles.
So what exactly is
a traditional web application
if you remember
in the olden days whenever
you would request a web page
from a browser the page
would reload for each
and every request
these are nothing but
traditional web applications.
The main problem of this model
was the page rendering process
which would happen
for each and every request.
This was very
much time consuming
and it eventually Disrupted
the user experience to overcome
these issues single page
application model was introduced
in late 2002 the single
page model resolve
this frequent reloading issue
of web pages making it
much responsive and saving time.
So what exactly is
a single page application
in a single page application
model the website
has Dynamic interaction
with the user.
It rewrites the current page
rather than reloading the page
entirely this leads to an
uninterrupted user experience.
Single-page applications
will either load all
the necessary code like HTML CSS
or JavaScript or just
the appropriate resources
are loaded and then
add it to the page
if required neither is
the page reloaded completely
nor will the control be
transferred to any other page.
There are many Frameworks
that allow you to create
single page applications.
Some of them are angular
react view knockout Etc.
However, the most
widely used framework is
angular angular is actually
the Our of angularjs.
So before we move on to see
what exactly is angular,
let's take a look at angularjs.
Angularjs is an open source
front-end JavaScript framework
for creating single
page web applications.
It was developed
by Google in 2002.
There is no doubt
that angularjs was
very popular in its time.
But angularjs actually racked
many important features
that were being offered by
other JavaScript Frameworks
in the market angularjs
had large bundle sighs
it had performance.
It was and it did not support
mobile devices therefore
to resolve these issues
angular was created
since then angular
has taken over angularjs,
but the angular Community
has said that they
have extended the support
for angularjs applications
until the 30th of June 2021.
The rise of angular angular is
an open source web application
that is maintained by Google.
It is based
on type script language,
which is also an open-source
programming language
developed by Microsoft.
Typescript is basically
the superset of JavaScript with
typescript angular introduced
and object-oriented programming
Paradigm into web development.
We shall take a deep
look at typescript,
but for now,
let us differentiate
between angularjs and angular
angular was a complete
rewrite of angularjs.
The architecture of an angular
application is different
from angularjs the main
building blocks of angular.
Our modules components
templates metadata
data binding directive.
Services and dependency
injection will be taking a look
at each of these in a
while angular does not have
the concept of scope
or controllers instead.
It makes use
of a hierarchy of components
as its main architectural
concept angular has
a simple expression for syntax
focusing on square brackets
for property binding
and regular parentheses
for event binding mobile
development desktop development
is much easier
when mobile performance issues
are handled first thus
Angular first handles mobile
development modularity angular
follows modularity similar
functionalities are kept
together in same modules.
This gives angular a lighter
and a faster call
with typescript angular
has installed class-based
object-oriented programming
and static typing
into website creation.
So who uses angular
and why is it so popular angular
is widely used by many companies
to create their websites.
Some of them are
Google Microsoft.
Soft Samsung VMware
Santander Etc.
Now there are many reasons why
angular is considered to be
the best angular is easy to use
angular allows its users
to create full-fledged
professional websites
with much less of code,
when compared to its Rivals
the MVC architecture angular
framework is based on the MVC
or the model view
controller architecture
where the model
serve as the base
and contain all the data.
Whereas the views basically deal
with what the user
sees compatibility.
T angular works
on the client side
which makes it compatible
for both desktops
and mobile applications.
It provides filters angular
provides filters to filter
out different types of data
such as numbers lower case
and upper case letters Etc.
Not just that you can also
design your own filters
according to your requirements
two-way data binding angular
allows two-way data
binding which means
if any changes are
made to the models
the corresponding views also
get updated accordingly.
Not just that you
can also Update the models
through the views not to show
you all what this actually is.
Let me get back
to my project and over here.
I'll just click on any
of these courses.
So as you can see the name
of my course is python now
two-way data binding actually
refers to changing
models from the views
and views from the models.
So as you can see over here
when I start deleting
any of these letters,
the name of the course is also
getting altered this is nothing
but two-way data binding will
get into more details of this.
Later on in
the session modularity.
This is one
of the biggest reasons
for angular's popularity
developers can make use
of different modules to create
single page applications testing
abilities angular provides easy
and simple testing as a result
of modules separation
feature angular is flexible
and extensible angular
is very accommodating
when it comes to integrating
with the existing
technology stack.
So what is new
in angular 8 Angular,
it requires the support
of typescript 3.4
for web development.
Opt-in IV preview IV is
the name given to Angela has
Next Generation compliation
and rendering pipeline.
This will help you optionally
preview your website to see
how it works differential
loading as a part of
its built process angular HCL.
I will be able to
produce both Lagasse
and modern JavaScript bundles.
That is es5 or ecmascript 5
or es2015 Plus.
Es2015 is nothing but ecmascript
6 this implies a differentially
loaded client side
with improved speed and TDI
which is time to interactive
for present browsers
backward compatibility of
router backwards compatibility
of router helps
in simplifying the upgrade path
for large projects opt-in
usage sharing with this feature.
The angular team will be able
to collect Anonymous information
with your consent to keep
a track of the commands
that are used
and the time taken to build.
Projects dependency updates
angular 8 has updated
the dependencies On Tools
like rxjs note and typescript.
Now this is actually done
for better performance
and sync with the current
environment web worker
bundling web workers
allow you to write code
that run separately
from the main thread
this improves speed
by parallelizing multiple tasks.
The developers of angular eight
have added bundling support
for web workers as
a result of requests
from various Developers.
So now let's move on
and take a look at the angular
architecture using angular.
You can build
client-side applications
in HTML and typescript.
Now, this is the reason why
angular can Implement core
and optional functionality
of typescript from its libraries
that you import
in your application the most
basic building blocks
of angular are nothing
but energy modules
into modules basically
provide a compliation context
for components present
in your project.
NG modules will collect
all the related code
into functional sets.
Therefore it can be claimed
that an angular app is defined
by a set of energy modules.
Every angular application
will have at least one module
which is the root module
this module enables
the bootstrapping process
which I will discuss later on
and typically has
many more feature modules.
The angular components actually
defined views views are nothing
but sets of screen elements
that angular can select
among and modify according
to your applications logic
and the information
that is given components
in turn make use of service.
Has these Services
provide application
specific functionality
that is related directly
to views service providers
can be injected into components
as dependencies making
your code module or reusable
and efficient components
and services are nothing
but classes having decorators
that are used to mark their type
and provide metadata
informing angular
how to use them the metadata
for a component class
Associates it with the template
that defines a view
templates combined
ordinary HTML with anger.
Directives and binding mock-up
that allows angular
to modify the HTML
before entering it
to display the metadata
for a service class tells
angular to make it available
for other components through
dependency injection components
Define many views arranged
in a hierarchical order.
The router service can be used
to define navigation paths
among various views
of your application
as routers provide
sophisticated in-browser
navigational capabilities.
So moving on in the session.
Let me show you guys
how to install Visual
Studio code the reason why
I'm using visual studio code is
because it's lightweight fast
and open source
cross-platform application.
And it also has
other cool features to install
Visual Studio code.
You can go to the official
website and download the version
that is suitable
for your operating system.
Let me just go
to the browser over here.
I'll just type in
vs code download So
as you can see, this is
the official Visual Studio code
downloading website from here.
You can choose any
of the versions
that is suitable
for your operating system
and download the installer.
Once you're done with installing
it on your systems.
All you have to do is
just complete the setup
and it will be ready to use
since it's already
installed on my system.
I'm not going to download
the installer again.
So once you're done
installing Visual Studio code,
you'll have to install angular.
The first step is to install
node.js the reason
for Installing node.js is
that all web browsers such as
Chrome Firefox Etc understand
only JavaScript the all the code
that we write in typescript must
be transpired to JavaScript.
The typescript
transpiler requires.
No chairs for generating the
typescript code to JavaScript.
So to install node.js you can go
to the official website.
And from here choose the version
that is suitable
for your operating system
and download the same.
Once the installer
has been downloaded install
node.js on your systems
after you're done
with the installation.
All you have to do is open
up the command prompt.
And over here just type
in the command note - V.
So as you can see over here,
the version of note
that I'm using currently is
12 point fourteen point one.
So the moment note
is installed on your systems.
You'll be able to see
the version of it.
So I hope you guys
are clear still here.
The next step is installing
the angular CLI
or command line interface.
Here I'll be making use
of npm as a package manager
which comes along
with node.js by default now
to install the angular CLI.
All I have to do is
type in npm install.
- g at the rate
angular / CLI the -
G over here specifies
that I want to install
the angular CLI globally.
This is going to take a while.
The angular CLI is actually
a command line interface tool
that is used to initialize
develop and maintain
angular applications.
We can make use of this tool
directly in the command shell
or indirectly through
an interactive UI
or use such as angular console.
I just have a new patch version
available over here.
So I'm going to run
the npm install -
g n PM command.
So now I have
the latest version of npm.
The next step over here is
to create a new angular project
now to do that.
I'll have to make use
of the ingenue command.
The NG new command
will be followed by the name
of the project.
So I'll just take
a sample project over here.
I'll say Ang new
and I'll just call it sample.
And I just call it
as sample project.
Now when you do this,
you will encounter
two questions that is
if you would like to add
angular routing and what type
of style sheets do you prefer.
So for the first question,
I'll just choose.
Yes, and press why.
And for the second
I'm going to choose CSS,
so I'll hit enter.
However, if you are comfortable
with any other style sheet,
you can go ahead
and select that one.
Now.
This is going to take
awhile to create a project.
The engine you command
creates an initial skeleton
of angular application
by default at the roots level
of the workspace.
Not just that it also
creates end-to-end tests.
When you open this application
on the localhost,
you will see that a simple
welcome page will appear
which you can modify later on
to create your own application.
So now our project is created.
Now, what I'm going to do
is just get into my project.
So the name of my project
was Sample project.
And I'll hit enter.
I want to open this project
in Visual Studio code.
So I'll just type
in code space Dot.
So now my project is opened
in Visual Studio code.
As you can see over
here my project already
contains a number of files
that are created by angular.
The first is the end-to-end
folder the enter
in folder contains a source
of files to perform set
of end-to-end tests
that correspond to
the root level application
along with test
specific configuration files.
Next up is the node
modules folder this
provides a set of npm packages
for the entire workplace
The Source folder
Source folder contains,
all the roots level application
source files that are required.
For your application development
the edit config folder
the edit config folder
specifies the configuration
for the code editors gets
ignored get ignore specifies.
The intentionally
untracked files.
That should be ignored by get
the angle r dot Json folder all
the CLI configuration defaults
for all projects
in the work space
including configuration options
for Bill serve and test tools
that the CLI uses such as
the eslint karma and protractor.
Next up is the browser's list
folder this folder configures
sharing of Target browsers
and node.js versions
among various front-end tools
Karma dot-coms dot
JS this consists
of application-specific
karma configuration.
Karma is actually a test runner
for JavaScript applications
package dot locked
or Json packaged locked
or Json provides
version information
for all packages installed
into node modules
by the npm client.
In case you make use
of your inclined this file
will be named as Ian Dot Lock
instead the package.json file.
This file configures
npm package dependencies
that are available
to all the projects
in the workspace the readme file
the readme file contains
introductory documentation
for the root app TS config
actor Jason this consists
of all the application specific
typescript configurations,
including typescript and angular
template compiler options.
TS config dot Json,
this consists of
default typescript configuration
for projects in the workspace
TS config spec dot.
Json file.
It consists of typescript
configuration for all
the application tests.
TS lint dot Json this
is an application-specific
T eslint configuration.
So now let me just open
the source folder
and show you what's present
within this the first folder
that you see over here is
the app folder this folder
contains all the component files
in which your application logic
and data are defined.
Next up is the assets folder
as it's contained image
and other asset files
that are to be copied
when you build your applications
environments it contains build.
Configuration options
for particular Target
environments by default.
There is an unnamed
standard development environment
and a production environment.
You can Define additional Target
environment configurations.
If required fav icon dot Ico.
It is nothing but an icon to use
for this application
in the bookmark bar
the index dot HTML file
the main HTML page
that is soft when someone
visits your site.
The CLI automatically
adds all JavaScript.
And CSS files
when building your application,
so you typically don't need
to add any script or link tags.
Next up is the main Don TS file.
The main 30s file
is the entry point
for your application.
It compiles the application
with jit compiler
or the just-in-time
compiler and bootstraps
the application Root module.
The applications root module
is nothing but the app module
which I'll be showing
you guys shortly
and you can also make use
of the aorta compiler
with without changing any code
by appending the -
- aorta flag.
Now this - -
taotie flag should be
attached to the build
and the surf commands
in the CLI polyfills 30s.
This file provides scripts
for the browser support
Styles dot CSS lists.
All the CSS files
that Supply styles for
this project tests dot DS file.
This is nothing
but the entry point
for all your unit tests
with some angular specific
configuration typically.
You don't need to edit
any of the code
that is present Within
These test files.
So now let me open the folder
that we are going
to be modifying in order
to create our application.
That is nothing
but the app folder
the app folder also consists
of a number of files
within itself the app
component 30s file
defines the logic for
the applications root component
or the app component The View
that is associated
with this component becomes
the root of the view hierarchy.
The app dot component
dot HTML file.
It defines HTML
template associated
with the root app component
a component dot CSS file.
This defines the base CSS style
sheet for Route app component
the app module dot ES file.
This is a very important file
and it defines the root
module name the app module
the app module tells angular
how to assemble this application
it initially declares
only the app component.
However as you proceed
when you add on more components
Have to specify them over here.
So as you can see over here,
it consists of
the app component now
when I create more components
for this project,
all I have to do is come
and import it over here.
So now that you are aware
of all these files,
let's move on and create
a simple project
in angular any website
generally consists of HTML CSS
and JavaScript HTML
basically deals with
the content definition
where our CSS provides
the layout JavaScript
actually helps you make Dynamic
and responsive web applications.
So in case you do not have Idea
about these go ahead
and check out anyway,
cos tutorials on the same.
So now let's move
on and write a simple
hello world program in angular.
So I've created
a sample project.
Now.
What I'm going to do is run this
project to run this project.
I'll get back to the command
prompt and over here.
I'll just type in NG serve.
What 4200 seems to be in use?
So in case you guys
encountered the same problem?
All you have to do
is type in netstat?
followed by - A - ol + -
n now this is going
to return all the processes
that are running on my PC.
So what I'm going to do
is just find Port 4200.
So I'll just type
in for to double 0
and then find it.
So as you can see over here,
the process ID that is making
use of this port is 3680.
Now, what I'm going to do
is kill this process
to kill this process.
All I have to do is come down.
So just remember
that process ID.
It's three six eight zero.
and over here,
I'll type in task kill /
capital f / Capital PID the /
not a question mark sorry
followed by the process ID.
It was three six eight zero.
So we'll just type
in three six eight zero
and I'll hit enter.
So now the process
having the process ID
three six eight zero
has been terminated.
Now when I run the NG
serve command again,
I'll not encounter
the same problem.
So as you can see my project
has compiled successfully now,
what I'm going to do is go
to my browser and over here.
I'll just type in localhost.
So as you can see our sample
project app is running.
This is a welcome page
that is created by angular now
to build your projects.
All you have to do is go
and modify this so I'll just
get back to my project.
So what I'm going to do is
just open this app
component dot HTML file.
I'll delete everything
present over here
except the router Outlet.
And over here,
I'll just give a H1 tag.
and as this type in hello
world I'll save this
I'll get back to my project
and I'll read out this page.
So as you can see over
here instead of seeing
that welcome screen all I'm
seeing over here is Hello World,
which I modified in my project.
So that was just very basic
will get into more details
of the later on but for now,
let me tell you guys
how this angular application
actually is working
the execution of
an angular application starts
from the angle r dot Json file.
This file as already
discussed earlier is used
to define all the Standards
and pots for your angular
project also angular
dot Json file specifies,
which means TS
and index dot HTML file
has to be executed.
So as you can see
on the screen,
I have both the index dot HTML
and the main TS file present
in the angular dot Json file.
Now, once this main dot t--
s file is detected.
It is compiled
as it contains the code
that is required
to bootstrap or start
off the angular application
from this main dot DS file.
Angular moves to the app module.
So this app module is present in
the app module dot t-- s file.
So once the main dot t--
s file is executed.
It moves on towards
the app module dot t--
s file the app module
dot JS file consists
of all the components
that are required by
an angular application.
These are the components
that a girl needs to know
in order to run the application.
So in case you
create any component,
it has to be declared within
the Declarations array present
in the energy module decorator.
Angular will check
for this bootstrap array
and then it moves on
towards the app component.
So the app component is present
in the app component 30s file
the app component OTS file
specifies the selectors
the tempered URLs
as well as the style URLs all
the components that are present
in an angular application are
related to this root component.
The a fruit selector is present
in the index dot HTML file.
So to summarize it I can say
that the execution begins
from main door TS
and then it's passed on
to the app module or TS file
following which the app
component DTS file is executed.
So like I've already mentioned
before angular is built
on typescript before moving
on further in this session.
I would like you
guys to get familiar
with typescript In case you're
already familiar with typescript
you can skip this part
and move on towards the next
spot under the section.
I'm going to show you guys
how to install typescript
3.4 and then the basic
types are available
in typescript variables type
assertions functions classes
and interfaces,
so to begin with
let's move on and see
how you can install typescript
on your systems to install
typescript just open
up your command prompt.
So typescript is
programming language
that was developed by Microsoft
and it is basically
a superset of JavaScript
with typescript angular
projects can be created
using object-oriented
programming model.
The typescript programming
language is designed
for development of
large applications.
However, it needs to be
trans compiled to JavaScript
as the browser's understand
JavaScript only this process
of converting typescript
into JavaScript is called
as transpilation while using
typescript you can make use of
any of the JavaScript libraries.
Also any code you write
in JavaScript will
be valid in time.
As you can convert
JavaScript code into typescript
by simply changing the extension
from dot JS 2 dot t--
s also typescript
is not platform-specific.
It can be used
on any browser device
or operating system.
So what is the difference
between typescript
and JavaScript typescript
is an object oriented
programming language
whereas Java Script is just
a scripting language typescript
can support static features
modules interfaces Etc,
but JavaScript on the other Has
no support for any of these
so to install typescript
on your systems.
All you have to do is open up
the command prompt and then type
in the command npm install -
gee typescript And
then you hit enter.
So as you can see typescript
has been installed
on my system next up.
You're going to check
for the version
of typescript to do that.
Just type in TSC - - version.
And hit enter.
Okay.
I just made a spelling
mistake of here.
It's a version.
So as you can see over here,
the version of typescript
that has been installed is
three point seven point five now
to write some typescript code.
You'll have to open up a file
in Visual Studio to do that.
What I'm going to do is just
type in code followed by
the name of my file.
So I'll just say Example
1 1 do not forget to add
in the extension.
That is dot DS.
So as you can see on the screen
a new file has been opened
wherein I can write
my typescript code.
So what I'm going to do
over here is simply
write one function
that is going to return
something to the console.
So for that I'll just
type in function.
which is a keyword and then
this will be a log function
and I'll just pass a parameter
say a within this function.
I'll have a simple
console DOT log statement.
It is going to lock
something to my console.
Next I'm going to define a
so I'll just say variable a
and I'll just say hello world.
Once this is done.
I'll have to call
the log function.
So just say log of a I'll save
this and I'll get back
to my command prompt now
to convert this into JavaScript.
You'll have to call
the typescript compiler using
the TSC file named TS command.
So here the file name
is example 1 1
so I'll just type
in TSC example 1 1 dot DS.
So now the file
has been converted
or the file has been transpiled.
So basically when you do this,
the typescript code
will be converted to job.
Script, but by using
angular you will not have
to do this manually.
The angular CLI
will automatically call
the typescript compiler
and perform transpilation
when you use the NGS of command.
So now if you want
to execute this file,
you have to type in node
followed by the filename dot JS.
So I'll just type
in example 1 1 dot Js.
So as you can see over here,
the transpile JavaScript
has Returns the output now
in case you want to view
what is present in that example
that XI dot JS file.
All you have to do
is just type in code.
Example 1 1 dot J's.
Okay.
So as you can see here is
the transpiled code the code
that we have written
is in typescript,
but the code
that has been transpiled
to JavaScript is present
in example 1 1 dot JS file.
So I hope you guys are clear
with this in case you have
any problems with the functions
or the syntax do not worry
because I'll be covering each of
these later on in the session.
So the first thing
that I'm going to be discussing
over here is the basic types
that are present in
typescript typescript supports
almost the same data types
that are present in JavaScript.
These can be Boolean
numbers strings arrays
tuples enum any void null
and undefined never object
and type assertions now
in case you're coming
from JavaScript background,
you guys will be very much
familiar with the VAR keyword.
But please make a note
that in typescript.
It is better to make use
of the let keyword rather
than the VAR keyword.
The let keyword was included
in JavaScript in ecmascript 2015
and is considered as a standard.
As let is much safer
compared to VAR.
So now let's move on and take
a look at each of these.
So the first basic type
that I'm going to be
discussing over here is
the Boolean data type
as many of us know
Boolean data type refers
to true or false
values in typescript.
It is preceded by
a Boolean keyword.
So before writing
down the Boolean type,
what I'm going to do is show you
how to declare
the types in typescript.
So the first method is
to make use of the VAR keyword
followed by the defile
and then a colon symbol.
the type of variable followed
by an equal to sign
and then comes the value.
So this is the first method
the second one is much similar,
but you can omit the value
present over here.
So just copy this paste it over
here followed by a semicolon.
The Third Way is to Simply
specify the value
without specifying the type.
So just copy that.
And instead of type.
I'm going to have the value
and instead of the colon symbol
will be an equal to symbol.
The fourth method is declaring
neither the value nor the type
in this case the data type
of that variable becomes any
which means you
can initialize any type
of value to that variable.
So I can just have a variable
followed by the identifier.
And then the semicolon so
these are the four methods
in which you can declare
variables in typescript.
So before this,
we were actually
talking about Boolean.
So in case I want to create a
variable holding Boolean values,
all I have to do is type
in let I'll call the variable
as be and specify
the type to be Boolean.
And I'll give
the value as false.
So as you can see over
here Visual Studio will also
give me details about
what's this actually is.
So when I hover over B,
it says that b is
a Boolean type variable.
So in case I want to print
out the value of B,
all I'm going to do is type
in console DOT log B.
I'll just save this.
I'll get back
to my command prompt.
And the first thing
that I'll have to do is call
an T. SC e XM dot TS.
Sorry, I just made a mistake
in the name of the file.
It's exm to okay.
So now my file is transpiled
now to execute this file.
All I'm going to do is just
type in node file name.
That is e x M2 dot JS.
Okay.
So as you can see the value
is false the next basic type
that's present in
typescript is numbers.
So in typescript
numbers are nothing
but floating Point values
and typescript supports
all types of numbers such as
octal binary hexadecimal
Etc to declare any
of these you can make use
of the number keyword.
So in case I just change
the value from Boolean
to number and this
will not be false.
This will be some value say 10
and then just change
the name of the variable.
I'll say call it C
and then instead
of logging be a log C. Okay.
So now let's transfer
while our file.
And then I'll type
in note X M2 dot Js.
Okay, so as you can see
the value of C is 10 in case you
want to specify hexadecimal
octal or binary values.
You can do it
in a similar manner.
So let me just take an example
of a hexadecimal value.
So I'll just type in let D
which is a number.
Equals zero.
Oh one two three.
So this is an example
of an octal value.
The smaller that you
see over here specifies
that this is
an octal value similarly.
If you have to specify
binary or hexadecimal values,
all you have to do
is change this by b or X.
So now let's move
on towards next type
which is strings strings
are used to work
with textual data in typescript.
You must use string keyword
to specify them.
Say, for example,
I have a Able to say name.
So I'll type Name colon string.
I'll just change
the variable name
since I've already
declared this before.
So I'll just call it
as first name rather.
This is going to be a string
and I'll just specify
the name as Eddie Rekha.
Okay.
So this is how you specify
strings now in case
you want to execute this.
All you have to do is get back
to your command prompt
transpile your file
and then make use
of the node command
followed by the name
of the file dot JS
to execute this.
So now moving on
towards the next basic type
which is arrays
typescript supports arrays
just like JavaScript,
you can declare
them in two ways.
The first is the use the type
of the element followed
by square brackets
or an array or specify them
with an angular brackets, okay.
So this clearly this from here.
And I'll take two new variables
and say let a a be an array
of string type.
So string followed by square
brackets now for the values.
I'll just specify typescript
and JavaScript is
80s followed by Js.
Okay.
So this was the first method
the second method was making use
of the angular brackets.
So just type in let a b
which is a new variable followed
by the array keyword
and then I'll open up
the angular brackets
and specify the type
and then you can pass
in the values.
You can specify any values
of your choice.
So this is how you declare
arrays in typescript.
So I hope you guys are clear
with this next up.
Our tuples tuples are types
that can also be
used in typescript.
In case you have
to Define arrays
with fixed number of elements
whose data types are known
but they can be different.
So this means I can have
any variable for example,
let AC beer Tuple
of numbers and strings.
So I'll just say number
the first element and string
as the second element.
So here I know the type of data
that this Tuple is going to hold
but it's not going
to change over time.
Okay.
So the next type
that I'm going to be discussing
over here is enum enum.
In typescript allows
you to define a set
of named constants.
Okay.
So if you guys are wondering
what are constants there
are constants are variables
whose values cannot be changed.
Say for example,
I just type in Co NS t
with stands for constant.
I'll declare a variable ad
and I'll specify
its value to be 10.
So what happens
when I do this when you make use
of the const keyword the value
of this variable,
which is AD will not be
changed over time.
So if you guys are wondering
when you should
actually use this,
you must make use of cons
for all those variables
whose value you wish to preserve
and not for the others.
The idea is
that if a variable
didn't need to be modified
someone else working
on it should not do it.
But using the const keyword
the code becomes foreseeable
and helps in reasoning
out the flow of data.
So now The enum type enough
in typescript allows
you to define a set
of named constants using
these enums you can make
document intent easily
or even create a set of
different cases in typescript.
You can use both numeric enums
and string based in arms alums
are defined using
the enum keyword.
So let me take an example
of a numeric enum.
So what I'm going to do
is just type in enum,
which is the keyword
followed by fruits
and then I'll just call
this enum as fruit.
Now what I'm going to do is
specify some values within this.
So the first value
is going to be apple
and I'll equate
apples two one now.
We'll discuss why I'm doing
this later on now.
Let me take another fruit.
I'll say banana and mango
and finally an orange.
Okay.
So this is how you declare
an enum the numeric enum
that you see over here
has Apple initialized
to 1 the other members
are Auto incremented
having the values 2 3 & 4
in other words fruit.
Apple has the value 1 banana
has to Mango has three
and orange has for however,
it is not necessary
that you have to specify
any value to this in case I
just remove this value.
Then Apple will be initiated
to Value 0 banana would be
one mango would be
to and orange would
be 3 respectively
this Auto incrementing
Behavior comes in handy
when we do not care
about the member values,
but do care
that each member has
a distinct value in that in um,
in case I want to return
the value of Any of these
what I'm going to do is just
type in console DOT log.
And over here, okay before this.
I just take a new variable
or I'll just call
it as root name.
This is going to be a string
and then I'll just
call fruit of too.
And then I lock the fruit name.
Let me just save this get back
to my command prompt
and over here.
I'll transfer file this file.
So now to execute it.
I'll just type
a note E X M2 dot JS.
Okay.
So as you can see over here,
the fruit that is initiated
to do is mango.
Okay.
So I hope you guys
have understood this.
Okay.
So now moving on
towards next type
which is any
the any type is used
when you do not know what is
the data type of the element
this usually happens
when you're dealing
with Dynamic values
and you do not On to encounter
compile time errors
in case the type of the element
generated is not as
that you assumed the any data
type allows you to opt-in
and opt-out of type checking
during compilation.
So in case you want to declare
a variable of any type,
all you have to do is just type
in let followed by the name
of the variable
and specify any so
now the variable AG
can hold any value such as
numbers strings Etc so over here
if I just specify a g equals 10
And also a g equals
the string say Eddie Rekha,
you can see that it's
not showing any errors.
But in case I change this
from any to say number,
you can see
that when I assign a string
to this it throws an error.
Okay.
So I hope you guys are clear
with this now moving on
towards the next type
which is the object type
the object type basically
represents a non
primitive type in typescript.
This means it can be any type
which is not a number
or string Boolean symbol null
or a Identified in case you want
to declare an object variable.
All you have to do is make use
of the let keyword.
Let me just clear this.
Specify the name of the variable
and then type an object.
So this is how you declare
object types in typescript.
So before moving on further,
let me clearly differentiate
between the left
and the VAR keyword.
So what I'm going to do over
here is just create a function
and then I'll specify some name.
I'll just call this as my funk.
And within this I'll have a
for Loop and first I'm going
to take the VAR keyword
or the VAR keyword.
So I'll say variable.
I initiate it to one
until I is less than or equal
to 2 and then I plus plus.
Okay.
So under this condition is met
what I want to do
is just log the message
saying welcome to edu Rica.
So it's a console DOT log
and I'll type in the string
which is welcome to Erica.
So after that is done,
I'll take another
console statement.
and I'll just type
in the final value
of I now I'll come
out of this function
and I'll call this function.
So now let me just save this get
back to my command prompt
and execute this.
So as you can see over
here the string welcome to edu.
Rekha has been returned
to X this is
because the value of I
at first was one and
until the value of I is less
than or equal to 2.
I wanted it to print the string.
Welcome to edu Rekha.
So therefore welcome to edu
Rekha printed twice followed
by the final value of I okay.
I'm not specified the final
value of I let me just do
that over here
by specifying a plus sign
and then I sorry for that.
I'll read transpile it.
and execute the function Okay.
So here it is.
The value of I is 3 so now
let's see what will happen
if I change this VAR
to let so just erase this
and I'll type in lit.
Okay.
So as you can see over here
the scope of I is not going
Beyond this for Loop the eye
that is present outside this
for Loop throws an error.
So I hope you guys
have understood this now.
This is why the left key word
is considered to be more safer
than the wall keyword
eye is visible only
within the for Loop,
which is the nearest block.
And if you try to access
it anywhere outside it
it is not possible.
However, even if you compile it
after changing from award to let
the compiler will compile it
and convert it into JavaScript.
The Javascript file
can be executed to return
the corresponding output.
So, let me just save
this get back to the console.
I'll clear the screen and I'll
transfer file this file again.
Okay, so as you
can see over here,
it has thrown an error
saying cannot find the name I
so I hope you guys
are clear with this.
So now moving on.
Towards something very important
with this type assertions
when you declare
some variable with the type,
you will see the typescript
will assist you on all
the available methods
that you can use along with it.
But typescript also allows
you to declare a variable
without specifying its type.
So what I'm going to do over
here is just take an example.
So let me just take
a new variable.
I'll say let my variable
which is of type string hold
some value say Eddie Rekha.
No the moment.
I specify my variable
followed by a DOT symbol.
You will see typescript
has given a list
of all the functions
that I can use along
with this variable now
in case I do not specify
the type of this function.
So what I'm going to do is
just delete this and then
when I type in this function
followed by a DOT symbol,
you will see
that this is of any type
and it does not give
you any suggestions.
Now in this case,
you will need to explicitly
specify the method
that you want to use.
If you still want
typescript assist you,
you can make use of
type assertions type assertions
will help you specify
the type of variable.
Even if you have
not specified them
while declaring it
now type assertions
can be done in two ways.
The first is to make use
of the angular brackets.
So what I'm going to do here
is take another keyword.
I'll say let take
another variable.
I'll say my variable 2
and this will be of number type
2 which I'll specify
the string value
of my variable So within this
as a steak the Brackets,
I specify the string type
and I just called
my variable previously
when I typed my variable
followed by a DOT symbol
typescript was not assisting me
since this is of any type now.
I've specified that this is
of string type the moment.
I type a DOT symbol
along with this you
will see the typescript
is assisting me again.
So this was the first method
of specifying type assertions.
The second method is to make
use of the as keyword.
So instead of this
what I'm going to have
is my Table as a string.
So I hope you guys
are clear with this.
So that was about to type
assertions now moving on
towards the next topic
which is functions
in typescript functions,
as we all know are
the building blocks
of a program functions allow
you to build up different layers
of your program the deal
with abstraction information
hiding Etc in typescript
functions play a very
important role in describing
how to do tasks.
Another Advantage.
Is that typescript
also adds some new
capabilities to stand on.
Two functions to make
them easier to walk
with in typescript.
You can create functions
both for the name or as
Anonymous functions
just like JavaScript.
This will let you choose
most ideal approach
for your applications.
So now let's create
a function of here.
I've already taken
a few examples before
so I'll just take
a function say product.
And I'll pass in two variables
as parameters to this
and then open up
the curly braces
and within this I'll just
have a single return statement
that is going to return
the product of X and Y.
Okay.
I've made a spelling
mistake of here.
So this is how you create
functions in JavaScript you type
in the function keyword followed
by the name of the function
and the parameters,
then you'll have to specify
all the statements
that come within this function
within curly braces.
Now in case you want to call
this function simply specify
the name of the function
along with the parameters.
I just say 2 comma 3 so
now to run this file,
all you have to do is get back
to your command prompt type
in TSC followed by
the name of the file
and the note
followed by the name
of The file dot JS similarly
if you want to create nameless
or Anonymous functions just type
in Anonymous over here
and then I'll make use
of the let keyword.
I'll take a new variable
and to this I'm going
to assign the value
that is returned by a function.
Now this function is
actually a nameless function
or an anonymous function.
Sorry guys.
I have to specify an equal
to sign over here.
I'm going to have
the same return statement
for this as well.
So now let me just save this
and before executing this
I'll just Open console.
DOT log of w so now let me get
back to my command prompt
and execute this.
So as you can see over here,
I have the value of 4 star 6,
which is 24.
So I hope you guys are clear
with this functions
can also refer
to those variables that reside
outside the function body.
Let me just delete
this from here.
So what I'm going to do here
is declare a new variable
outside this functions body.
So I'll just call
this variable to be Y
and I'll specify
its value to be 3 now.
What I'm going to do
is return the product
of X star y. I'll give
this a different name.
I'll call it a z Then
why so this time I'll return
the product of X star y star Z,
and then I'll call the function.
So as you can see over here,
I have the value returned as 45
which is a result of multiplying
3 cross 3 cross V.
So I hope you guys
are clear with this.
You can also add type
to a function in case you
want to add some type to it.
All you have to do
is just specify the type
of variability want
to give over here.
So in case I want
to specify X to be a number,
I'll just say x
colon number and Y: number
you can also
have different types.
So instead of why having
number you can also.
Have it as a string
or anything else.
So now talking about
something very important,
which is Arrow functions are
all functions are somewhat
like Lambda functions
of python C sharp Etc.
These functions can be defined
in just a single line.
So to specify an error
function of here.
Let me just take a new variable.
I'll just call
this variable a ZX.
I'll open the parentheses.
I'll take in a variable a
I'll specify the variable are
and then the arrow function
and I'll just lock the value
of a so over here my variable X
over here holds the value
of what the function
has returned a over here
is the parameter
and the action to be performed
is console DOT log,
so now I'll just get back
to my command prompt.
What I'm going to do is
just transpile this file.
And I just opened
the JavaScript version of this.
Okay.
So as you can see over here,
this is the typescript function
that I've written.
Now when I open
the Javascript file,
you can see that it is much more
bulkier compared to that
of the typescript file
Arrow functions are
very useful in terms
of reducing the code size.
Plus they can also be soft
to other methods as
inputs if my function
has no parameters.
You can also specify them
without any parameters.
So in case you do not have
any parameter simply leave
empty Brackets like this.
So I hope you guys
are clear with this.
So now moving on towards classes
in typescript typescript
introduced classes
so that they can Avail
the benefits of
object-oriented techniques like
encapsulation and abstraction.
The class in typescript
is compiled to plain
JavaScript functions
by typescript compiler to work
across platforms and browsers.
So class in Java Script can
include Constructors properties
and methods now,
it's very important
that you guys concentrate
on this part
because we're going
to make you Of this syntax
in our project later on.
So what I'm going to do
here is to create a class.
So I'll just type
in the keyword class
and I'll name this as my class.
Next up.
I'll open the curly braces
within this I'll specify
a Class Property.
I'll just take a variable J
of number type now J is nothing
but the property
of my class so next up.
I'm going to have a Constructor
and within this I'll take
a new variable say K
and this is also going to be
of number type you can give
any types of your choice.
I'm just taking
this for instance
within this Constructor.
I'll just have
a simple statement.
So I'll say this dot value
of J is equal to Next
I'll declare a function.
Let me just call this as value.
And within this I'll have
a simple return statement.
That says the number is
plus this dot my variable
or this dot j.
So that is done.
Now.
Let me come out of this class.
So my class is ready.
But as we all know to access
any of the variables
or functions present
within this class,
I'll have to create
an object of this class.
So to create an object.
I'll have to make use
of the new keyword.
So what I'm going to do is just
take an object name and say
my object equals knew it.
The keyboard to create
an object followed by
the class name some my class.
My class Constructor
has one parameter over
here whose value I'll have
to specify so just specify
the value is 6 next up.
I will make use
of the console DOT log statement
and then I'll make
use of the object
which is my object dot value,
which is the function.
Okay.
Now we just execute this code.
So as you can see,
I have the output
as the number is 6 so
basically my object over
here is accessing the function
that is present in my class.
And then it Returns
the corresponding
value typescript classes
also support inheritance.
Inheritance is the ability of
a program to create new classes
from an existing class the class
that is extended to create new
or classes is called
as the parent class
or the superclass.
The newly-created classes
are referred to as the child
or the subclasses a class
inherits from Another class
using the extends keyword child
classes inherit all properties
and methods except the private
members and Constructors
from the parent class.
Another point to be noted
over here is that typescript
does not support
multiple inheritance.
So what I'm going to do is just
create a new file over here.
So I'll type code exm three TS.
And over here,
I'll just type
in the syntax of inheritance.
So what you have to do is make
use of the extends keyword.
So I'll have the class child
followed by the extends keyword
and then the parent class.
So what I'm going to do is get
back to my previous example
and from here.
I'll just copy the first
half of the school.
Let me just change
the name of this class.
I'll call it as new class
or parent class.
Now in case I want this
to be a parent class,
what I have to do is make
some other class inherits this
so I'll just take another class.
I'll call it as child
or child class.
Please make a note
that the first letter
should be in caps.
I'll do it over here as well.
This is nothing but convention
and it's better to follow it.
So the child class actually
extends the parents class.
So within this,
I'll specify some new
variable say l
and this is also going to be
of type number it can be
of any type though next up
is the Constructor variable M
of types number now,
this is specific
to the child class.
Now, what I'm going to do
is make use of the variable
that is present in the parent
class case the parameter
that's present in
the parent class.
The reason why you're seeing
all these red lines over here is
because I've not made
use of super keyword.
So what I'm going
to do over here is Type
in the super keyword
and I'll specify the parameter
that have taken
from the parent class.
That's K.
So as you can see all
the red lines have disappeared
and on also type in this.
Okay, so that is done now.
I'll create a value class
within the child class.
And I'll return I
return the value of K
and the value of M.
So just stipend.
Value from parent is
plus this dot j plus
and the value from child is
plus this dot l, so,
that's it.
I'll come out of this function.
I will create an object
of this class.
I'll send you object
and the name of the class
which is child class.
I'll pass in the values as 12
and 23 and then I'll make
use of the consult
or long statement.
And we'll call the value
function using this.
So this is how you create
child classes in typescript.
You can also make use of
access specifiers in typescript.
They can either be
public private or protected.
For example,
if you make the parent
class variable as private,
you will see that an error will
be shown in the child class.
So just get back
to my class over here
and over here for this property.
I'll just specify this
as to be private.
Now when I type
this dot j over here,
you can see that type.
Skip is throwing an error.
You can also see the message
that says property J is private
and only accessible within
the parent class similarly
if I change it from
private to protect it.
You will see
that the error disappears now.
This is because protected
members are visible
to child classes as
well private members
are accessible only
and only within the class
and nowhere else.
So now let's move
on towards typescript interfaces
and interface is a structure
that will contain only
the Declaration of fields
and methods and they'll be
no definition of it
when some class inherits
and interface that class
has to Define each of them
within the class itself.
I'll create a new file of here.
In case you want
to Define an interface,
you'll have to make use of
the interface keyword followed
by the name of the interface.
I'll just specify the name
to be my integers within this.
I'll have a few variables say s
which is a number T,
which is a string
and then a function I'll just
call it as my function.
Okay.
So as you can see over here,
none of these have
any values assigned to them
nor does my function
have any definition now
in case of classy
Implements this interface.
It will have to specify
values to S and T
and also redefine my function.
So let me just take a class.
I'll call this class A to make
use of that interface.
I'll have to use
the implements keyword so
implements my integers.
So the reason why
you're seeing an error is
because Class A
has not redefined anything
present within the interface.
So the moment I read
to find everything
present in the interface
the error will disappear.
So what I'm going to do
is type in s now And D
which is spring.
And then I'll take a Constructor
of this class to which
I'll fasten the same values.
That's SNT.
So this dot s is s
and this dot T is T and then
I'll redefine the function
which is my function.
So as you can see over here
the moment I've redefined each
of these the error
has disappeared from here.
So here I'll just type
in console DOT log
implementing an interface
and then I'll return the value
of both these variables.
That's SNT.
So I'll type in this dot S
Plus a space character
and this dot T.
Now.
I will create an object.
Let objects AO equals new
followed by the name
of the class,
which is a and then I'll have to
specify two parameters to this.
The first is s which is
a number the second is T,
which is a string.
So for S. I'll just say one and
for the string and Say hi.
Okay, so that is done
and I'll make use of the console
DOT log statement again.
I'll say oh.
My function.
Okay, let me just save this get
back to my command prompt
and transpile this file.
Sorry guys.
I've executed The
Inheritance example,
so I'll just transfer
file the file where
and I've written this
so I'll just say TSC.
That's X4 dot TS.
So as you can see over
here the values 1 and high
have been returned.
So I hope you guys
are clear with this.
So now let's get
back to angular.
So the next most important thing
that you have to know is
the building blocks of angular
the building blocks of angular.
Our modules components
templates metadata directives
data binding services
and dependency injection modules
a module basically allows you
to separate the functionality
of your program
into different parts.
These parts are Then
of each other
which means each modules outputs
are completely separate
from that of the other
if you make changes to any
of these the change will be made
on the to that module
and it will not interfere
with those of the others
in angular modules will allow
you to group together
other building blocks such as
components directives pipes
and services.
The modules of angular
are referred to
as NG modules applications
created by angular are driven
by functional sets,
which collect related data.
Therefore angular
apps are defined.
By a set of NG modules.
NG modules are
very much different
when compared to those
of the JS modules
or the JavaScript modules.
NG modules declared
a group of files
that can be passed and analyzed.
You can also make use of other
energy modules within one
by importing them
above all these modules
proved to be very much helpful
when you're creating
large applications that have
multiple functionalities
besides allowing clean creation.
These modules also help you
minimize the code size by reuse.
And optional import
of the required ones.
This is also referred
to as lazy loading.
Meaning you can load
any NG module only
on your demand not to forget
Angie modules are also one
of the biggest reasons
for angular as popularity.
Every application created
with angular will have
at least one NG module,
which is the truth module.
This route module is referred
to as the app module.
So by default the app module
will look something like this.
So let me just get
into the project.
We created initially
to show y'all what?
this app module looks like So
as you can see on the screen,
this is the default app module
that has been
created by angular.
It is present within
the app module dot t--
s file the import statements
that you see over
here are basically
JavaScript Imports the class
that follows has an NG
module decorator decorators,
basically modify classes
or property definitions.
They are also referred
to as annotations
and our JavaScript features
in angular these decorators
contains some metadata
or two classes.
And properties so as to convey
what they mean and how they
are supposed to function.
I shall explain
what is metadata
in detail later on
when we reach
the component section here
the NG module decorator first
identifies the root module
or the app module
and then tells angular
how to launch
and compile it by making use
of the metadata the Declarations
that you see initially are
the applications only
component Imports are used
to import the browser module
to attain browser Services
as Dom sanitization
rendering Etc.
Providers are nothing
but service providers
which we shall be discussing
later on bootstrap is
the root component
created by angular
and it is inserted into the
index dot HTML host web page.
So I hope you guys are
already familiar with this
because I've already
explained this earlier
while discussing how an angular
application actually works.
The app component is present
both in the Declarations.
And in the bootstrap array
this app component is created
by the angular CLI
or the command line interface
for every default application.
The Declarations are a present
in the module informs angular
above the components
that belong to that module
when you create more and more
components to your application.
All you must do is add them over
here components cannot be used
without declaring them
in the NT module class.
So make sure you declare
every component you
create exactly once
in the energy module class
if you fail to do so,
you're sure to
encounter an error.
The Declarations are a
can also contain declara bills
or components directives
and All the modules declare
labels should be present
in the Declarations array
and they must belong
to just one energy module
the classes that are declared
within one module are visible
only to that module,
but they can be exported
to other modules in case
you've defined some
of the component you
will have something
like your component
your pipe etc.
For now.
I have not created any of these.
So let me just remove
this from here.
So apart from this
the energy module can also
contain exports exports are
the subset of declarations
that are accessible
in the component templates
of other energy modules.
components as mentioned
earlier angular applications
have at least one component,
which is the root component
this root component connects
the component hierarchy with
a page document object module
or the Dome all
components Define classes
that have the applications
data and logic
and they also are associated
with the HTML template this HTML
template defines the view
that is to be displayed
their four components
are basically used
to control the views
of an MVC architecture
the Decorator will tell
angular that class immediately
below is a component
and provides the templates
and related components specific
metadata angular components
are the most basic UI
or the user interface
for your application
and they always are associated
with the template and are
subsets of directives.
The components logic is defined
inside a class this
basically determines
how it supports the view
components are created updated
and deleted by angular
as you proceed
in your application
your application can Take
action at each moment
in this life cycle
through optional lifecycle hooks
such as NG On in It lifecycle
hooks provide visibility
into the key life moments
and the ability to act
when they occur therefore
lifecycle hooks allow you
to control the components
runtime behavior,
and they are called only
when they are defined
angular provides a number
of lifecycle hooks such as NG
on changes and jion in it.
NG do check Etc
and jion changes will respond
to angulas resets.
At abound input properties
the method receives a simple
change object of current
and previous property values.
It is called before
the NG on init method
and whenever one or more data
bound input property changes
NG on in it the NG on in it
hook initializes the directive
or the component
after angular first displays
the data bound properties
and set the directives or
the components input properties.
It is called once
after the first NG
on changes method is invoked.
Angie do check and they do check
will allow you to detect and act
upon changes that angular can't
or won't detect on its own.
This function is called during
every change detection run.
There are many more
lifecycle hooks that you
can check out for yourself
in the official documentation.
Okay.
So now moving on
towards the next building block
which is metadata,
the metadata of a component
informs angular of all
the building blocks
required to create
and present the component along
with its view to be specific.
It links.
It's with the components either
directly with inline code or by
reference the component
along with the template
describes a view the selector
that you see on the screen
is a CSS selector
that tells angular to create
and insert an instance
of this component whenever it
finds the corresponding tag
in the template HTML template
URL the module relative address
of this components HTML template
alternatively you can provide
HTML template in line as a value
of the template property.
The providers array is
nothing but an array
of providers for the services
that the component requires.
So what exactly does a template
to templates are
somewhat like HTML
that inform angular
how to render the components
as mentioned earlier
angular views are created
in a hierarchical order
and the template
that is immediately associated
with the component defines
the components host view.
The hierarchy of viewers
will not just contain
views from components
of the same module,
but also those of the other
modules the Template syntax
as mentioned earlier templates
are very much like HTML,
but they have
angular template syntax
in angular component
can be a controller
or a view model.
Whereas the templates
of represent views having HTML
in templates angular template
make use of HTML
but the script element
is an exception.
It does not allow this tag
in order to eradicate the risk
of script injection attack.
If you make use of it
the tag gets ignored
and a warning will be
raised by the browser.
All however, some HTML tags
like HTML body base Etc.
Make no sense
in angular everything else.
However can be
used interpolation
and template Expressions
through interpolation.
You can add strings
into the text
that is between
HTML element tags
and within the
attribute of fineman's
the template Expressions
can be used to calculate
these strings interpolation
syntax strings can be added
using interpolation
by specifying them
within double curly braces.
However, you can Make use
of this in different places for
different requirements angular
actually converts interpolation
into property binding
another benefit of making
use of angular is
that it allows you
to configure the interpolation
delimiter and use something
of your choice instead of
the two curly braces to do that.
All you have to do is go
to the interpolation option
in the component metadata,
template Expressions.
Template expressions are present
within two curly braces
and they produce
a single value angular
will execute the expression.
And then it assigns
it to a property
of a binding Target
such as HTML elements
components or directives.
Okay.
So now moving on
towards the next building block
which is data binding.
If you do not make
use of a framework,
you'll have to push data values
into HTML controls turns
user responses into actions
and also value updates.
Obviously.
It is very irritating
to write everything
plus it will be prone to errors
and will be horrible
for someone else to analyze
the code using are you
can perform two-way data binding
which is a mechanism
that coordinates the template
along with the components.
All you have to do is add
some binding markup
to the template HTML
in order to inform angular
how to connect
with both these sides.
There are basically four forms
of data binding markup.
And each of these
has a Direction they
can either be to the Dome
from the Dome or both.
Okay.
So moving on let's discuss
in detail about property
binding property binding is
actually one way binding.
In property binding value Flows
In One Direction that is
from the components property
into the target
elements property.
It can be used to read or pull
data from the target elements
in the same way property binding
cannot be used to call a method
that belongs to the Target
element the events
raised by elements
can be acknowledged only
through event binding event
binding event binding
on the other hand
will allow you to listen
to certain events such as Mouse
movements keystrokes clicks Etc
in Allure event binding
can be achieved by
specifying Target event name
within regular brackets on
the left of an equal to symbol
and the template statement
on the right within coats.
So as you can see
in this example over here,
I have the target event name
which is click
and then the template statement
whenever event binding occurs
and event handler will be set
by angular for the Target event
when the event is raised
the Handler executes
the template statement
this template statement
usually involves a receiver
that performs a Action,
which is in response
to the event for example,
storing a value
of an HTML control
into a model binding is used
to convey information
about the event.
This information can have data
values like event object string
or a number.
Okay.
So now that you guys are aware
of both property binding
and event binding.
Let me tell you guys what
exactly is two-way data binding.
I've already given
a small introduction
about this previously.
So two-way data binding
allows your application
to share information
between a component.
Class and its template
in two-way data binding there
are two things can happen
in two-way data binding.
The first is setting
a specific element property.
The second is listening to
an element change event angular
offers a special two-way data
binding Syntax for this purpose.
Two-way data binding
can be specified
within a combination of brackets
that is square brackets outside
and parenthesis inside.
So it's going to look
something like this.
You're going to see
all this shortly
when we're actually
creating our Okay.
So now let's move
on towards pipes
with angular pipes display value
Transformations can be declared
in your template
HTML a class with the
at the red pipe decorator
defines a function
that transforms input values
to Output values for display
in the view angular
has various types
of pipes such as
uppercase V lowercase pipe
date pipe currency pipe Etc.
Not just that you can also
Define your own pipes as well.
So as you can see over here,
this inputs line is an example
of two-way data binding now just
because of this line
that I was able to manipulate
the name of the course
plus see the changes
in the name itself.
This button click over here
is an example of event binding
the course ID that you see
over here is interpolation
or property binding.
Okay.
So I was actually talking about
pipes now you can see over here
that I've specified
some value within
the interpolation brackets
and then I've made use of a pipe
in order to convert it
to uppercase letters.
So all the course names Would
be changed to uppercase not just
this you can also change
pipes sending the output
of one pipe function
to be transformed by
another pipe function a pipe
can also take arguments
that control how it
performs its transformation.
So now moving on towards
the next building blocks,
which is Services
a service is a broad category
that encircles values
functions or features
that are required by
an application service classes
have an arrow
and well defined purpose
components are differentiated
from services and angular.
Are so as to increase
the modularity and reusability
of your code separating
the components view
related functionality
and other kinds
of processing will make
your component classes lean
and efficient components
are also supposed
to present properties
and methods for data binding
in order to function as
a medium between view
which is rendered
by the template
and the applications logic
which generally includes
some notion of a module
component can delegate
their tasks to Services.
Say for example
fetching some data
from a Validating user input
or logging outputs
to the console by defining
such processing tasks
in an injectable service class.
You can make use
of those tasks available
to any component applications
can also be made more adaptable
by injecting different providers
of the same kind
of service by making use
of this class over here.
I'm going to send
a message to the console
whenever a course detail
has been fetched.
Okay.
So what is dependency injection
dependency injection can be used
by new components to provide
services or other things
that they need components
basically consume services
that is Services can be injected
into a component giving
that component access
to service class.
You must make use
of the injectable decorator
to provide the metadata
that allows angular to inject it
into a component
as a dependency.
Similarly.
You can also use the injectable
decorator to indicate
that a component
or any other class say
for example of service a pipe
or an energy module has
a dependency the Is the main
mechanism angular creates
an application white injector
for you during
the bootstrap process
and additional injectors
are needed you actually
do not have to create injectors
and injective creates
dependencies and maintains
a container of
dependency instances
that is reused if possible.
A provider is an object
that tells injector
how to obtain
or create a dependency.
If you need any dependency
in your project,
you must register a provider
with the applications.
Injector.
So as to follow the injector
to use the provider in order
to create new instances.
For example, the provider is
typically the service class
itself in my project
over here the course list
that I've shown you earlier
requires a core service.
So this is basically
my course service whenever
angular see some component
that is dependent
on the service.
It will first check
if the injector has
any existing instance
of that service
if the instant does not exist
the Will create one using
the registered provider
and then it adds it
to the injector before returning
the service to angular
once all the services
that are requested
have been resolved
and return angular can call
the components Constructor with
those Services as arguments.
Okay.
So now let's move
on towards directives
a directive in angular is
basically a class with the
at the rate directive decorator.
The angular templates
are Dynamic
when they are rendered
the Dom will be Formed
according to the instructions
given by the directives
a component is
technically a directive
but components are
so distinctive and Central
to the angular applications
that angular defines the
at the rate component
decorator separately.
This actually extends
the directive decorator
with template oriented features.
In addition to components.
There are two other
kinds of directives.
They are structural
and attribute to the directives
angular defines a number
of directors of both these kinds
the metadata for a day.
Active Associates the decorated
class with a selector element
that is used to insert it into
HTML in templates directives
typically appear within
the element tag as attributes
and that can either be by name
or the target of an assignment
or a binding.
So what exactly are structural
directives structural directives
are used to alter the layout
by adding removing
or replacing elements
in the Dom for example,
the NG for directive.
Let me just open my project
and show Y'all
where its present?
Okay, this ng4 is nothing
but a structural directive
this directive will allow
a list of elements
to my console attribute
directives attribute directives
will allow you
to alter the appearance
or behavior of existing
elements in templates.
They look like regular
HTML attribute just
as the name says
the NG module directive
that I've shown you earlier
which implements two-way data
binding is also an example
of an attribute directive this
Of modifies the behavior
of an existing element
by setting the display value
property and responding
to the change events.
So I hope you guys have
a clearer idea of each
of these building blocks.
Now, it's very important
for you guys to know this
because while creating
your applications you'll have
to make use of each
of these building blocks.
Okay.
So now let's jump
onto the most exciting part
that is creating an angular
application from scratch.
So like I've already told
y'all before make sure
that your development
environment includes no chairs
and an npm package manager
to check the version
of node on your systems.
You can type
in the command node -
V I've already shown this before
but I'm doing this
just for reference.
So as you can see,
I have no diversion
12-point 14.1 the first step
before creating a project is
to install the angular CLI.
Like I've already told you all
before once you're done
with installing node,
you'll have to install angular
CLI on your systems to do that.
You can make use
of the npm install -
g at the rate.
/ CLI command,
so that is npm install -
G for Global at the rate
symbol angular / CLI.
Once that is done.
You can create your new project.
So to create a new project
you should make use
of the NG new command followed
by the name of the project.
I'll just name it as a tea
or angular tutorial and this
is going to take a while guys.
The first question
that prompts is
if you would like to add
angular routing just
say yes and hit enter
you'll see another question
that prompts which asks you
which style sheet format.
Would you like
to use in this case?
I'm going to use
the CSS style sheet.
So therefore I'll hit enter.
CSS so now a project
has been created
the next step is to get inside
your workplace to do that.
You just have to type
in CD followed by the name
of the project in my case.
The name of the project is 80.
Okay.
So once this is done,
I'll have to solve
this project the angular CLI
includes a server
so that you can easily build
and serve your app locally now
to run your project
using that server.
You can simply type
in NG serve - -
open This NG serve command
will launch the server.
It will watch over your files
and also rebuilt the app
as you make changes to it.
- - open is optional
and when you use this it
automatically opens your browser
to the localhost 4200.
So as you can see
the development server has
automatically opened the page
that you see is
the welcome page.
And in order to build
your application.
All you have to do
is modify this
so now I'll get back
to my command prompt.
And I'll just type
in code don't so
that I can open this
in Visual Studio code.
Okay.
So as you can see a project
has been opened earlier
in the session.
I've already told
you guys what each
of these file does now,
what I'm going to do is
just open up the source file get
into the app folder.
So the source folder
is the basic folder
where I'm going to
manipulate staffs in order
to create an application.
So I'll just open
app component dot HTML page
and over here.
I'll select everything
except the last line
and I'll delete it.
So now let me just write
a simple statement
within the H1 tag.
I'll say welcome to Ed, Eureka.
So now I'll just
save this and see
if my project is still working.
Okay, so as you can see
over here previously,
I had the default welcome page
of angular and now it's changed
to what I have typed
in my app component HTML file.
So it looks great.
So let's go ahead
and build our project.
Okay.
So this is a very
basic application.
The next thing that I'm going
to do over here is create
new components in order
to display the information
that I want my app to show
so to do that.
I'm going to create
the first component
of my application.
I'll get back
to the command prompt.
I'm terminating the
development server.
It's better to do so because
if you keep the server running
and then you create a component
you'll have to close it
and rerun your program again,
so that angular gets to know
that a new component
has been installed.
If you do not do this you will.
And error saying
that the component you
created is not found.
So what I'm going to do here
is Type in the command NG
generate component followed
by the name of the component.
So that is
NG generate component.
And since my basic
component is the courses
since I'm creating a template
of the editor Cup website.
My basic component will have
the courses of Eddie Rekha.
So what I'm going to do
is just name it as courses
and I'll hit enter.
Okay, angular has
created for files.
The first is courses taught
component dot HTML second
is courses taught component.
The Spectre TS file.
This file is basically used
for testing purpose
and we're not going
to be manipulating this
in our project today.
Next up is the courses
dot component 30s file
and then you have
your style sheet,
which is the CSS file.
Now.
This CSS file is particular
to this component,
which is the courses component.
So now let's get back
to our project and see
how these files actually
look here is the component
that I created.
Let me just increase the size.
Okay.
So as you can see here
is the component
that I've created
and these are the files
the first file that I'll open
over here is the component
DTS file now before starting
off angular has already
written the basic code.
Now, I want you all to note
that this component symbol
has been imported
from the angular code library
and then It is annotated
to the component class
the a trade component decorator.
Like I've already told you
before will specify angular's
metadata for this component.
So what our selectors
template URLs and style URLs.
I've already explained
to you earlier in the session.
So just a brief about them
selector is nothing
but the components CSS
element selector template URLs
tell the location
of the components template file
and style URLs
specify the location
of the components private.
Style sheets this function
which is the engi
on init function is
a lifecycle hook.
Like I've already told
you all before and angular
calls this function shortly
after creating a component.
It's a very good place
to put initialization logic.
Now, the reason why this class
has been exported is
because it can be
imported anywhere else
and therefore you will not have
to rewrite the code.
Okay.
So next what I'm going to do
is add a course property
to the courses component
present in my class.
Okay, so I'll just
type in course.
I'll need the scores
as angular itself.
Next I'll have
to show this course.
So what I'm going to do is
just open up the courses
component dot HTML file.
I'll replace the statement
with an interpolation property
that specifies the course.
So let me save this
do not forget to save
any changes you make
to your project.
To display the
courses component.
You must add it to the template
of the shell of app component.
Now, you must remember
that app courses is
the element selector
for the courses component.
So to add
an app component element to
the app component template file.
All you have to do
is open app component
that HTML and over here
just type in app courses.
Okay, so I hope you
guys are clear to here.
So now let's get back
to our browser and see
how it works.
Let me just refresh this.
I had actually
terminated the process.
So what I'm going to do is
just type in the NG serve
command again in case you
had not dominated this process
and you're trying
to reload the page and
if you see any errors
just terminate the process
like I've already shown you
earlier in this tutorial
how to terminate
a process terminate the process
that hold 4200 and then
rerun your server.
Okay, so as you
can see over here,
I have the course name
which is angular previously.
I just had one statement
which was welcome to Ed.
Wake up.
So the next thing
that I'm going to do over
here is create a course class.
So next I'm going
to create a new file
of here analyst named as
course Don TS in this file.
I will create an export class
named course that is going
to have the ID number
and the name of the course.
So I'll just type
in export class followed
by the name of the class
that is course.
It's going to
have two properties.
That is the ID which is
of number type and name
which is of string type.
Okay, let me just save this
and then return to
the course component 30s file.
And then I'll have
to import the course class
that I just created.
So Within These
import statements are
right import the name
of the class,
which is course.
from dot dot Followed
by the name of the file.
I've forgotten the / over here.
So now I have
imported the class.
So I'll just come back
to this course component class
and over here.
I'll initialize the ID number
and the name of the course.
So let me just delete this.
This course property is going
to be of the type course class.
So I'll just type
in course equals.
the ID number I'll just
specify to be one and the name.
Okay, so let me just see
if this so now I'll jump
onto the component dot HTML file
courses component dot HTML file
and update it over here.
So I'll just create a gas h2 tag
and within this I'll open
up the interpolation braces
and I'll specify
the course name.
So that's course dot name
next I want to specify
the course ID as well.
So what I'm going to do
is just create a div class.
I'll just open the div tag.
And the span tag
and then I'll just type in ID
and specify course dot ID.
I'll just copy this line
and I'll do the same
for the course name.
So now let me just save this and
get back to my browser and see
how it works.
This is a very
common error guys.
When you encounter any
of these just get back
to your command prompt and run
the NG serve command again,
so I'll just terminate this.
And I'll rerun NG serve.
Okay, I'm sorry guys.
I should not specify
semicolon over here.
Okay.
So here it is.
I have the name of my project
followed by the ID number
and then I had specified
the name of the project again.
So you see it over here.
Now the reason why
I specified the name
of the project over here is
just to show you guys
how to make use of a pipe.
So I'll get back to my project
and within the course component
dot HTML file in the first place
where I've specified
the course name.
I'll just add in a pipe
and I'll make use
of the uppercase pipe.
This is going to change
all the letters present
in the course name to uppercase.
So I'll just save this
get back to my project
and the project has reloaded.
Now the name of angular
is displayed in blocks.
Okay, so I hope
you guys are clear
as you'll hear
the word uppercase
that I'm using over here is
a form of interpolation binding.
It's coming right
after the pipe operator.
So this is
how you make use of pipes
in angular pipes are a very
good way to format strings
currency amounts dates Etc.
And angular ships
with several built-in pipes
and you can create
your own as well.
So since I'm the admin user
I should be able to manipulate
the name of the course as well.
The text box should be able to
display the course name property
and updates the property
as I give the input.
This means that
the data will flow
from the component class
out to the screen
and from the screen back
to the class again
to automate this data flow.
You can set up to a data binding
between the input tag
and the course To name property.
Okay.
So what I'm going to do
is open the course.com
when I dot HTML file
and over here,
so in place of span
as just use label and then
I'll make use of the input tag
and then the two-way data
binding syntax NG model
followed by the course name.
And the placeholder
the placeholder in
this case is name.
So I'll specify name.
/ I'll just save this.
I don't need this anymore.
So just remove it off.
This NG model is
angular's two-way data
binding syntax here.
It binds the course name
property to the HTML text box.
So that data can flow
in both directions
that is from the course
name property to the text box
and from the text box back
to the course name.
Okay now when I try to Run this
on my development server.
You will see that it
will not show me any output.
I'll just refresh it
and show you guys
so as you can see over here,
it's not showing any output.
Now this is because I have
to add NG model as it is
not available by default.
I'm going to open up
the app dot module dot t--
s file and over here.
I'm going to import
or L simply copy this
and then Port forms module.
from the angular /
forms Library The NG model
is actually contained
within this library now.
Once this is done.
I'll have to import it
within the import array as well.
So just type in a comment
over here and then I'll import
the forms module.
Okay.
Now I'll save this I'll get back
to my browser and reload it.
Okay.
So as you can see over here
and input text box
has been created now
when I try to manipulate any
of these you can see
that the corresponding change
is represented in the name
of the course.
Okay, so I'll get
back to my project.
Now.
The next thing
that I'm going to do is
declare the course component
every component must be declared
exactly once in NG module.
So if you guys have noticed
one thing I did not import
this course component class
manually over here.
What I've done over here
is already installed
an Auto Import package.
So let me just show
you guys or to import.
Okay, so this will
automatically find import
and pass the required code
in your project.
So it's better.
If you guys install
this you will not have
to manually import anything
that is required
by your application
and the moment you create
any component it is going
to be imported by default.
The next thing
that I'm going to do is
create a mock courses file.
What I'm going to do is
create a list of courses
within this mock
courses 30s file
and then I'm going
to display it on my console
the file that I'm going
to create will lie
within the app folder.
So just right click
select new file
and I'll name this file
as mock courses 30s.
Now within this file.
The first thing
that I'm going to do is import
this course class present
in the course dot t-- s file.
So the first statement
over here is going to be
important the name of the class,
which is course.
Okay.
So as you can see
I've important the course class
from the course file next.
I'm going to create
an export class
and this is going to be constant
the name of this class
is going to be courses
and this is going to be
of the course Class Type.
And since it's going to hold
more than one values,
it's going to be an array.
I forgot to specify
the square brackets.
Okay.
So within this I'll
have key value pairs
where the keys will be
the ID and the name
and the values will be
the corresponding ID numbers
and the names of the courses.
Okay.
The idea of the first course
is going to be 0 1
followed by the name,
which is a string and the name
of the first course is going
to be C plus plus for example.
I'm supposed to specify
an equal to symbol guys.
So that is why
I'm getting the error.
Okay.
So the ID is one name is C
plus plus so similarly.
I'll specify a few more courses.
I'll just copy this.
I'll change the ID numbers
and the names this ID
2 3 4 5 6 and 7.
I'll just change
the course names as well.
Okay.
So now I have specified
a list of courses
and I'll just close this
and I'll save this file if I
have to display these courses.
I have to get back to courses
tab component 30s file
and over here.
I'll have to import
the courses class
that I just created.
So I'll just type
in import the name of the class.
So as you can see the moment,
I type what I want
to import its Auto imported
in my file over here.
This is because of
the Auto Import feature,
so let me just remove this.
And see if it okay.
Next thing they'll have
to do is make changes
in the courses component class.
Okay.
So what I'm going to do
is replace all this
and I'll simply say
that the property courses is
of type courses,
which is the class instead of:
I'll have to specify an equal
to sign be careful
with these minor things
because it's going
to make a Major Impact.
So now I'll open the courses
dot HTML file and over here.
I'm going to make some changes.
I'll just remove this
and within the h2 tag,
I'll just say courses
at Ed, Eureka.
And then I'm going
to specify a list.
So what I'm going to do
is just remove this.
I'll create an unordered list.
And this is going to be
of the Class Type courses.
Next I'll have to
specify the list die.
And then I'll use the span tag
within which I'll specify
the class as batch.
And then the interpolation
symbol within this I'm going
to specify the course ID.
And then I'm going to specify
the name of the course.
Okay.
So once this is done,
I'll just save this.
Okay.
So this is going to return one
course to list all the courses.
I'll have to make use of ng4.
And G4 is angular's
repeater directive.
It repeats the host element
for each and every element
that is present in the list.
The courses list
should be attractive
and should respond virtually
to the user when he hovers
over the course list to do that.
You could add more style
to the Styles dot CSS file
and keep growing
that style sheet in order
to match your specifications
so you can add in Any CSS
that you want to be here
in order to display or output as
per your requirement?
Okay.
So now what I want to do
is enable the user to see
the details of a course
when he clicks on any
of the course that's present
in the list initially.
I will be displaying
the details of this course
at the end of the page.
So to do that,
I'll have to add a click event.
Now the click event.
Like I've already told y'all is
the type of event binding.
So before I make any more
changes to this HTML file,
I'll get back to the courses
that component 30s file
and over here.
I'm going to make
the required changes.
So the first thing
that I'm going to do is add
a selected course component.
I'm going to add
a selected course property
and this is going to be
of the type course after this.
I'm going to create
a new function and the name
of this function
is going to be on select.
So on select of course,
which is of type class
that is course class.
The return type
is going to be void.
And within this I'll just
return this dot selected course
and this will be equal
to the course itself.
Okay.
So now this is done.
I'll just save this.
I'll get back
to my HTML file and make
the corresponding changes.
Okay, like I've already
told y'all I'm going
to make use of ng4.
So that comes
within the list tag.
The ng4 will be preceded
by an asterisk symbol.
So NG capital F for now,
let course of courses.
And then within square brackets,
I'm going to specify class dot
selected equals course Triple
equal to selected course.
Okay, so now I'll create
a click event over here.
So when you click on any
of the selected courses,
I'll have to call the
on select function
and this takes one parameter,
which is the course itself.
Okay.
So now that is done.
Okay.
I'll just remove
this list type from here.
So now my courses
dot HTML file is ready
in case the user select
any of the course
that's present in the list.
I want to display the details
of it now to do that.
What I have to do is include ng-
if so I'll specify
that within the div
tag just like ng4,
even ng-if is going to be
preceded by an asterisk symbol.
So if any course is selected,
I'll specify an H2 tag
and within this I'll specify
the name of the course in caps.
And then I'll just say
that these are the details
within this I'll create
another div tag and span.
selected courses ID
and then the name
of the course itself So now I've
made all the required changes.
And I already have
some CSS ready for this.
I'll just copy paste
that from my previous files.
Okay, so now
I'll just save this.
So let me just show you
guys the final code.
So here it is.
I have a for Loop then
I have an if condition
I'll have a list of all
the courses that have specified
within the Smock courses file
plus if I select any
of these courses,
I'll have the details
of that course displayed.
Let me get back
to my development server.
So as you can see over here,
I have a list of all the courses
and when I select any of these
I'll have the details of
that course reviewed over here.
So as you can see Somehow
I'd select the courses
the details get updated.
So now what I'm going to do is
create a separate Details page
for this course details instead
of displaying all the details
at the end of my page.
I'm going to create
a separate component
that will hold the details
of each course
and it will display
the details of the course
when the course is selected.
So what I'm going to do is
get back to my command prompt.
I'll just terminate this.
And I'll clear the screen.
So now I'll type
in the command +
g generate component.
Followed by the name
of the component
which is going
to be course detail.
And I hit enter a new component
has been created
with the four files.
That is the HTML file the test
file the component DTS file
and the component dot CSS file.
So now I'll get back
to my project.
And what I'm going to do
is just cut this part.
And I'll open the details file
or the details dot HTML file.
And then paste it over here.
Rather than making
a single congested HTML file.
All I've done over here
is created a separate component
which is going to hold
the details of the course.
So now I'll go
to the course details
dot component Don TS file
and over here.
I'll have to import
the course class.
The course property
must be an impact property
and it should be annotated
by an input decorator.
Now this is
because the external course
component will have to bind it.
So I should add another import
statement over here
where and I'm going to import
the component on in it
and the input functions.
So I'll just type in import.
I'm not going to type
in separately over here
or I'm going to do is add it in
with in the statement itself.
So I just say, input.
So next up,
what I'm going to do is add
in the editor it input decorator
within the course detail
component class so specify
at the rate input decorator
and this is for the course
which is of the
course Class Type.
So now my details dot
component 30s file is ready.
Just save this.
So now I'll get back to courses
taught component dot HTML file
and over here.
I'll have to specify
the course detail binding.
So what I'm going to do is just
include app course detail
within this'll have
to specify the course property
and the target is going
to be selected course
this course property specified
within the square brackets is
an example of property binding.
Like I've already told you all
before the property binding
that I've specified over
here is one way data binding
between the selected
course property of
the courses component
to the course property
of the target element.
This will map
the course property
of the course detail component.
So, let me just save this.
So now in case the user clicks
on any of the course
present in the list,
the selected course will change
when the selected course changes
the property binding
updates the course
and the course detail component
and displays the new course.
So now let's get back
to our browser and see
how this works.
I'll just refresh this.
I'll have to rerun the server.
So as you can see over here,
my browser has
reloaded the moment.
I click on any of these Pages.
I'm supposed to see
the output of the details
of that course over here.
Now when I select any
of these courses,
I'm not able to see
the details of it.
So let me get back
to my details dot HTML page.
Okay.
So here it is.
So it's not supposed
to be selected course.
It's just course it is
because I was referring
to the course property
unlike the selected
crows property of the previous.
So just change that everywhere.
It's going to be course.
Let me just save this get back
to my browser and rerun it.
So now if I select any
of the course details
the details are displayed
at the bottom of this page.
One thing I want
you guys to note is
that previously these details
were rendered by
the same component.
That was the
course is component.
Now, these details are entered
by The Details page rather than
the courses component itself.
So the next thing
that we are going to do over
here is add in some services.
Competent student fetch data
or save data directly.
They should focus
on presenting data
and delegate data access
to a service in this tutorial.
I'm going to show you guys
how to create a course service
that all application
classes can use to get
the courses to do this.
I'll be relying
on the dependency injection
of angular services are
a great way to share
information among classes
that do not know
each other here.
I'm going to create
a message service
and inject it into places
that is The core service
which uses the service
to send a message and in
the message component itself,
which will display the message.
So what I'm going to do is
get back to my command prompt.
I'll terminate this.
until the screen again
next I'm going to write
and g generate service.
And the name will be course.
Okay.
I've made a spelling mistake.
It's Ser V.I.C.
So now our service
class is ready.
So what I'm going to do
is get back to my project.
I'll open up the newly created
service Dutch TS file here.
I'll have to import
the course class.
So I'll just type in import.
the course class
and also I want to import
the courses class.
So both are done.
Next I'll be adding
the get causes property.
This property is going to be
of the course type.
So within this class over here
and type in get courses Which is
of the type course itself.
And within this function,
I just have
one return statement.
That is going to
return the courses.
Okay, just save this.
So once this is done
I'd have to make
the core service available to
the dependency injection system
before angular can
inject it for that.
I'll have to register
a provider a provider.
Like I've already told you
all before is something
that can create or deliver
a service in this case.
It's going to instantiate
the course service class
to provide the service.
So as you can see over here
angular by default
registers the provider
with the root injector
for your service
by including the provide.
Metadata, when you
provide the service
at the root level angular
creates a single shared instance
for the course service
and injects it into any class
that ask for it
registering the provider
in and at the rate
injectable metadata allows
angular to optimize and app
by removing the service
if it turns out
not to be used after all.
So the next thing
that I'll have to do is get
back to the course
component 30s file.
So now I'll have to import
the course service.
And that I just save it so next.
I'm going to remove
the selected course property.
And I'll make
the previous one as an array
and this will be
of the type course
to add a private course service
parameter of the course service
to the Constructor.
All I'm going to do is go on
to this Constructor
and I'm going to specify private
and the name of the service
which is course service and
this is of type
course service class.
So this bottom eat oval
simultaneously defined a private
course service property
and identifies it as
a core service injection site
when angular creates
a course component the
dependency injection system sets
the course service parameter
to the Singleton instance,
of course service now,
I'm going to add
another method of here.
So I've made use
of the selected course property.
So what I'm going to do
is just included over here.
Sorry for that guy's I
deleted it thinking
that I have not made use
of the Opti The next thing
that I have to do over here
is include another function
and this is going to be
the get courses function.
I'll just specify
the type of it as void.
So within this I'm going
to have an arrow function,
so if you do not know
what is an arrow function
just get back to the part
where I'm explaining
Arrow functions in typescript,
so this dot course service dot
get courses function subscribe
and the parameter
which is courses.
this dot courses I
will shortly be telling
you guys why this error
is appearing over here.
I have to make a small change
in my code and this error
is going to disappear.
So I'll get back to the course
service 30s file and over here.
I'm going to import
observable and off.
From our exchanges
just delete this line.
So within this get
courses function over here
I'll be making a small change
I'll just include observable
of the type course.
And over here it's going
to be return of courses.
Okay, so now the error
should be fixed.
Okay.
So as you can see over here,
I don't see an error anymore.
The off course is over here
will return an observable course
that emits a single value
and that will be the array
of mock courses the observable
function will emit an array
of courses the subscriber third
passes the emitted array
to the Callback
which sets the
components course property.
So I'll just see
if this next up I'm going
to generate another component
which is the messages component.
So I'll get back
to my command prompt
and over here
and degenerate and this
is a component messages.
Okay, so I have a new
component named messages
in my application of here.
Now this component
will actually display
the applications messages
at the bottom of the screen.
Since I've created
a new component of here,
I'll have to get back to the app
not component dot HTML file
and I have to include
it over here.
So I'll just specify app.
I'll just save this.
Okay.
So now when I get
back to my browser
and read on this I'll have
to run the server again.
Okay, so now let's get
back to our browser.
Okay.
So as you can see over here,
my browser says that messages
is working which means
that this component
is working fine.
So the next thing
that I'm going to do over here
is create a message service,
so I'll get back
to my command prompt.
And I'll specify
NG generate service messages.
Okay, so now let's get
back to our project
within this file over here,
which is messages dot
service tortillas file.
I'll create a property
which is messages.
It's going to be
of the string type.
And for now I'll just keep
it as an empty string next.
I'll create an ad next I'll be
creating an ad function to this.
I'll add the message
which is of the type string.
Isn't this I just have
a single statement,
which is this dot messages.
Don't push.
I'll just say message.
Okay, I'll specify
another function within this
I'll add a clear function
and then this dot messages.
Equals an empty array.
Okay.
So now I'll save this now.
What I'm going to do is inject
this into the core services.
So I'll open the course
service 30s file.
And the first thing
that I'm going to do is
import the message service.
Now I'll come down
to the Constructor present
in the core service class
and I'm going to modify it.
I'll just say private
message service is
of type messages service.
Okay.
So the next thing
that I'm going to do
is send a message
from the course service
and then display the message
from the core service.
Okay.
What I'm doing over
here is just modifying
this get course class.
I already pasted
the code that I have.
So I'll just delete
this and I'll save it.
So here it is.
I've actually not
retrieved the courses.
So I'll just specify
this dot get courses
and that's a function.
I'll save this and let me check
if I've missed anything else.
This is fine.
Get courses the add
subscribe courses.
Okay here is not the step
that I've missed.
So this is equal
to the courses itself.
Now, I'll save this I'll get
back to my development server.
Okay.
So here are the list
of courses who one thing
that I've not done is I'll open
Messages component 30s
since this is the main file.
Okay, here it is.
I've not included
messages service over here.
So what I'm going to do is just
import it message service.
And the next thing
that I'll have to do
is specify a public parameter
that I'm going to name
it as message service
and this is going to be
of type messages service.
Now I'll just save this
and I'll get back to my browser.
Okay, so now my message
is component is working.
So the moment I click
on any of these I'll have
the details plus a message
will be added over here.
Okay.
So now let's get back
to our project.
The next thing that we'll be
doing over here is routing.
In angular the best
practice is to load
and configure the router
in a separate top-level module
that is dedicated to routing
and import it by the root
at module by convention.
The module class name
is approaching module
and it belongs to the app
routing module dot t-- S Class.
No, in case you have
to generate that,
all you have to do is get back
to your command prompt.
And over here,
you'll have to run the command
and generate module
NG approaching followed by -
flat - module equals app.
Okay, looks like I've already
created it earlier so I
don't have to create it again.
However, let me just tell
you the double -
flat puts the file
in the source App instead
of its own folder double -
module equals app will tell
the CLI to register it
in the Imports array
of the app module.
Okay.
So let me just get back
to my project and check
for it to be here.
So that's a pruiting module.
So here it is.
So this is the default
approaching module
that is presented by angular.
So I'm going to modify this file
in order to suit my project.
So the first thing
that we're going to do over
here is import course component
and I'm going to modify
this constant Roots variable
and then I'm going to modify.
This constant are
also variable So within this
and just specify a path
so the path will be
first count courses
and then the component is going
to be course component.
Okay, so now I'll just
save this at first
the approaching module will
import router module and routes.
So the app can have
routing functionality
next the course component will
give router somewhere to go.
Once you configure the routes
a typical angular route
will have two properties
one is the path
and second is the component
a path is nothing but the string
that will match the URL
in the browser address
bar component is the component
that the router should create
when navigating to this route.
This will tell the router
to match the URL to the part.
Okay.
So what I'm going to do here
is get back to my command prompt
and over here.
I'll type the command
NG generate component.
And I'll just call this
component as home or rather.
I'll call it as dashboard
which I've shown you earlier.
So as you can see over here
a new component has been created
instead of typing the code
manually over here.
I'll just copy paste it
and I'll explain it
to you guys later on.
So here is the modified
approaching module dot t--
s file this line over here
is importing the router module
to the Imports array
and also it configures it
with the routes in one step
by calling the router module dot
for Road method.
The method is called
as for wrote
Because you configure the router
at the applications Roots level.
Forward method Supply service
providers and directives
needed for routing
and performs the
initial navigation based
on the current browser's URL.
Next is the
export router module.
Now this is to make
this router module available
throughout our application.
So now let me just open
the app component dot HTML file
and over here.
You've already seen
this router Outlet present.
Now this was already done
because during the initial
stages of the project
when we were creating the
project there were two questions
that were asked.
Which the first one was
if you want to add
routing to your project
and there we had specified.
Yes.
And therefore this
is already included
in the app component
dot HTML file.
I just want you guys to know
this router link over here.
Basically, my project
has two pages.
The first is the dashboard
and second is the courses page.
The dashboard is nothing
but the home page
and the courses page
will consist of a list
that contains all the courses
that are available.
So now let me just show you all
the dashboard file over here.
So here is the dashboard
it contains four
of the top courses and G4.
Like I've already told you
all before is a repeater
and it creates as many links
as the components courses array.
So let me just open this app
routing module 2 TS file so
over here and empty part means
that this is my dashboard
if there is no extension or
an extension having dashboard.
It is going to be my home page
or my dashboard next
when I select any
of these courses the path
will be redirected to detail
plus the the ID of that course,
so let me just show
this to you guys.
I'll open my project so
over here when I click
on any of these courses,
so it's redirected
to The Details page
of that particular course
and the details
of that page so over here,
we are specifying the detail
plus the course is ID
as the path next up
is the path courses
where and we make use
of the course component.
Let me just get back the moment.
I select this course is a teddy.
Well, you will see
a list of courses
that are available over here so
that were all the four parts
that are available
in my project.
So this brings us
to the end of this project.
I hope you guys have enjoyed
and learned something
new in case you have
any doubts or queries.
Please do let me know
in the comment section
and I will revert to you
at the earliest good bye
and take care.
I hope you have enjoyed
listening to this video.
Please be kind enough to like it
and you can comment any
of your doubts and queries
and we will reply.
Them at the earliest do look out
for more videos in our playlist
And subscribe to Edureka channel to learn more.
Happy learning.
