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.
