Learn Angular 10, .NET Core Web API & SQL Server by Creating a Web Application from Scratch
HTML-код
- Опубликовано: 5 ноя 2020
- Source Code: github.com/ArtOfEngineer/Angu...
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/get-kite/?...
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.
Seriously... this was exactly what I was looking for, and it was even better than I could have hoped or expected! Thanks!!!!!
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
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.
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: ruclips.net/video/k5E2AVpwsko/видео.html
This will make this video a lot more understandable. Overall this is a good course prior to jumping to more serious courses.
this exactly what i want , thank you very much man , you're amazing
Thank you. It is a perfect tutorial to begin with C# and Angular.
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
ruclips.net/video/-IzpsC-0eBk/видео.html
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
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
ruclips.net/video/-IzpsC-0eBk/видео.html
The best course ever in my career of 15 years of programming
One of the best tutorials ever, thanks for the effort
Simply GREAT !
Appreciated.
Thank you.
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
Quite fast and easy... Thanks a lot bro 👍
It was an awesome video and the clarity and context was precise to the topic, thanks for the best ever video...
You are just the best! Just exactly what I need
Quite fast and easy... Thanks a lot bro
Thank you so much bro, i like to implement this in my weekend.
Great work
And best for new Learner from scratch to deploye application
I have been using this MSSQL+.NET Core + Angular combo since 2017.
Great and I was looking the same Thank you !
Thank you for this video sir. Have a good day.
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
Thank you so much for the great explanation and share the video!!!!!
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
ruclips.net/video/-IzpsC-0eBk/видео.html
can this be done within VS 2017 also - or does it require 2019? Thanks so much
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.
Awesome work 👍 thank you so much 😊
Thankyou Thankyou Thankyou very much. this video help me a lot.. this is exactly i am searching.. you helped me a lot.
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.
you are great thank you so much it was so too much easy, too much useful
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.
Very fun stack to work with 💪
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
Great tutorial, thank you.
Thanks a lot for this video.
its amazing how to learn both the combination wow!
@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());
}
}
}
You sir are a gem!
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
what can i do, if the rxjs modul doesnt work, and the npm istall desnt work to?
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
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 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.
why you didn't use ADO To get data from database and use the old method
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?
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.
Thanx for sharing!
my department table is not getting data in show-dep component
Thank you for this, it my dream and I make it
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
ruclips.net/video/-IzpsC-0eBk/видео.html
The newtonjson nuget package says not compatible with .net core 3.1
help please
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.
I got an error while writing Httppost in dotnet, parameters need directive??
can I use this tutorial with the the latest angular and ASP.net CORE?
How u host this in iis? Angular is in vscode and net core in vs
Excellent Tutorial
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?
I can't find startup in .net framwork 6 2022 visual studio. Please help
How to download this SQL Server Management Studio for MacBook M1 ? Where I can find it?
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
someone can help me pelase, when i create the project in VS the startup.cs dont appear for me, how can i solve this?
This is all I need
Why have you used @ before writing sql queries? Is there some special purpose of it?
Thank you so much.....
I can't get SaveFile working, every time I choose a file my API hangs.. Any idea?
Is there test cases for this project using ms unit testing
Do you have an example of deploying it to IIS?
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!
I get PUT 405 whenever I try to update. I included allowAnyMehod but it doesn't help.
I created a new folder but could not rename it to Models. Pls help!!!
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 so much
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 ♥
Can anyone please tell me why i dont get the WeatherForecast.cs after i created new project 17:25
hola, como ago para unir todo para subir a un servidor
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());
}
}
}
Thank you is very gooood
WebApi is run 5000port , how to set customer port in appsettings.json and how to set in Program.cs , thank you
why don't you use DbContext to create database and table?
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...
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
Sir kindly post video using entity framework and core and angular 9/10 with SQL server...pls ...
This project uses rest api right?
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.
Hi Art of Engineer. Can I run your source code at my local computer?
Could you make video in with you show authorization, and how to make it access specific web page in angular ? (just a wish video ;))
Why aren't you using C# Linq?
Are you Pathfinder from Apex Legends? :D Great Job, you can maybe save my diploma
MS SQL Server (db)+ .net Core API (back end)+ Flutter (front end)
Is it possible ??
24:49 Where did "EmployeeAppCon" come from?
it is very useful.
i dont get any response from get or post in postman
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
ruclips.net/video/-IzpsC-0eBk/видео.html
will this work for angular11?
Iam unable to fetch data from database
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.
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