Learn Angular 10, .NET Core Web API & SQL Server by Creating a Web Application from Scratch
ฝัง
- เผยแพร่เมื่อ 14 ต.ค. 2024
- Source Code: github.com/Art...
Related Tutorials:
--------------------
React JS + Python Django + SQLite full-stack app
• React JS + Python Djan...
--------------------
React JS + .NET Core Web API + Microsoft SQL full stack app
• React JS + .NET Core W...
--------------------
.NET Core API + Vue JS + Microsoft SQL full-stack web app
• .NET Core API + Vue JS...
--------------------
ASP .NET Core Web API + Microsoft SQL CRUD APIs
• ASP .NET Core Web API ...
--------------------
ASP .Net Core Web API + MySQL | CRUD APIs Tutorial
• ASP .Net Core Web API ...
--------------------
.NET Core Web API + PostgreSQL | CRUD APIs
• .NET Core Web API + Po...
--------------------
.Net Core Web API + MongoDB CRUD APIs
• .Net Core Web API + Mo...
--------------------
Python Django + SQLite | REST APIs
• Python Django + SQLite...
--------------------
Python Django + PostgreSQL | REST API Tutorial
• Python Django + Postgr...
--------------------
Python Django + MySQL CRUD API Tutorial
• Python Django + MySQL ...
--------------------
Python Django + MongoDB CRUD API Tutorial
• Python Django + MongoD...
--------------------
Python Django + Microsoft SQL Server CRUD API Tutorial
• Python Django + Micros...
--------------------
 Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. www.kite.com/g...
