A Step-by-Step Guide to Building CRUD App with Angular 17, TailwindCSS, .NET 8, EF Core, SQLite 🔥

hello guys welcome back in this video we are going to build Crow app using net web API and angular 17 so first of all let's set up our environment first of all go to net. microsoft.com click on download and then download.net at SDK our STK is downloaded so let's install it let close first install now we have successfully installed net sdk8 so let's close it this verify we have installed type CMD type net we have already install net so let's type net help let's verify our list of SDK installed in our machine so type.net list SDK so we have SDK 8. 0.10 so our SDK is installed now let's set up our ID in this video we are going to use vs code for editing go to code do visual studio.com and click download for Windows P code is downloading PS code is downloaded so let's install let's accept agreement click next next add open with code and tick open with code action click next install PS code is set up successful so let's finish thems and Mark all done now let's install required extension let's go to extension and search for C let install C dkit and C this one and another extension we need is We need c extension for creating our files and another extension is new get Gallery so this one just install it installed create new folder name it full step right click and open with code cck Trust and here go to terminal new terminal let's create backin first so net new web API and output folder will be API descript so our API is created one more extension let's go to extension and search for real icon install it uh and click this material icon theme we have set this beautiful icon let's Zoom it okay this is our default net web API folder let's run this navigate to API and Run application. net was run this is our default template provided bynet so in this tutorial we are going to using controller so let's remove this so we don't use minimal API in this project so let's remove it save it so let's refresh so nothing is here now let's create one folder called models create one model name it student let's add some property prop ID string name this field not this field is not nullable so let's say string. imp so string this could be nullable so address Pro string phone number This Could Be nullable So Pro string email this could be Noble so let's give attribute required for this p so we don't in insert null value in our database required itting to prevent Nel data so this is our sample model and this create another folder data inside data create one class name it appdb context FDB context extend from d context so this comes from AF code so in this video we are going to use e app code so install e app code packages so press control shift p type open number Gallery enter search for EF code this first one install it another one is AF tools so let's close it press control dot using Microsoft in framework C so let's add Constructor and pass DB context option which type is DB context options and pass it into base Constructor so options now add add service container here Builder do service do add DB context and type is F DB context which is our data context so options goes to options dot we are going to use SQL light so use scho light we have not installed this SQL light so let's go to we got gallery and search for skite and install this one click install SQL light is installed so close it control dot using Microsoft in framework code click so now pass connection string here for connection string go to app setting and add connection string here connection strings let's remove this and name of connection Str let's say default connection and name is data source let's say student DB CL it so from App setting let's get our connection isting so Builder Builder do configuration. get connection string so name of connection string is default connection that is in our app setting do we have default default connection so name will be default connection this is our connection string now create another folder type controller insert controller add another class name students controller this is our our controller class so let's extend from controller base which is our Base Class for controller which provide us HTTP actions let's give attribute API controller and Route will be API SL control this means we have student controller API will be API and students so this will be our endpoint now let's add one method let's say public string say hi this is the simple method which return type is string which return return something hi let's add HTTP G which is our get method let's save and go to browser let's refresh it we don't see anything here because we don't have ADD controller in our program class so add controller here so let's add controller here Builder do services. a controller a controller also map controller this map our controller so let's restart our application net lastro now we have student controller let's try it and we have high message from back end so this is our controller now add migration to our application so let's add public DB set of student student set let's skill Terminal contrl C and from.net EF migration add initial we do not have installed netf or tool so let's install net let's type net tools install Global and netf so let's enter have codee tool is installed so let's run about Migration by pressing up arrow net AF migration add ini this will create our first migration so migration is created successfully here we have intial CS in this file we have students table and ID column which is integer name address phone number email this is our student table so let's update database do net AF database update look we have student DB which is successfully created for open this database we need another extension so let's install uh SQ light viewer so let's install it successfully installed so let's press control shift V type open database enter and student DB click this here we have solution expert below we have SQL light Explorer so let's click it and click View we have nothing it in our database so our database is empty now let's use this TV in our controller so let's go to student controller let's inject the private read only app DB context and context let's create Constructor DV context and context in sze context to context this is our Sprint controller remove this method and create another method with print list of students so s add HTTP get method this meod will be API SL student which which print list of student so public async task of I inumerable of student are going to print list of student student from here get student let's face data from database say students and context stent is no tracking and and to list a sync and await this result this will give us list of students so return students let's run application once again let's execute now we have nothing in our database so empty array is shown so let's create another method which will be post method HTP post post method let's say public Asing task of I result and create let secr and pass student here student model here student let spell itest so model state is valid is not valid then return B request and pass model State here if our request is valid then wa context doing student and let's store result how context. change aing if result is greater than zero this means we have successfully inserted student then return okay bqu this is our post request list T go to post and try it out let's pass n here so we have validation ER the name field is required so let's pass valid name let's say B address KTM and phone number 98 34 email will be ABC gmail.com let's execute it so we have successfully inserted one data let's verify from here let's try it out execute we have one student inserted sucessfully so let's verify from our DB let's refresh it and click here now we have B one St is inserted let's create another method HTTP G accept ID from ID integer type from Route let's say public Hing task Tas of student we have we need to return single student from this method let's say get student and integer ID let's P our data from database let's say here student o context. student do find a sync this pass ID if we have if student is null then return not found return type should be have some result of student so if we have student then return okay and pass student from here let's test our application to browser let's pass one ID look we have one student with ID one from here now we have three method one is get all student another create student and another one is get single student by ID so now let's create let's create another method another delete method to delete our record so HTTP delete and let's pass ID from parameter which type is integer so let's say public asnc task I so there say delete and pass integer ID here retrieve data from database student wa context. St and Asing and pass ID from here if student is n then return return sorry return return not found otherwise return return okay and student let's remove student then and result away context. student sorry context doing if we have result zero then this means we have deleted record from database so okay and deleted student daily otherwise B request unable to delete student this D in this CL one student deleted so let's verify from here try it out execute look we have UT area this means we have successfully deleted let's confirm from here data here look we have nothing in database so we have implemented delete action also so let's let's add another method which edit student so let's say s TP put method which takes ID type integer public Asing task say I result edit let's say edit student this will disp pass integer ID and student sorry student student first of all let's retrieve data from database student from DB and a wa context. student and a sync and pass ID the route will be API SL student SL ID okay okay if student from DB is n then return return bad request student not found otherwise otherwise update our data student from DB do name is equal to student do name student from DB dot address to student address student from DB student from d. email student. email student. number student phone number okay let's see where result context. changeing this saes our result if result is greater than zero this means we have changes our database return okay and Student Success fully updated this o our result otherwise that request and say unable to ofate data Let's test our inpoint good browser poost let's say J somewh more something and gmail.com execute it successfully saved let's get our student and we have John Let's edit again go to put method let's pass ID to this ID this one let's pass two here and let's say Jun updated and updated address 1 2 3 4 5 6 7 8 9 10 email will be BCA cmail.com this executed we have successfully updated this confirm from here get execute here so we have updated here let's verify from database go to go to SC light scroll and refresh execute so we have updated student here so this is our back end simple C operation we have get all student create student by post method get single student from by ID and delete student update student now let's set up environment for envel development so let's first download nodejs nodejs.org download 20.10 just click nodejs is almost download so let's install it click next accept agreement click next next next click next and install node js is install so let's verify go to command Type n node so we have already installed node js 18 version so let close now go to angular.io and go to docks go to get started then set up go down down and copy it uh for angular CLI so let's type command and P it let's verify our angular person so go to command command type NG person so we have 17.08% so we have set up our angular development so now let's set up our PS code extension for angular development so go to visual studio code go to extension type angular first of all install angular language service another one is angular centic and another angular extension is angular file switcher this one install it Ang CLI is installed our development environment is ready so let's create our first application go to terminal new terminal and change this terminal to command Pro so run engine and application name Cent let's select CSS and no n let's say no this will take little time so let's pause our recording our client application is created so list let's run application go to [Music] client navigate to Cent and NG ser and open this is our default template let's remove these things tol delete this one hello let's say hello this is our app component HTML of all let's install t when CSS Library so let's go to TWI s.com get started go to framework guides and go to angular copy this two line of P past it till when conf file is created let's verify our package do we have delin 3.4.0 so close it and go to blow and copy this line and copy and go to tellin config is paste here save and let's copy this three line of code go to style. CSS it let's run application and Sir close it look we have different Hello Message let's confirm this work class text 3L look we have bigger title so for ta let's install another extension extension and type T CSS T CSS intelligence install this now look we have beautiful solution Tes 3 XL 2 XL and color look we have Sange color let's create one component students so make Command prom Clos it NG generate component students stand one component and try down which means it just show out component so let's navigate first to client and let's run a command so this will create this thing generate component component name students and [Music] stand so our student component is generated so first of all let's add router Outlet here Outlet let's add one button here anchor and router link router link will [Music] be students students let R our application npm start go to browser students and let's it route go to route and add our component so part will be students sorry students component will be student component let's let's add router link here and make the students routing student we cannot bind to router link this means we have include here router link now let's add string let's click here we have student word now let's generate service go to terminal new terminal and just make it command prompt and navigate to client and just type NG GS G service service and students student service is Creed so let's open service just inject here HTTP client HTP which type is HTTP client now let's create one type types and let's say student do DS let's say interface expert interface student and what are the properties of student let's go to apis and model let's copy let's copy this class and let's see these things let's say ID number Mo it name is string address [Music] string and phone number also and email also Str let's remove these things and let's save it first of all let's P our student from our service so let's create one method get students this. http.get run our API one that's run let's copy it copy and API students this return return what is the return type of this student so area of student so let's make it students of students are the return return type of HTTP G student method is observable of student area let's go to student and inject our service so inject sorry student service equal to inject student service Implement on init un method is called un initialize let's implement it and let make this declared variable student type of TP will type is observable of student are so let's set this student server is. get student And subscribe next response this no no response from server if there is error then error will goes here let's run our PL and backend application go to student here we have null injected error for this we should include sttp client model in app config so go to app config provide provide client HTTP client so let's save and go to here go to student now student but we have cross origin error we need to enable our cross from backend so go to program do Cs and at the bottom just use course of options goes to options. use sorry option do allow and header options. allow and Method and options allow any orig so let's save it now just restart our application again net was run let's go to student now we have area of student so let's print it in our student component let's initialize our student to this. students let's make it observable to and do is to this so remove this things let save it and go to student component list render list so for item of students Asing sorry ising we need to import Hing [Music] file let's save it now eror is demo St item this print Spen s item do name joh updated so let's make it little beautiful so TP class SLE rounded and P3 this means let's what and P here we have card just wrap this with G create template create Colum for just WRA this t with GRE so we have card let's make it three now just it make four let's W this with deep plus b okay so go to opponent. HTML and W this with d class E1 which mean padding 10 padding 2.5 RDM the same okay let's make this title little old so List It class this TT [Music] 2xm this it is one here plus text XL on on stents just make Exel and sem this is good let's make gap of five let's create one student here so go to post try it out ROM more something email cmail.com let execute we have successful response so let's go to and refresh it we have two student now let's make little beautiful so let's Flex item and let's make deep [Music] and just copy we have two here so bring this here let's say flex and let's save it okay let's get post from here and two or case so so let skip class BG blue 500 round full and P2 B5 okay just give height with width of 10 and height 10 so make it Flex Justus defy Center item Center so let's make text white font BT just looking like good Gap 10 no this Gap will be here not 10 just five just make it item Center look we have Center item and just give some margin bottom M B1 just looking good let's make little big just keep class text 3 XL to just XL it's fine okay and give another is four we [Music] have item do address just say text Gray 500 is mar just want to add icon here go to strap icons icons and PE of location just bring this one let's copy this SPG P here okay just d DP and give Flex to this D so item Center Gap look it is good now mt2 and mb2 little blow think mt1 is good and B1 is good this is name so let's make it title case so go to here and title case just go to component and import common model title case so let's say we have capital letter use here also use title cas here we have another thing let's bring another go to icons and just bring this one just go to and copy it let's also make GRA with tip CL plates items Center Gap two paste it bring this line up look yeah beautiful I can just give a little color text G 500 okay let's print another things just copy it paste it and email sorry email copy email from [Music] here just copy this icon copy paste here now let's add two icon bring edit this one copy it paste it and another is delete this one copy from here past it let's make justify content between let's bring these things outside this t let's wrap this two dip into one single dip so let's cut D paste it and that's it so let's make it Flex and item Center Gap two make it justify between so let's make a p four or maybe five it's looking good so let's make make some gap between this two icon go to bottom and make Flex Flex dire colum and GAP two okay it's good let's make a four five maybe okay now let's add button L me give class P2 BG P blue okay I have blue and text white rounded andd counted and Shadow MD H will be [Music] PG 400 de and we have this icon so let's make delete icon also with bottom State class bz rate 4 100 text y P2 okay and rounded full and over BC so BC 3 let's give some moreing p p is Cle that's three okay good we have delete icon and edit icon let's start implementing edit operation so go to terminal new terminal and just set it command [Music] prompt now get to client generate component NG generate component students and inside student component name will be student form St form is created so let's go to Route app route and add here F will be students SL ID component will be student home component okay let's go to app component HML let's go to strand component and let's make it anchor and set router link just it go to component and import rter link save it back to student component and let's make SL students dra [Music] are and item. [Music] ID let's make it Anor save it to browser edit it okay have student form let's create form inside form component go to form component CL s be [Music] input text class mod [Music] WOD by 3 M MX 10 rounded M to this F will be x54 and to this m 5 for M4 let's change it address [Music] this's make it little small three bottom plus PC blue T try see and cancel cancel 7 T BL VX4 D2 ml 4 make it sing PX4 okay but button cancel and save so let's see just make it [Music] form form save it let's import reactive forms mod let's make Constructor home tpe will be P group let's Implement on unit method so let's it let's initialize this [Music] formal to the F group grp name the student model is this so we need this property let's copy it and P here [Music] comma Comm now let's register this form group inside our student form so let's go to student form and form group form so let's register controller form control name name and form control name address the property of our model student model form control name home this will be we don't need ID here it and home control name and the properties email so let's make it Emil let's make it [Music] number sa it student it now let's see console nothing here K so just print out something here form. value Jon so just register Jon P include Jon P here Jon now ER is gone so name is z one doil sorry we have fix this ER number not email phone let's say phone number home and this will be let [Music] say. this is our P group so let's rename it email so import L and let's make it anchor so and us are cancel router link will be SL to [Music] students this cancel student so let's go to edit let's make method in service go to service and let's extract this URL into variable API urlal to this one so this Ur [Music] now student student what go to Str controller when we add Str we send no so so we do this do HTTP do poost this do and data and student data let's close everything student form student form go to strength form and let's make one method and submit just log data this form value so let add this here and this submit submit let test T Test test say we have P value here so let's post this P value back in so let's inject our service here student service it student service we can inject service in Constructor let's in book method student service. add student and this. form value subscribe next will be response response just loog it response if there is error then ER go [Music] to eror to Lo so let's test same look we have 400 request let see message go to network tab preview this so let see below our phone number isting so we Sange our number to string so make it text and let's dve in test test 9 and c.com so let's save all Suess 100 okay so that's that's it we have successfully added data let's cancel this we have t here now let's unsubscribe our method so after destroying this component so we need don't need to subscribe our service so make one subscription so let's say to form subscription typ subscription let's say this student subscription and let's Implement on Destroy method this student subscription do unsubscribe it now now let's validate our form so go to here initial value and validators do required inl email n and validation validator email so let's go to component form component and let's sa this from withd spin class T rate 400 name is required only so if controls there's a name here look we have requ so if we F name so work now let's validate this email let's say if let's copy these things and reuse it here email Emil Emil should be add it let's go to browser and refresh may see so this is inv email and if I add add it come so this is our Lon remove this phone Val from here and go to home component and inject here private rou Ed router we are going to use activated rout here for getting this ID from Route so let's go to un method and this do activated dot par par. subscribe and next we have response log response otherwise we have error error go to inut Z let see browser we have id4 let's get ID from here and we have P so let's make another G method in our service so let's create get student method ID this type is number will beable of student so this do AP this. HTTP dog this AP I add Plus slash and adment ID here so let get student from here save it go to student form and just go to here and in our method this student service student and response ID subscribe next response response to Here let save it we have id4 and name is test let's as this form so let's say this. [Music] phone. and response let's save and go to browser we have form field let's see let's make is edit false there is ID then this is so let's go to form and and let's add here is5 do text XL and say is true then student otherwise student so now we have edit you go to edit then it f form automatically you go to here so let's make one changes go to here and let's just copy from here save just remove this things and this things look we have it stent okay cancel it look we have error here something cannot read property of on Define reading un subscribe this mean we have we need to check if we have this student subscription then we need to destroy we need to unsubscribe so let's check it yes it works so now let's make this student little bit B so go to and S okay it's good now so P 10 p8 is good form is ready so let's add one button in our student component so go here and this with one lent student let make it is text file BX file see let's make it Flex gives FX just between between just say in one and let's see item Center okay it's okay we haven't configure our student form so let's go to Route so let's go to Route app R and duplicate so let's make it form so let's SEC let's see console happen student SL form students not student students so let's make it student and let's say work student here so our form is working and one more things here our on init if we have just make one other subscription to destroy paring subscription so paring subscrip subscription to here list of parent subscription and if to if this avable then distro this subscri un subscribe let's check one more thing PL ID is response ID if no ID then return iMed from subscription get here so let's pass ID here let's save and see now we don't call get by ID me so let's add one more thing let's add one more student new student of [Music] the so now we have successful so let's cancel let's do one more thing here if our response is Success then inject one more things here so private router Router so R this router navigate by UR so go to students sa and test one more so test test so let's it now we have working the direction so let's now let's Implement beautiful tool add NG toster our application good and say NG toaster do this first link then copy it paste it here so documentation so go to Blue and or by toter in provide toer in app config so go to app config let close this terminal provide po let's go to here and Z toster service let break down it's not visible so right now this inject post service service is setting this post service success student successfully added okay let's sa it test now save we don't see anything here we have forget to add this CSS in our CSS file so go to CSS file then add above it save it and is to one so okay we have St successfully add message so this working now now Implement our delete method so go to Str service and duplicate it Del student so go to student controller and let's see what we are written from here we have written just a message so nothing that means let's say we don't need anything here so let's move it and just remove it delete method so let's Implement dat method in comp so go to student component HTML and in this button let's B click delete so item. ID component one method delete ID type of head is number so this student service delete student class ID and subscribe next response so next response equals to just in toter here in sorry tost service tost service just say and this tost service sues success it okay this test just make this method so private G students this one this do not return anything so this get student if thison successful then then reload students okay let's save and T application [Music] deleted so let's see in our console we have error here error say delete method let's go to controller and here here should be object so say let do it from here and also this things from here so we don't need these things in front so let SC to and let's it out is it so we have [Music] remove so let's Implement edit method so C add new 18 so let's try to edit this so go to student form student form and let's go to submit form if this do is not edit then it is then just it student otherwise this do student service do edit we don't have edit method so let's go to student service and make one method a disc so number and data will be student model so student here data here and Method let say student service. student this. this store [Music] id [Music] id Z this ID and let's this id id so go to ENT and this form and P so pleas subscribe next to service success successfully so other ER this so ER service Ed it so save it and try edit this edit and just get to and get value added so students save just edited now dat we have successfully implemented edit operation so let's do one more things so let's edit these things Del let delete this deleted so [Music] it let edit it did it so let delete it [Music] deleted and to let's go to Str it make little bit anchor so let's keep V 600 right MD p so thank you for watching this is our tag. net API and angular 17 Cor opon

Channel: Code with Pushpa

Views: 2,668

Keywords: .net, web development, .netcore, .net framework, .net core, angular 17 .net 8 web api full app, full stack web development, .NET 8, .NET 8 Web API Example, .NET 8 Web API Controller, angular 17 tutorial, ASP.NET Web API PUT Example, ASP.NET Web API Real World Example, web api full stack app, beautiful full stack web api project, asp.net core web api and angular 8 crud, .net angular course, tailwindcss angular 17, angular 17 crud, ng tailwindcss, sqlite .net 8, ef core 8 sqlite

Id: WxkI70w-bwY

Length: 107min 38sec (6458 seconds)

Published: Mon Dec 25 2023