Creating First App in Angular

Harsha Vardhan
A free video tutorial from Harsha Vardhan
MS Certified Trainer | 32000+ Happy Students
4.3 instructor rating • 9 courses • 36,238 students

Learn more from the full course

Angular 9 Jump Start - For Busy Developers

Angular 2, Angular 8, Angular 9, Dashboard, REST API calls, Real Time Project, Durgasoft

04:04:11 of on-demand video • Updated October 2020

  • Confidently speak about most of the essential concepts of Angular
  • Crack angular job interviews easier
  • Solve most common bugs and issues in Angular applications
  • Quickly create Angular CRUD operations real time application with Asp .Net Core
  • Create Angular Folder Structure with industry best practices like a Pro
  • Create Professional Dashboards with ease
English Let us see how to create first application in Angular. We are going to use bootstrap from the first day of application, because in real time it is must to use bootstrap or any other equivalent CSS framework. All the future lectures add different features to the same project. So each lecture makes it progress in the course project. Steps to create first application in Angular: At first you require to install Nodejs. Nodejs allows to use NPM on your machine using which all the angular packages are shipped. In other words, using NPM only we are downloading all Angular packages. Next you require to install a Visual Studio Code, which is the code editor which is used to edit the source code of Angular application. You have other choices such as Sublime Text, Atom, Web Storm etc. But I chose Visual Studio code, as it is one of the most popular, free, open source, highly customizable and easy to use. Next, you require to install angular CLI, which is a NPM package basically, which provides a set of commands to create Angular application and also add items to the existing application. To create actual angular application, you require to run the command "ng new" at the command prompt window. Then it automatically creates the essential folder structure of angular application. Then you require to edit the source code such as components, templates and also run the application by using the "ng serve" command. Let me show the same process practically. Open "nodejs.org" website and download the current version of Node js. As of this video time, it is 11.10.0. So click on "current". And run the file. Now Node.js Setup Wizard has been started. Click on Next button. Check the check box "I accept the terms and the license agreement". And click on Next. The default path is "C:\Program Files\nodejs". Click on Next. Keep the default options as it is; and click on Next. Uncheck the checkbox "automatically install the necessary tools". Click on Next. And also click on Install. NodeJS installation is completed. Click on Finish. Now open the Command Prompt; By default your command prompt is located in "c:\users \yourname". Now you require to install Angular CLI on your machine, by using NPM. So the command is "npm install @angular/cli -g". This command will automatically download and install Angular CLI on your machine. -g indicates globally. That means from any folder of your machine, you will be able to use Angular CLI; not only from C: drive. It will take around on two minutes of time to install Angular CLI.... Now Angular CLI installation has been completed. I want to place all the tutorial applications in the folder called "c:\angular". So we require to create such a folder. In order to create a folder, "md foldername". "md" stands for "make directory", which means that you are going to create a new folder. In C: drive, I am going to create a folder called "angular". At your practice time, you can take any other folder name as per your wish. Now in C: drive, "angular" folder has been created. In order to open the same, "cd c:\angular". "cd" stands for "change directory". Now we're in the "c:\angular" folder. In this folder, you want to create a new angular application; so the command is "ng new". You require to specify the application name. For example, our application name is "taskmanager". You can give any other application name as per your requirement. Now you require to specify the style options. Either you want to use a plain CSS or SCSS or SASS, or LESS. You require to add "--style=SCSS". You have options like CSS, LESS, SCSS, SASS. In our tutorial, we're going to use SCSS. In case if we don't know SCSS.... "SCSS" is a superset of CSS, which contains all the features of CSS, but adds additional features such as variables, if conditions, operators etc., to the plain CSS, using which you can make your application more responsive to the user. And in order to add routing for our application, you require to give "--routing". Again add "space"; When the application is created automatically it will try to install the necessary NPM packages; In order to skip that installation, you require to add an option: "--skip-install". Because the default "npm install" command of Angular CLI has some bugs. So often it will make issues. To avoid such problems, I'm going to skip the "npm install" command, at the time of using "ng new". So the final command that you have to use is "ng new applicationname --style=scss --routing --skip-install". You can open the folder i.e. "C:\angular". It has a folder called "TaskManager". And it has a folder structure that is "src" with "app" folder, and other related files. I have explained about the angular folder structure in the previous video. So if you want to quickly know about the angular files and folders, please check out that video. Now let me enter into the folder called "TaskManager". So "cd taskmanager". Now in this particular folder you require to give "npm install" command. This command will install essential packages that are required to run angular application. The list of packages that are required is already specified in the "package.json" file. Internally it will read the list of dependencies some the "package.json" file and install those packages automatically. It will take around two minutes of time, to install these packages. Now necessary NPM packages installation is completed. Now you require to install the code editor i.e. Visual Studio Code. So go to "code.visualstudio.com" and click on the button "Download for Windows". Download the file called "VScodeSetup.exe" file and run the file. Now the Visual Studio Code Setup has been started. Click on Next. Select the radio button "I accept the agreement". Click on Next. Keep the default path as it is. Click on Next. Click on Next again. Click on Next. And click on Install. It takes around one minute of time to install Visual Studio Code.... Now the Visual Studio Code installation is completed. Click on Finish. Now open Visual Studio Code. Go to "File" menu, "Open folder" and select the path "c:\angular\TaskManager". Now, in the Explorer window it will show the folder structure of TaskManager folder. Open "src"folder - "app" folder. There you will find two files, i.e. "app.component.ts" and also "app.component.html". In the app.componet.html, you can write any of your content whatever you wish. So I have deleted the default content and added the new content that is "Welcome to Angular". Save the file; Come back to the command prompt window. Make sure you're in the "c:\angular\taskmanager" folder. There you have to give the command: "ng serve --open". This command will automatically compile and start executing the angular application. The default port number of angular is 4200; In case if you want to change the port number, you can specify the port number explicitly; for example, "--port=5200". You can give any other port number as per your requirement. Internally it uses nodejs to run the application. It is compiling the application now. And automatically open the default browser, and run the URL "http://localhost:5200". You can also manually type this location. "http://localhost:5200". In this case, 5200 is the port number that we have mentioned in the command prompt window. If you don't specify the port number the default port number is 4200. At that time, the URL will be "http://localhost:4200". Anyways, we got that given content as output; In case if you modify the content... For example I just added "hello". Once you save the file, immediately the file will be re-compiled and also the page will be refreshed in the browser. This is how to create first application in Angular. In the further lessons, we are going to learn how to add the bootstrap to the angular application.