Creating angular 6 project

This is Part 1 of Angular 6 Tutorial for beginners. In this video
1. We will set up the development environment by installing the tools required for Angular 6 development
2. Create a brand new Angular 6 project using Angular CLI

Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.

If you are a foodie like me, I am sure you will enjoy the recipes on my friend's YouTube channel. If you find them useful, please subscribe and share to support her. She's really good at what she does.

Text version of the video

Slides

Angular 6 Tutorial

Angular 6 Tutorial Text Articles & Slides

Angular, JavaScript, jQuery, Dot Net & SQL Playlists

Pre-requisites
Basic knowledge of Angular and Angular CLI

If you are new to Angular, please check out our

Angular 2 course and

Angular CRUD course

If you are new to Angular CLI, please check out our Angular CLI course

Setting up Angular 6 Development environment

Step 1 : Install Node and NPM using the link below.

You need Node version 8.x or greater and NPM version 5.x or greater. To veriify the version of NODE and NPM you have, execute the following 2 commands using the command prompt window. Make sure you are running the command prompt as an administrator.
node -v
npm -v

If you already have NODE and NPM installed and if you want to upgrade to the latest version simply download and run the installer again, and it will automatically update NODE and NPM to the latest version.

Step 2 : Install Angular CLI. It is a command line tool that help us create angular applications quickly and easily while still following angular's best practices and conventions. It's a great tool to increase your productivity as an angular developer.

If you do not have Angular CLI installed already, execute the following command and it will install the latest version.
npm install -g @angular/cli

If you already have Angular CLI installed, and you want to upgrade to the latest version, then execute the following command

Step 3 : Download and install Visual Studio Code

Create a new Angular 6 project using the Angular CLI :
Step 1 : Run the command prompt window as an administrator

Step 2 : Execute the following command to create a new Angular 6 project.
ng new Angular6Project -d

Command Explanation
ng - Is the Angular CLI
new - For generating a new project
Angular6Project - Is the name of the project
-d - This is dry-run flag. This flag instructs Angular CLI just to list the files it's going to create. It does not actually create them. This is a great option, because it lets us see what files will be generated without actually generating them.

In our case, we do not want test files to be generated so let's also use --skip-tests option to skip generating test files. The following generates a new Angular 6 project and all the required files. Notice, we have not used -d option, so Angular CLI will create the Angular project and all the required files.
ng new Angular6Project --skip-tests

Running the Angular 6 Project
1. In the command prompt window, use the following command to go to the project directory
cd Angular6Project

ng serve --open (short cut command : ng s -o)

At this point you will see the following on the browser
Welcome to Angular6Project!

This message is coming from the root component AppComponent.

In the generated project there are several files and folders. If you are new to these files and folders, please check out Parts 7 and 8 from Angular CLI tutorial.

[sandeepn]

You are a god for developers and many of them are making their living relying on your tutorials. No exaggeration! Very rare to see such selfless people in these days when world is full of commercial minds.

[someshnukala]

Thank you so much Venkat sir. One of the Greatest Teachers in the world. Pride of India Venkat sir

[zafariqbal]

You are one of them who's teaches increase me to learn programming like a simple way. You are best .

[sun_raise_ap]

Venkat garu you are the best teacher I have come across so far.. Thank you sir🙏🙏🙏

[saurabhkesharwani]

Thank u venkat. Today what I have this is because of u. Thanks alot venkat .

[somesbhowmick]

You are great just give too much information just free to the world. God bless you. no need Udemy paid version.

[m.e]

I hope u will explain how to deploy projects online .. like all the steps, also what are the choices when it comes to using databases ? meaning I want to develop and deploy my personal app as real life angular 6 app, also if u could make some lessons about the mobile apps using Angular and the same thing how to deploy and put it on work... I'm still watching Angular CRUD course and it's really amazing thank you so much Venkat

[Lohithaveerla]

sir, you are doing grate job, plz create angular 12 or higher so that it can useful for lot of students like me...there are no good instutions where we can learn angular 12 or higher in present market

[VenkataRamana]

Hi Venkat Sir, You're really an amazing tutor. Thanks a lot for sharing all of your technical skill set with wonderful demos and spending lot of time to keep updating latest technologies....

[priyankakumari-izer]

@kudvenkat : Could you please create a video for debugging angular projects?

[saurabhghoshtrippy]

Hi Venkat,

If you start the MEAN stack tutorial then it would be a great help for us.

[globaltech]

I am working on Dot Net Core and angular 7 project (both in same project) visual studio 2017. My project currently working fine on IIS express but I want to use Local IIS for my DotNetCore/Angular project by creating virtual directory. Just like we used in Dot Net MVC application by using project properties -> Build -> Server -> Local IIS (VS 2015).

[sifatjahan]

Please make a series for data structure and algorithm which will be very helpful for students

[snehabhosale]

Its a request to upload videos on React and the latest angular version with its functionality and deployment

[amineherizi]

Can u plz add the part number in the title of every video ? It will help a lot to know which part it is directly from the title.
Thank you for all your efforts.

[supriyochowdhury]

Venkat Sir,
Thank you very much for your wonderful tutorials. However I have one request, if you please post a video regarding Angular Reactive forms and Pipe for formatting various values into different output as per the need of the hour. It is there for Template Driven forms. But it seems a bit tricky for Reactive forms. Looking forward for that with great eagerness and thanks once again for your wonderful contribution.

[visethso]

I learn a lot about .Net Framework from your channel. It would be great if you could make a tutorial on Single Sign-On for asp.net web forms, mvc and web api-based web applications. There aren't many good resources on the Internet. My university has a sophisticated Single Sign-On for different web applications. After some research, I suspect they might use ADFS and Active Directory instead of REST API as some of the web applications are developed with asp.net web form, asp.net mvc, php, python. They also have Rest API-based web application which I don't know what framework they use. Thank you!

[avinashg]

text version of your tutorials is really very helpful...If its possible to add text version of c# and other tutorials as u r doing with ur current videos. bcs most of the videos have missing text version though there link is given (but no description). .
but Excellent work..always praise ur hard work..Thanks

[tejveer]

sir all of your series are awesome. But please increase audio of videos so that it can become more audible to us

[abhishekranjan]

Hello Venkat sir, Thank u very much for your videos. I learned many things from your videos. I have one request to you, can you please upload of Testing videos on manual and ETL testing with required testing tools. It will be very helpful to all. Please reply to this comment. Thank you.