Angular project setup

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

Download the complete project source code

Instructions to run AngularCrud project

This is Part 1 of Angular CRUD tutorial. In this video and in our upcoming videos in this series we will discuss performing CRUD operations in Angular i.e Creating, Reading, Updating and Deleting in Angular with simple examples.

Setting up a new angular project from scratch is a tedious and time consuming process. However, Angular CLI makes it super fast and easy. With angular development, we write same boiler plate code to create components, pipes, services, directives etc. Manually creating these consumes lot of time. Angular CLI can generate these with lightning speed while still following Angular's best practices and conventions. So basic knowledge of Angular CLI is very helpful.

The prerequisites for this course are basic knowledge of Bootstrap, Angular CLI and Angular 2. If you are new to these please check out our courses using the links below.

Installing the tools required

Node : Install the latest version of node. Here is the link to download and install the latest version

To check the version of node
node -v

Angular CLI : Install the latest version of Angular CLI by executing the following command from the windows command prompt.
npm install -g @angular/cli

To verify the version of Angular CLI installed on your machine execute the following command.
ng -v

Another question that you might have is, which version of Angular are we using with this course. As of this recording, the latest version is Angular 5, which is what we will be using.

After you have the latest version of Node and Angular CLI installed, launch windows command prompt as an administrator and execute the following command. This creates a new AngularProject with name AngularCrud. We do not want test files to be generated for the root component AppComponent, so we have set "skip-tests" option to true. We will discuss unit testing components in a later video.

ng new AngularCrud --skip-tests true

We will be using Bootstrap for styles in our application. So install Bootstrap by executing the following command from the command prompt.

"styles": [

Text version of the video

Slides

Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

[lolotimo]

Should acknowledge your great effort to make this tutorial, it is very simple, comprehensive, covers major concepts, seamless flawless presentation, must say thank two thumps up!!

[UpendraSingh-lm]

Hi @kudvenkat Sir, Could you please make a video over latest Angular -15 or 16. It will very helpful to us. This is a humble request Sir. Your videos very helpful to us Sir.

[nkanyisoshangase]

This is the best channel, good work man

[kshameed]

As of may 30th, when we create angular 6 boiler plate code via cli, there will be no angular.cli.json package created instead it will be angular.json and also to specify the path you have to use instead of two level one level.

[adsbix]

thank u so much sir, kudvenkat channel is the best

[athiraunnikrishnan]

Hi Sir, Could you please make a tutorial on using DevExtreme Angular Components.

[bsuhanijayaswal]

Hello Sir !!! Once again an excellent series. Your efforts are really appreciated. Can you please make a series on Angular Jasmin Karma Unit/End2End Testing. Thanks

[kjellberstad]

Thank you for a super channel, good progression. A wish: file up and downloading with progressbar.

[MagnetoEphraimMani]

Hello sir hope u r doing great. Do u have any plan about Xamarine tutorials? Anxiously waiting!

[Avinashkumar-nxiq]

Thank u so much or this vdo series...& could u please..provide a vdo series of Node & Express & mongodb.. & will be helpfull for fullstack developer....& please provide a vdo for us...(create a crud using NODE & EXPRESS & MONGODB & ANGULAR), and Firebase also...full Back-end to front-end....pllzzz pllzzzz pllzzz

[raghuvallikkat]

Hi Venkat, very nice tutorials. Thanks for the same. Is there any github link where the samples mentioned in tutorials available?

[gerardoortizgerry]

great videos man, i would like to ask a big favor if you have a video on how to add order and order details in angular using firebase, many thanks in advance

[lalityadav]

Sir when will you upload the next videos of Angular CRUD series ?
Please upload asap !!!

[bikashmeher]

sir may god bless you and am a great fan of u, sir would you like to tell something about the repository design pattern bcoz sir for this only me and my friend are getting sufferd very much, please sir consider us.

[waqarabbas]

after this please do some stuffs with angular fire base...
and yes your channel is great.. (Y)

[jeewanmaharjan]

Hello sir, My request Could you change the background color of slides as White and Text as black, so that we could print the slides and study. The blue black ground color makes the print dark. Please consider my request.

[sharathrk]

Sir..! Plz make a series about HTML 5 and CSS 3

[vinayakbge]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0

[priyankaroy]

Hi Sir,
Would you please help me to integrate RESTfull API in Angular 2 while doing CRUD operations?

[imranyaseen]

Thanks sir. Do you also have plan to record videos for react.js as well?