Creating Full-Stack Web Apps Using .NET and Angular || Angular Virtual Conference 2021
4K views
Nov 9, 2023
In this session, will cover the following: 1. Creating the DB objects using SQL Server 2. Scaffolding the Model using EF core DB first approach 3. Creating the RESTful web API with .NET 5 using the repository pattern 4. Implementing Dependency Injection in the web API 5. Creating the front-end of the application using Angular 6. Execution demo of the Application" Conference Website: https://globaltechconferences.com/event/angular-virtual-conference-2021/ C# Corner - Community of Software and Data Developers: https://www.c-sharpcorner.com C# Live - Dev Streaming Destination: https://csharp.live #angular #webdevelopment #fullstack
View Video Transcript
0:00
So hello everyone. My name is Ankish Sharma and today we are going to talk how to create
0:06
a full stack web application using dotnet and Angular. So let me introduce myself. I am a full stack consultant. I am an author and speaker. I am
0:17
a Google developer expert for Angular and a Microsoft MVP. You can also read my blogs
0:22
at ankisharmablogs.com. I regularly blog about Microsoft technologies such as Blazor, C-sharp
0:28
and also front-end technologies such as Angular. You can also reach out to me on Twitter at Ankishama__007
0:34
I am happy to discuss anything related to technology or anything in general if you want to talk about web development, front-end development, mentorship
0:42
anything, I will be happy to connect with you. So the good thing about this session is that there is no content in the slide
0:52
And the bad thing about this session is there is no content in the slide. Everything is just code and code
0:57
so before we start we have to understand what are the prerequisites to create a full stack
1:02
application using dot net and angular so you have to install visual studio 2019 and while installing
1:08
visual studio 2019 please make sure to select the asp.net and web development workload so while
1:14
installing you will be given a lot of options and and a different kind of workloads such as
1:20
console development azure development xamarin development so similarly there is a workload
1:24
called asp.net and web development so you have to select that so if you install that workload it
1:29
will install dotnet core and all other dependencies related to that then you have to use node.js
1:35
because we are using and we are creating an angular application and then you have to use
1:39
sql server because we are going to create our database using sql server also in the project
1:47
that we will create we are going to install two nuget packages so we will install the package for
1:52
for the database provider that we are targeting. So in this case it is SQL server. Therefore
1:56
we are going to install the package called Microsoft.EntityFrameworkCode.SQL server. Please make sure to install the latest stable version. So currently the latest stable version
2:08
of .NET is .NET 5.0.5 if I remember correctly. So similarly, if you go to the Nougat.org
2:15
you can find the current stable version of the package and you have to install that. Similarly
2:21
we are using entity framework tools to create a model from the existing database therefore we
2:25
will install the tools package as well that is microsoft.entityframework.code.tools so for our application we are going to use entity framework code db first approach first we are
2:36
going to create the database tables and from the database tables we are going to scaffold our model
2:41
and then from then we will proceed to controllers and then from there we will proceed to the ui part
2:47
So that will be the structure of our application. So enough talk
2:51
Let's go to the coding. So first of all, let's open Visual Studio
2:57
So first step is to create the application. So how to create a project in Visual Studio
3:04
That is the first step. So click on Create New Project in Visual Studio. And in the next page, there are a lot of templates given to you
3:12
So search for template called Angular. now in the template you can see that it is written asp.net core with angular so this template will
3:22
come automatically to your visual studio when you select asp.net web development workload while
3:28
installing select this click on next and after that you have to put the name so I will put a name
3:34
as ng core demo and then click on next here in the additional information section you have to
3:44
select the target framework so there is a drop-down shown as target framework if you click on this you
3:49
can see all the dotnet framework version which is installed in your machine so in my machine
3:55
I have 2.1 3.1 and 5.0 so the current version is 5.0 so I will be selecting that and also the
4:02
authentication type will be selected to none and the configure for HTTPS should
4:06
be checked and you have to click on the create button I am NOT going to click on
4:09
the create button now because it will take a lot of time to install all the node dependencies and node modules dependencies so I will close this and I
4:18
will open another solution which I have already created so this is a solution
4:22
which I have already created the name of the solution is ng with net now let us
4:28
understand the folder structure over here first of all we have a client app
4:33
folder so as the name suggests this is the client application the client part
4:38
of our application it contains all your angular code the your whole angular code
4:43
resides inside client app folder here you can see you have the package.json
4:47
file here inside src folder app folder you have all the components created so I
4:53
have already created few components add employee fetch employee so we are going
4:56
understand later what are these components and how they are going to
5:01
work and similarly we have our app module over here so all the code which
5:06
is related to your angular citizen site client app folder now I have we already
5:14
have a controllers folder which will contain our API controller API controller
5:20
code and then I have created an interfaces folder so for this application
5:25
We are going to use the repository pattern. So in the repository pattern if you are familiar with that
5:29
You know that we have to create an interface and then we have to implement that interface at our data access level
5:34
So I have already created an interfaces folder and I have already added an I employ interface to that
5:41
Similarly, there's a data access folder and and inside that I have created a employed access layer class. So this is our
5:50
Application structure now what we are going to build that is a first question
5:54
so our application will be a employee data management system the application
6:00
will allow you to create read update and delete that is current operation on an
6:05
employee data a user can add a new data a user can delete an existing data or
6:10
edit an existing data and user can also see the list of all the employees in a
6:14
tabular manner on the UI so that is what we are going to create I have already
6:21
install both the nugget packages in this application so if you go to your csproj
6:27
file you can see that here these two nugget package that we have just
6:33
discussed is already installed in this application in this project so you have
6:38
to go to your nugget gallery get the code so let me give you an example so
6:44
let's copy this name go to Google and search for it and in the nugget
6:51
gallery here you can see the current testable version is 5.0.6 and here here you can see the
7:00
command to copy command to install click on the copy and the command will be copied then go to
7:04
video studio click on tools you get package manager package manager console and here you can paste
7:12
the command and install it so your package will be installed so i have already installed so i'm
7:17
not going to install it again so that is about the package the next part is we
7:22
are going to understand the database first I have already created a database inside SQL Server the database name is employee DB and inside employee DB database I have two tables one is called employee another one is called cities so if you run this command if you run this command you can
7:39
see that the employee table has five columns employee ID name city department
7:46
and gender the fields are self-explanatory for the city's table we have two fields two columns city ID and city name and it is pre-populated you can see that in the
7:56
city name field I have already added five city name over here so what this city table is going
8:01
to do so in the UI we are going to provide a form to the user where he can add the employee data and
8:08
in that form there will be a drop-down list to select the city value for the employee and that
8:14
drop-down list will contain the value from this table this will allow us to make this dynamic that
8:21
That is why we are binding the drop-down list on the UI with a database table from the backend
8:30
That is what the use of cities table. So currently the employee table is empty because we have not added any data to it
8:39
Now the next step is to create our model. Since the table is already created, we have to use Entity Framework Code DB First approach
8:49
to scaffold the model using our database table. So let me copy the command and then we'll see
8:59
So I have copied the command. I will explain it to you. So again, you have to go to Package Manager console
9:04
and paste the command. So let us understand what this command is doing. It says that scaffold DB context means create the DB context
9:10
class using this connection string. So this is my connection string, which is put inside quotes
9:17
using Microsoft.entityFamberCode.sqlServer. That is our database provider name. So we are using SQL Server as database provider
9:24
Output directory name as models. Now, very important point to mention over here
9:29
is that there is no models folder in our solution file over here
9:35
So this command will check if the models folder exist or not
9:39
If models folder does not exist, it will first create the models folder
9:43
and then it will create the classes inside that. If the models folder already exists then it will add the classes inside that
9:53
Then tables name. So we have two table employees and cities. So that is how this command will work
9:58
Let it run and then you will see that a models folder will be created with three classes inside
10:10
Okay so you can see there is a models folder created with city.cs, employee.cs and employee
10:15
db context or CS so let me close this and we'll go to employee DB context class and we'll see what
10:20
happens over here in the employee DB context class this is our DB context class and here you
10:25
can see that all our entities are defined our employee entity and then we have our city entity
10:32
is already defined but there is a warning what is the warning let's see that it says that to protect
10:38
potentially sensitive information in your connection string you should move it out of
10:43
the source code so here you can see that currently we have we have used a
10:49
connection string to a scaffold our models and that connection string is
10:53
directly written inside our DB context class over here but the warning says
10:58
that we have to move it out of the DB context class to protect potentially sensitive information so where should we keep this that is the question so the
11:07
best place to put your connection string is inside app setting dot JSON file
11:10
inside app setting dot JSON file I have already created a JSON structure over
11:16
here in connection string is the key and the sub key is called default
11:20
connection so what we are going to do is we are going to copy this connection
11:24
string from here and then we are going to put it inside our app setting dot JSON
11:29
file okay so that is the first step we have moved the connection string out of
11:34
our our employee DB context class now we can safely remove this method because
11:42
that method was just injecting the connection string to our DB context but
11:47
now we have moved the connection string out of our DB context so we have we have
11:51
moved that method now the point over here is we have added our connection
11:55
string inside app setting dot JSON file but how our application is going to read
12:01
this connection string from apps in.json so for that we have to do the configuration inside the
12:06
configure services method of the startup.cs file so here let me import the namespace okay let's
12:18
understand this so here i am writing the code as services dot add db context the db context name
12:23
and then inside i am providing the option and i am using use sql server method because we are using
12:30
SQL server and then we are reading the data from the configuration and the path inside the configuration
12:36
that is connection string colon default connection so that is our path for our connection the
12:42
connection string inside our app setting.json file so here you can see that the path inside
12:48
the json file is connection string dot default connection similarly we have defined the same
12:53
path over here so this will make sure that as soon as our application starts
12:58
this particular connection string will be available to our inside our DB
13:04
context class and we have using the path that we have specified over here the
13:09
advantage of this approach is that we can dynamically change connection string
13:13
inside our app setting dot JSON file without the need to redeploy the
13:17
application so and it also it is also helpful in clean code structure since the connection
13:25
testing is not tightly coupled with our DB context file so that is all about DB context
13:32
upsetting to Jason and this file now let us see the models we have so we have a employee
13:39
class so it contains all the five fields that we have defined in our database that is employee
13:44
name city department and gender similarly for the city class we have the
13:48
two fields that we have defined in our database that is city ID and city name
13:52
so the models is created the next step is to create our interface for the
14:00
implementation of our data access layer so let me add the code from the code
14:05
snippet let me add the namespace so here I have defined I have defined six
14:13
methods for our employee interface let us see what are the methods the first
14:18
method is I am doable of sorry the first method is get all employees it will
14:24
return and I am available of employees as the name suggests get all employees it
14:28
will return the list of all the employees available in our database then
14:32
we have the add employee method this method will accept an object of type
14:36
employee and then it will add it to our database similarly we have an update
14:40
employee method it will which will accept the object of type employee and
14:44
add it to the database sorry update the recording the database then get employee
14:49
data method will accept the employee ID as a parameter and it will return an
14:53
object of type employee based on the based on the supply ID delete employee as the name suggests will accept the employee ID as parameter and it will return it will delete the employee and then return the success method message and
15:06
get cities method will return the list of city which is available in our cities table
15:12
now we will go to employee data access layer class and here we have uh have to implement our
15:17
interface. Now let me add the code over here. So what we are doing over here is so in the employee
15:25
data access layer class we are injecting our DB context class and this injection will allow us to
15:32
access our models from our data access layer class. Then we will implement all our interfaces
15:41
methods. So you can see that currently it is showing an error because we have not implemented
15:45
all the methods as soon as we implement all the methods this error will be gone here we have
15:51
implemented get all employees method it will return all the values from our employees table
16:00
as a list of employees and in case of any error it will throw the error
16:04
then we have the add employee method the add employee method will access will accept the
16:12
employee object and it will add that employee object to our employees table
16:16
It will call save changes to save the change to our database and it will return to
16:21
show a success. In case of any error, it will throw the error
16:26
Similarly, we have the update employee method. The update employee method will
16:30
accept the employee object and it will mark it as modified object and it
16:36
will call the db.save changes to save the changes to our database and then it
16:41
will return in case of success else it will throw an error then we have get employee by ID method in
16:47
the get employee by ID method will accept the employee ideas parameter and then we'll find
16:52
the employee object from the employees sorry will accept the employee ideas parameter and then we'll
17:00
find the employee I employ object in inside the employees table based on that ID and then we'll
17:05
return that object then we have the delete employee method it will accept the
17:11
employee ID as parameter and then it will find that object inside our employees
17:15
table it will remove it from the table it will call DB dot save changes to
17:19
update the state of our the database and then it will return one if in case of
17:24
success else it will throw an error if there is any error finally finally we
17:31
have the get cities method it will return the list of cities from the city
17:34
table and here you can see that we are using link queries to fit the list of
17:40
cities from the city stable and it will return a list of cities using the list
17:46
of city object so that is returned from this particular method so that is all
17:50
about our data access layer class and here you can see that particular area is also gone because we have implemented all the method now the next step is to
18:00
configure our controller so let us understand what we have done so far so
18:05
first step is that we have created our database then we have a scaffolded our
18:08
models then we have created a data access layer now the next step is to
18:15
configure our controllers so in the controllers first we are going to add a constructor and we are going to add we are going to inject our I employ
18:23
interface to our controller then we'll add a get method this get method let me
18:30
add the namespace so this get method this is the get endpoint for our service
18:36
for our controller and it will call get all employees method for of our employee
18:41
data access layer then we have the post method this post method will accept the
18:46
employee object and it will call the add employee method of our data access layer
18:50
to add the employee to database. Similarly, we have get by ID. So this is also a get call
18:59
but it will also accept ID as a parameter and then it will pass that ID to our get employee
19:04
data method and it will add, it will fetch the employee ID. It will fetch the employee
19:10
based on the employee ID. Then we have the put method. The put method is used to update
19:14
the employee data it will accept the employee object as a parameter and will
19:19
call the update employee method then we have delete so the delete method will
19:26
accept the employee ID and then it will call delete employee method to delete
19:30
the employee data finally we have the get city list method so the get city
19:35
list method will call the get cities method of our data access layer class and
19:40
and it will fit it will return the list of cities to our quality function so that is all that is all
19:46
about our api endpoint and the root of this api is defined as api slash controller name so it will
19:52
be api slash employee so that is how our api endpoints are configured now so now to make this
20:02
to make this apis uh available to the world or to make it api available to to for an endpoint to be
20:09
consumed by any client we have to configure our startup.cs file by defining the service
20:15
dependency for that so here we have added a transient dependencies of i employee service
20:21
to our employed access layer class so when you add when you define a dependency in your dot net
20:28
application you have multiple options available one is transient one is singleton and one is scoped
20:34
so here we are using transient so transient will make sure that for every connection from client
20:38
to server there will be a new session will be created so that is why we have
20:42
defined a transient scope for this particular service so at this point of
20:47
time we are done configuring the back end part of our application so we have
20:51
configured a database we have configured our service layer we have defined our
20:55
API endpoints so that part is done the next step is to configure our client app
21:00
folder which is our angular code so let me close all of this and then we'll go
21:06
to our angular part of the code so we open the client app will go to services
21:12
first so I have already created these so here you can see that I have already
21:19
created a few folders so first is the services folder which will contain our
21:23
employee service class over here then I have a models folder inside the models
21:28
folder I have created two model one is employee so it will contain employee ID
21:32
name city in department and gender the model on the client side is same as the
21:37
model that we have defined on our server side and similarly for city also we have
21:41
a similar model with city ID and city name the advantage of using model is
21:46
that it will allow us to do the model binding in our applications like we are
21:50
using type a script so it is always advisable to use model we should not use
21:54
any as a type so it's always advisable to use type data corresponding to use any
22:00
which is untyped data that is why we have defined the model over here then I
22:06
have defined two component one is called fetch employee one is called add employee
22:11
so we'll understand about this component in a minute when we start working on
22:15
them so first step is to configure our services so in the services first of all
22:22
I have defined a base URL for our API endpoint so if you remember in the controller the base URL was API slash controller name which is api slash employee So that is what we have defined as our base URL and I have also
22:36
injected HTTP client in our service. Here I have defined get city list method. It will return a observable of array of cities. So it will
22:50
do a get call to our get city list API endpoint. So here you can see that to do an API call from
22:57
Angular code, we have to use HTTP client class and HTTP client class provide all our
23:03
API, all our verbs to do an API call such as get
23:07
post, put and delete. So here we are using get and we are expecting
23:11
a data of type array of cities and then we are passing
23:15
our endpoint URL. So that is the base URL plus get city list, which is the endpoint URL for the city list method
23:23
Then we have the get employees method. So in the get employees method also we are doing a get call and we are calling the get method from our API endpoint and expecting a return object of type array of employees
23:38
So that is what we have defined over here. Similarly, we have defined all other methods
23:44
So let me explain it bit by bit. So we have get employee by ID method
23:47
it will accept a parameter of type ID which is an employee ID and it will pass the ID to our API
23:54
endpoint and it will fix the employee data based on that particular ID similarly we have save
24:00
employee method it will accept an object of type employee and it will do a post call here you can
24:05
see that we are calling the post method of the hdb client class and then it will call the base URL
24:12
of our API endpoint and then it will pass the object as a parameter similarly we have the update
24:17
employee method it will do a put call and it will also pass the employee object and similarly we have
24:23
the delete employee method it will accept the IDS parameter it will do a delete call and pass the
24:29
IDS parameter to this that is how we can use HTTP client to do an API endpoint call from our angular
24:36
application to any backend API so in this case we are using the API you are
24:42
using the dotnet API but you can do any API call to any other application also if
24:49
you have a Java endpoint or a node endpoint you can also use same methods
24:54
get post and put from HTTP client class to the to do the API endpoint for so the
25:00
service part of this application is done from the client side next step is to go
25:05
to the fetch employee component. So what is happening in fetch employee component? So let
25:10
us understand this. Let me close this to and open the HTML part also. So the fetch employee component
25:16
is used to fetch the list of employees from our back end and then it will be displayed on the UI
25:22
in a tabular manner. And for each employee, we are going to show edit and delete button also
25:28
And in this particular component, we will handle the fetching of employee from back end and deleting
25:34
a particular employee data these two things will be handled by this particular component so let's
25:39
start with this so here in the constructor i have injected the employee service
25:46
and here we have defined a object of type array of employees then let me define a method called
25:54
get employees so in the get employee method we are calling the get employee uh method of the service
26:01
and we are subscribing to the observable and then we are assigning the data which
26:07
returned from the observable to our local variable that is called employees
26:13
let me uncomment this code because we want this code to be called when the
26:20
components in a slice so as soon as the component is in a slice this get get
26:24
employees method will be called and then we will fix the data from our back end
26:29
and then the data will be shown on the UI. So let me remove this particular comment
26:41
Now here I have defined a delete method. So this delete method will accept employee ID as parameter
26:45
and it will ask for a confirmation. Do you want to delete an employee with ID
26:49
And it will show the ID. So it will show a browser confirmation alert box
26:54
to ask you if you want to delete the employee. If you put answer as yes, then it
26:59
will call the delete employee method of our service and delete the employee data
27:03
And once we get a success response, we'll call the get employees method again
27:08
to fetch the updated list of data from the backend. Since the data has been deleted, we want to get sync
27:14
We want to sync the data from front end to our backend. That's why we are calling the get employees method again to fetch the updated list of employees
27:22
Now we are going to the HTML part of this code and we are going to
27:26
add code over here so let us understand what we are doing here there is some static text over here
27:33
showing that this is a part is an employee data component it will fetch the data from the backend
27:37
now at the top we have defined a button called add new employee button over here and this button
27:44
is shown this button will redirect used to register employee link so currently we have not defined
27:52
this component this is the add employee component which we are going to define next so we have just
27:58
added this button but this button will be functional only after we will add the we will
28:04
configure the add employee component so this will allow us to add a new employee data to our application
28:10
then is after that we have defined a table so the data from the back end all the employee data from
28:15
the back end will be shown in a tabular manner here we have defined the headers for the table
28:19
that is employee ID name gender department and city then we are using ng4 directive to iterate
28:26
over our employees array so if you remember here is our employees array and this employees array
28:32
is getting populated inside ng on it method as soon as the ng on it is kicked we'll call get
28:38
employees method and here inside get employees this employees array will be populated and then
28:44
we'll iterate over this using ng4 and then we are going to show all the employee data over
28:49
here in the rows and corresponding to every employee data we are also showing
28:54
two button one is for edit and another is for delete so in case of edit we are
29:00
navigating to a URL which is employee slash edit slash employee ID so how this
29:06
edit functionality is working we will see it later when we configure the add
29:10
employee component for now let us understand this delete part so when you
29:16
click on the delete button here we are calling the delete method from our
29:19
component so if you remember here we have added the delete method and this
29:23
date method is being called when we click on the delete button in this particular row of our table and it will pass the employee ideas parameter and
29:30
after that the whole functionality of it will be kicked in that is how the delete
29:35
and fetch part of our application will work now let us understand how the add
29:39
and edit part of the application works so for that we'll go to the add employee
29:44
component inside the add employee component so we will use this component
29:52
the same component for both adding an employee and leading an employee so in
29:56
this component we are going to provide a form to the user and We will use the same form to add the new employee data and edit an existing employee data
30:05
So here we have defined an employee form which we have type form group
30:09
For this demo we are using the reactive form to display the form
30:16
In Angular we have two types of form, reactive form and template-driven form
30:20
For this we are using reactive form. And we have set a title property to create
30:26
have employee id error message city list and this form submitted properties which we have defined
30:32
and inside the constructor we have injected an activated route class so activated route class
30:39
is used to get the data from our url so how we are going to handle how we are going to configure
30:46
this component let us understand so for this component let us go to app module.ts file first
30:53
of all and we will understand how we have configured the url root for this particular
30:59
component so here you can see that we have defined three root for our application the first root is
31:04
fetch employee so for the path fetch employee we are calling the fetch employee component for the
31:10
path register employee we are calling add employee component and for the path employee slash edit and
31:16
passing the id as parameter we are also calling the edit employee component this shows that we
31:21
We are calling our edit employee component for two different routes. If you are calling for the register employee, this shows that we are going to add a new
31:29
employee to our database. And if you are calling for this path with a particular ID, this shows that we already
31:36
have an employee data with us and we are using that the idea of that particular employee
31:41
data to invoke this component. So in that case, it will be an edit call
31:46
So in the inside our component in the constructor we are going to fetch the ID from our URL
31:52
So that is what we have used activated route for that. So activated route.snapsort.params.id which is our parameter name
32:01
If this exists this means that we have an edit call and that is why we are going to
32:07
set the employee ID property to the same value. If this does not exist this then it means that this is a new call
32:15
is an add call to add a new employee then we have also defined our form so in the form we have
32:21
defined the name gender department and city field as required so here you can see that we have
32:26
defined validators dot required to show that all these four fields are required field so this is
32:32
the client side validation that we are doing so until unless you fill all this for all these four
32:37
fields the data will not be posted to your backend now what we are doing over here let me
32:44
Uncomment this over here here you can see that we are checking inside and G on in it lifecycle hook that if employee ID is greater than zero
32:53
This means that this is an edit call then we set the title of the form to edit and then we will call get employee by ID method of our service to fetch the data of a particular employee based on the ID and then we will call employee form dot set
33:09
value and we'll set the value of the form to the response we'll get from the database so we'll call
33:15
the backend fix the data for a particular employee and then we'll populate that data in the form so
33:21
that the user can read that data then we are using then we are registering the
33:26
form control over here so let me add the methods over here so this is the add
33:31
employee method so the add employee method is used is used to add a new
33:36
employee data to our database it will call the same employee method of our employee service and will set the form value to that and if data is added
33:45
successfully we will navigate to the fetch employee page using router dot navigate similarly for update employee we are also using the same feature we are calling update
33:57
employee method we are passing the form value and then we are navigating to the fetch employee
34:02
component if the if the operation is successful and then finally we have the save method inside
34:09
this save method we will check if employee form is valid then only will proceed if in by form is
34:16
not valid we will return if the employee form is valid and title is set to create we will call the
34:21
add employee method if the title is set to edit we will call the update employee method so here
34:26
you can see that initially the title is set to create that is the by default but if we have a
34:33
id in the url which means if we have a edit call then inside ng on it we are setting the title to
34:40
edit so if the title is set to edit this means that this is an edit call and we'll call the
34:45
update employment now we have the fetch city list method which we have defined
34:50
so what this will do let me add this over here so the fetch city list method
34:56
will call get city list method of the service to fetch the all the city list
35:00
for our database and this will be called this method will be called inside our
35:04
ng on in it method so as soon as the application is launched we'll call this
35:09
fetch city list method to fetch the list of cities from our database and then in
35:13
our template we are going to populate that list of cities in a drop-down list so that is why we
35:19
want it to be available as soon as the application is launched then we will go to the html part and
35:27
we'll add the template code for this let us understand what we are doing over here so in
35:33
the template we are setting the title over here so this title we are binding from our component
35:38
based on the value of our URL parameter. Then we have defined a form and we have bind it to our employee form property
35:47
And then on submit same method will be called. So inside this form what we are doing, let us understand this
35:54
So here we have defined the label for the name and then we have defined a particular input field to accept the name And then we are using we are binding it to the form control name So if you see that this particular word name from where it is coming it is coming from the form control name
36:10
So inside this form we have defined multiple controls that is name gender department and city
36:17
So for this particular field we are binding the value to the name form control of our employee form
36:25
and then we are using we are using a span to show the errors if if the form
36:30
control is touched or submitted and if the form has the error called required
36:34
then we'll show the name is required field name is required error similarly we
36:39
have defined a gender field and here we are binding it to our form called
36:42
control called gender and we are showing two gender value male and female to that
36:46
and similarly we have defined the errors error span class for this similarly we
36:52
the department field it is also a text field and the user can enter the department of the employee
36:58
finally the most important part here is the city field so here you can see that we have defined a
37:04
select box sorry we have defined a select control and it is bind to the form control called city
37:10
and for the options we are using ng for uh directive to iterate over the city list variable
37:16
and then we are defining the value of the option as city dot city name so this particular city list
37:23
variable is populated inside fest city list method so if you go to fest city list method here you can
37:29
see that the city list particular variable is getting populated as soon as the application is
37:35
launched because this fest city list method is called inside ng on it method over here so this
37:41
means that as soon as the application is launched we have the data populated in this particular
37:46
dropdown from our database and then we have the save and cancel button the save button is of type
37:52
submit if we click on the save button this form will be submitted and this save method will be
37:58
called and if we click on the cancel button the cancel method will be called so we have defined
38:03
the cancel method i think no i don't think we have defined the cancel method over here
38:10
So the cancel method we will define. Let me. So I forget to create the
38:22
Code snippet for that, so it will be same as this. In case of cancel also, you will be navigated to the fetch employment
38:31
fetch employee component. So that is how we have created our application
38:35
And then inside the nav menu dot HTML, we have added the
38:40
route for our search employee page so if you can see that we have added a
38:44
particular link to our fetch employee page so let me run this application and
38:48
see the city in action we'll see the output if it is working perfectly or not
39:04
so application is running
39:19
Okay so I am loading. So the home page is launched and on the nav bar you can see there is a fetch employee link
39:26
fetch employee link you will be navigated to this fetch employee URL so
39:30
here you can see the fetch employee component currently we are seeing a table but the country the table is empty because we have no data in our employee
39:39
table and there is a add new employee button over here if I click on the add
39:43
new employee button we will be navigated to our add employee component and here
39:47
you can see the route is register employee the title is set to create if I
39:51
click on the Save button you can see that all the required field validation is
39:55
kicked in also if you notice in the city list drop down you can see all the values are populated
40:01
from our backend database so here you can see this select any value for the city let me add
40:07
a data over here let me add and click on the save button if you click on the save button data has
40:13
been saved successfully to our database and we are navigated to the fetch employee component component
40:19
and on the home page you can see on the on the fetch employee component you can see that data
40:23
is shown in a table manner if you go to your database and run this command set a star from
40:28
employee you can see that that particular data has been added to our database also similarly we can
40:33
perform other operations such as edit and delete if you go to edit from dev if you make it dev lead
40:38
from mumbai sorry dev lead here and from mumbai if you change to bangaluru click on save button
40:45
you can see that the data has been updated on our ui and similarly the data has been updated over
40:51
here also in our database so this shows that there is a sync between the ui and our data access
40:56
our database always and similarly if you click on delete it will ask for a confirmation do you want
41:02
to delete the employee with id1 if i click on cancel nothing will happen no action will be taken
41:07
if i click on yes this employee data will be removed and we can see the updated list of
41:14
employed data over here so currently there is no employee data that's why this table is empty
41:18
similarly if you go to database you can see that this database is currently empty
41:23
so that is how you can create a full stack web application using dotnet and angular so that is
41:29
all about my talk before i close i want to share some resources with you guys so here you can see
41:35
that i have added the link for the github so you can go to this github repository and you can find
41:40
the source code for this particular application you can also go to my personal blog and you can
41:44
read a lot about Microsoft technologies and Angular and you can also connect with me over
41:50
LinkedIn and Twitter. I will be happy to connect with you. So I hope you have enjoyed my talk
41:54
Thank you all for joining