Python and Angular app tutorial video: • Learn Angular 10, Pyth...
Learn to create a simple web application from scratch using Angular 10, .NET Core Web API and Microsoft SQL Server.
Contents:
Install SQL Server and SQL Server Management Studio.
Install Visual Studio.
Install Visual Studio Code.
Install POSTMAN.
Install Node JS.
Install Angular 10.
Create DB and Tables in Microsoft SQL Server.
Create .NET Web API Project.
Force API to return JSON response only.
Enable CORS.
Create Models.
API for Department Screen : GET.
API for Department Screen : POST, PUT and DELETE.
APIs for Employee Screen.
Upload Photo API.
Angular Project Intro.
Create Angular 10 Project.
Generate Components and Services in the Angular Project.
Add Service methods to consume APIs.
Routing in Angular.
Add Bootstrap to our Angular App.
Navigation Menu using Bootstrap.
Show Department Screen with Bootstrap Table.
Modal Pop Up Window using Bootstrap.
Add and Edit Pop Up Screen for Department.
Delete Department.
Show Employee Screen with Bootstrap table.
Upload Photo, Add and Edit Employee Details Pop Up Screen.
Custom Sorting and Filtering to our Bootstrap table.
Keep in mind this course takes way longer than an hour 1:27 minutes. If you don't have experience in typescript, and don't know the basic building blocks of Angular, I highly recommend spending 2 hours on the following course: th-cam.com/video/k5E2AVpwsko/w-d-xo.html
This will make this video a lot more understandable. Overall this is a good course prior to jumping to more serious courses.
Wow! YOU HAVE NO IDEA HOW THANKFUL I AM FOR THIS LECTURE: YOU LITERALLY SAVED ME FROM LOSING MY JOB
Where do you work? I already know all of this, perhaps I could take your spot.
@@azgan123 maybe your arrogance is the reason why you don't have a job.
Don't get too comfortable, if your are using any of the sql injection riddled techniques in this video you will be back on the street and jobless in no time!
@@crikey4336 how do I get rid of it?
@@teaspells9994 you may try to learn Entity Framework
intro
setup environment(ms sql, vs 2022, node, angular)
9:30 create database
16:00 asp net core
38:00 angular
postman, simple CRUD,
Bootstrap 54:00
Seriously... this was exactly what I was looking for, and it was even better than I could have hoped or expected! Thanks!!!!!
like as soon as i see the content, all the way up to image uploading in just over an hour, gawd dammnnnn, exactly what I need to start my new junior full stack job
Thanks a lot. From this video, anyone start working and see the total functionality and then we can improve as we wish.
The best course ever in my career of 15 years of programming
For whose is getting errors on instalation of the NuGet Package for NewtonSoftJson,
Install the version less than or equal to 3.1.10. Do not install the Latest stable 5.0.0
Thanks
If anybody is using Angualr 11+ then make these changes to tsconfig.json file- It will resolve the issues with strict property initialization
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": false,
"noImplicitReturns": false,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
},
thank you very much dear you are awesome
Thanks man
I have been using this MSSQL+.NET Core + Angular combo since 2017.
Sir kindly create a full app with angular 10,SQL Server and .net core with authentication and authorization.
Nice one and also check this Real E-Commerce App using .Net 5 and Angular 13
Thanks
th-cam.com/video/-IzpsC-0eBk/w-d-xo.html
You literally saved my ass man, it was very closed from what I had to do at work. Thanks a lot !
Nice one and also check this Real E-Commerce App using .Net 5 and Angular 13
Thanks
th-cam.com/video/-IzpsC-0eBk/w-d-xo.html
straight-forward tutorial which go to the point and don't waste time. Thanks a lot for your effort.
check this Real E-Commerce App using .Net 5 and Angular 13
Thanks
th-cam.com/video/-IzpsC-0eBk/w-d-xo.html
The routing to /employee and /department doesn't work, but the routing to /api/employee--which is different--does. The other routing options work if I just run the Angular project alone with 'ng serve'. I'm baffled, but I'll see if I can keep going.
Thank you for this tutorial. Your video is little bit fast. Its actually little bit hard to understand. Please make a little bit slow videos. Thanks for your support.
this exactly what i want , thank you very much man , you're amazing
Great work
And best for new Learner from scratch to deploye application
Great work. This is what real world applications are built. Only JWT Authentication and exception logging is left. Do you have any plan to cover these topics too? it will be better if you add these features in this sample.
DELETE ERROR FIX: Like many I had an issue with the delete department call, as a walkaround I just concatenated to the url the val (it was sent as options before) in the delete method of the shared.service.ts file just paste:
return this.http.delete(this.APIUrl+'/department/'+val);
and it should work. Great tutorial! Thanks.
Thank you for this great guide. Please answer this question, I want to auto close modal after update or insert. How I can do that?
add style to this: data-bs-dismiss="modal" #closebutton (addDep and UpdateDep Buttons )
Thank you. It is a perfect tutorial to begin with C# and Angular.
It was an awesome video and the clarity and context was precise to the topic, thanks for the best ever video...
SQL Table Employee should use DepartmentID, foreign key. When using USING keyword, you don't need to close the command or connection it does it for you
using (SqlConnection sqlConnection = new SqlConnection(sqlDataSource))
{
sqlConnection.Open();
using (SqlCommand sqlCommand = new SqlCommand(query, sqlConnection))
{
using (SqlDataReader sqlReader = sqlCommand.ExecuteReader())
{
table.Load(sqlReader);
}
}
}
Hi Great and nice tutorial, Please create with Authentication and Authorization. Thanks once again
Nice one and also check this Real E-Commerce App using .Net 5 and Angular 13
Thanks
th-cam.com/video/-IzpsC-0eBk/w-d-xo.html
dont know the name of the person who create this tutorial. i thank him for this great work
Thankyou Thankyou Thankyou very much. this video help me a lot.. this is exactly i am searching.. you helped me a lot.
Hello, I've followed your tutorial for a week, and I'm stuck on 1:00:27 Mine is not showing up, while yours is. I've pasted the code from github, and still no luck.
Its cors policy issue...replace your Cors with following code
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
namespace WebApi
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddCors();
services.AddControllers();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseRouting();
// global cors policy
app.UseCors(x => x
.AllowAnyMethod()
.AllowAnyHeader()
.SetIsOriginAllowed(origin => true) // allow any origin
.AllowCredentials()); // allow credentials
app.UseAuthentication();
app.UseAuthorization();
app.UseEndpoints(x => x.MapControllers());
}
}
}
Wowwwww simply superb Man U rocked 👌👌 thanks a lot got a clear idea. One small doubt here instead creating two same child modules can we have single one and shared for two parent components?
One of the best tutorials ever, thanks for the effort
Thank you for this great tutorial, can you help me plz with the errors I'm getting after reaching 1:10:00.
Error List :
Property 'DepartmentId' has no initializer and is not definitely assigned in the constructor.
Property 'DepartmentName' has no initializer and is not definitely assigned in the constructor.
Property 'ModalTitle' has no initializer and is not definitely assigned in the constructor.
Parameter 'item' implicitly has an 'any' type.
Parameter 'item' implicitly has an 'any' type.
I have repeatedly checked the video for any possibility of a missing part of code, but i couldn't figure out what's the problem.
Thank you in advance sir.
I had the same and found this on the web add --> !
item : any;
departmentId!: string;
iN YR tsCONFIG.JSON SET "strict": false,
@@minimanux1 can you plz explain that.
@@axisstargazer891 ♥
why you didn't use ADO To get data from database and use the old method
Great and I was looking the same Thank you !
Hi @Art of Engineer What is difference between previous 3 months old video and this tutorial. any thing additional we added
Backend is .net core api. Previous one is asp .net web api.. that's the only difference
@@ArtofEngineer Thanks a lot.
@@ArtofEngineer is there a difference in them? maybe previus u create in Net Framework?
You would be crazy to develop a new web application with an mssql server backend these days, especially when there are way cheaper and faster alternatives.
Faster? I get cheaper, but what do you mean faster? There are usecases where mssql is as fast as anything.
im also curious what you mean by faster and cheaper alternatives. im learning this in school and pretty new to all this :p
@@lordfireriser8125 Well, Aurora Serverless is cheaper, since it's almost free. If you are developing a web app, you can use it and set the database to go to sleep (pause) after x amount of minutes of idle activity. If the database is sleeping, you incur no cost.
If you're looking for an 'always on' solution, Azure Microsoft SQL Server runs at around $400 USD per month. The AWS Aurora database engine is a $30 USD per month in comparison. On the speed issue, as long as your database is designed properly and it's fit for purpose for the application, this is not going to be an issue with any database technology really.
@@DavidJJJ the level of deception in your comparison here is breathtaking. I don’t think you should have any credibility after this. $400 vs $30 for something comparable across two different cloud providers? Blatant lies. Now, if you were to start comparing apples to apples then start with something more credible than David.
@@hegemaniac666 You can fact check what I've written for yourself, I understand you're amazed at what I've said 'how can AWS be that much cheaper', but I assure you, it's true. I was amazed as well until I found out for myself and did the sums. I'm more convinced than ever that people really do need to abandon Microsoft SQL Server. Either that or abandon their bank accounts, because that's what you're doing by sticking with such an archaic, expensive product. If you don't care about money and you want to be stuck on a propriety database product, then stick with Microsoft, by all means.
Why aren't you using C# Linq?
Are you Pathfinder from Apex Legends? :D Great Job, you can maybe save my diploma
great tutorial, please keep making these videos !! but I don't like the robotic voice.
Thank you so much bro, i like to implement this in my weekend.
Quite fast and easy... Thanks a lot bro
1:08:46 In mine I cant see the data(IT, edit, etc). The table structure is visible but not the entered values. Why is it like that?
I think using this pattern is the best way to be surprised by a sql injection attack and it is not async
Great tutorial! I'm new to Angular (any version and that includes Typescript) and I've been trying to get into it. How can I avoid the annoying popups that shows the record was update/created/deleted without forcing the user to click the Close button on such? I think a temporary popup showing the message would be more elegant and less annoying. Thanks!
instead of alert box we can show the messages as a text inside any html elements like div,lable or span.
my department table is not getting data in show-dep component
Sir kindly post video using entity framework and core and angular 9/10 with SQL server...pls ...
What Typescript Version are you using?If i try to make the Filter Function at 1:23:19 ,TS gives me a Error with the Parameter el.
I also have some other Problems so that i cannot add,update or delete Data in the Tables where you didnt had any Problem and i guess it is because of our different Versions of Typescript
did you solve this problem ? "I also have some other Problems so that i cannot add,update or delete Data in the Tables where you didnt had any Problem and i guess it is because of our different Versions of Typescript""
@@niculitaalex4855 I have solved it and made a tutorial video on my youtube channel
Why have you used @ before writing sql queries? Is there some special purpose of it?
For a reason uploading photo doesn't work I tried it two times.. it is uploading the photo to the "Photos" directory but it doesn't display it on the edit section of the employee
Check file name is correctly being saved and fetched from db table
I ran into the same problem. If you still haven't figured it out, you have to include this section of code in .NET Core API project --> Startup.cs --> Configure(...){....}
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), "Photos")),
RequestPath = "/Photos"
});
I don't know if you have the same problem that i had but i had to change the proto folder permission to allow read/write from application manager... Please note that if its your issue creating those permissions would make this folder at risk...
@Art of Engineer
Thnak you for this, i have an issue with the delete department feature no errors from the angular compiler but the APi is complaining about an unauthorized method error 405 event tho CORS is set-up with allow all... Could you give me an insight ?
Hey I am Facing the same Issue ,Did u find any Solution??
Its cors policy issue...replace your Cors with following code
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
namespace WebApi
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddCors();
services.AddControllers();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseRouting();
// global cors policy
app.UseCors(x => x
.AllowAnyMethod()
.AllowAnyHeader()
.SetIsOriginAllowed(origin => true) // allow any origin
.AllowCredentials()); // allow credentials
app.UseAuthentication();
app.UseAuthorization();
app.UseEndpoints(x => x.MapControllers());
}
}
}
why don't you use DbContext to create database and table?
How to download this SQL Server Management Studio for MacBook M1 ? Where I can find it?
Do you have an example of deploying it to IIS?
Simply GREAT !
Appreciated.
Thank you.
nice video, and how could i do if i want to se the edit history?
So, as I can see, you actually don't need DepartmentID in dbo.Employee to store Department to which employee belongs?
Yes and no. Actually, the DepartmentID, in this case, is only used as an index. Maybe for simplicity sake the author decided to use the Department's name in the Employee table. The problem is that, if we change a department name on the Department table, the Employees with the previous department won't be updated, and it'll be a mess if we need to create a report of Employees grouping them by Departments, for example. The most recommended is to have a foreign key linking the two tables by using the DepartmentID column on both, and this is called "normalization". So, this approach of saving the Department name to the Employee table wouldn't be recommended at all in real life. Better use the IDs since they cannot be changed and will update all the Employees for that Department, otherwise we need to code something to go thru all the records updating the column Department on Employees table with the new edited Department's name... a real mess!
Could you make video in with you show authorization, and how to make it access specific web page in angular ? (just a wish video ;))
great video but what is json serializer ? I'm new to C#
The JsonSerializer converts .NET objects into their JSON equivalent and back again by mapping the .NET object property names to the JSON property names and copies the values for you.
WebApi is run 5000port , how to set customer port in appsettings.json and how to set in Program.cs , thank you
You are just the best! Just exactly what I need
Awesome Video!! nice learning.. Thanks a ton.. It was my first full stack application, now I can make any..
Nice one and also check this Real E-Commerce App using .Net 5 and Angular 13
Thanks
th-cam.com/video/-IzpsC-0eBk/w-d-xo.html
Hello...the app works fine but here whatever we enter from hi is not getting stored in the database...plzz explain me it how to do that
when i create new project in visual studio...i cannot get weatherforecast details...i get wwwroot and pages folder whether it is correct or not...or how to create project
I also see the same issue if when u will get the solution please comment here
@@fromlogeshsview be sure that you are creating a web api project
can this be done within VS 2017 also - or does it require 2019? Thanks so much
src/app/department/add-edit-dep/add-edit-dep.component.ts:15:3 - error TS2564: Property 'DepartmentId' has no initializer and is not definitely assigned in the constructor. Why this error is occurring in add-edit-dep.component.ts ? I have done exactly what you've shown
wow, thank you so much for this video, its just amazing with all details included.
Loved it ... please keep uploading such contents....helped a lot
why dont you used Entity framework core
Could you please attach Postman collection for this APIs to test them.
Quite fast and easy... Thanks a lot bro 👍
Great tutorial, thank you.
when i do that
Error occurs in the template of component ShowDepComponent.
Please help
Same for me, it says- "src/app/department/show-dep/show-dep.component.html:23:31 - error NG8002: Can't bind to 'dep' since it isn't a known property of 'app-add-edit-dep'."
Any help please?
@@90krishika I found the solution:
you must declare @input () dep: any in add-edit-dep.comp.ts, because we used a variable in the tag add-edit-dep.comp.
@@marouaneeladbi2323 I am having the same problem, can you tell me where I must declare this? It's on the imports of add-edit-dep-comp.ts?
@@marouaneeladbi2323 This worked for me! I added this:
@Input () dep: any = '';
Make sure that you import Input from angular core!
@@74potions Thanks man ! Worked for me
Sir If i want to add an angular template in .net. How would i do this.
Please help me for this I really want learn this.
Hi Sir,
I am couldn't able to install mvc.newtonsoft package and unable to select the .net core web application. could you please help on that.
This is all I need
Hi Art of Engineer. Can I run your source code at my local computer?
Excellent Tutorial
This is a nice tutotial. I'm getting an issue with Cors however, whenever I try to fill the table with department data the console says that Cors policy is not enabled. Has anybody run into that, and how did you solve it? Thanks.
I'm using Angular 13. Maybe you're using the same version as I am.
Access --> Program.cs
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
builder.Services.AddCors();
app.UseCors(c =>
{
c.AllowAnyHeader();
c.AllowAnyMethod();
c.AllowAnyOrigin();
});
@@julionunes2092 Thanks this really helped for me. Angular wasn't displaying anything in the table until I added this code change.
How u host this in iis? Angular is in vscode and net core in vs
Thank you so much for the great explanation and share the video!!!!!
I am not able to get data from API, on Angular UI. Is it something cross origin , which we need to understand ?
You have to enable CORS on API side. You do it from startup class, first registering policy in DI container and then using it below.
Got the same issue. Issue got resolved after enabling CORS on API in startup class
Good explanations but too speed sometimes, had to turn the video speed at x0.5 ! :)
I can't find startup in .net framwork 6 2022 visual studio. Please help
what can i do, if the rxjs modul doesnt work, and the npm istall desnt work to?
thanks for the video. while pick the image, it's not showing the img. Please support.
Is there test cases for this project using ms unit testing
I get PUT 405 whenever I try to update. I included allowAnyMehod but it doesn't help.
Sir, I have a problem with the postman. Follow you and perform the same steps as you did, but don't get any response on the postman. Can you please explain it?
dumbest question in history how should he know
24:49 Where did "EmployeeAppCon" come from?
Very fun stack to work with 💪
can I use this tutorial with the the latest angular and ASP.net CORE?
great video !
39:09 bit typo "wep API" , but overall this is a good video
I got an error while writing Httppost in dotnet, parameters need directive??
I can't get SaveFile working, every time I choose a file my API hangs.. Any idea?
Thnks 4 all bro
OK, I'm late to the game here. The current version of Angular is 17, whereas this video uses version 10. In 17, apparently, "modules" are not used, whereas in this video they are. Therefore, I am not certain whether I got routing set up correctly; it certainly does not work correctly. Also, this video did not explain how it set up a *web server* so as to serve the Angular files from port 4200. It completely glossed over this critical point. So I couldn't get that working either, although I was able to serve files from another "live server" I have at port 5500. But even so, routing did not work. Oh well, too bad. So the video is good up until about 53 minutes or so. Thank you. If anyone has any comments on this, please do comment; thank you!
Thank you for this video sir. Have a good day.
The newtonjson nuget package says not compatible with .net core 3.1
help please
you are great thank you so much it was so too much easy, too much useful
any ideas on how to deploy this project on firebase or netifly for a portfolio website?
this project will be mostly deployable to Azure as its all Microsoft proprietary with SQL and .net
Awesome work 👍 thank you so much 😊