Angular Application with Angular CLI

-

 Once we Installed Angular CLI we can check CLI version using "ng version" command in command prompt of windows or terminal in mac.

Now try with "ng help" you will get a list of ng commands with its description as shown below, we have already used "ng version" from the list.



Creating Application with CLI:

For creating a new angular project we can use "ng new projectName" command.
Open Command prompt and change the directory to the folder in which you want to create the project. See Screenshot below:


when you type command "ng new todoList" it will question like routing is required so based on your required if there is multiple page and you need to route from one page to another then mark it as Yes.

Once above installation is success then you can check whether your project is created or not by using command dir in windows and ls in mac. Refer below screen shot:


You can see a list of files are created in your project folder.

Now you have created your project and we are going to build and run our project for this we can use command "ng serve". In your command prompt put this "ng serve" command and press Enter it will start building your application as shown below:



Here you can see our project is build successfully and it is listened to "http://localhost:4200/" , in your chrome browser open this localhost URL , similar to below screenshot will appear:




Previous Topic(Install Angular CLI)                                                  Next Topic (Import Project in IDE)

Comments

Post a Comment

Popular posts from this blog

Logout Component and Angular Router (CanActivate)

-
Image
  In this topic we will create our logout component for our application and also remove session object if user is logged out as well we will see the use of Angular Router method CanActivate. Now Let's create logout component using command "ng generate component logout"  once you create the logout component you have to add it in routing file i.e. app-routing.module.ts and add it before ** as ** will be the last thing in routing. After adding it here you can check it by clicking on logout button in your localhost URL. Now we will remove user from session storage for that we need to add one method in authentication service and use that method in logout component by dependency Injection. Till Now we have done the login, menu, error, logout so you can check it by going through localhost. but still we have one problem i.e. if we go to http://localhost:4200/welcome/dummy or todo or any menu item without logged in it is working so what do we need to do here? we need something whi
Read more

Installing Node Js (NPM) & Visual Studio Code

-
Image
1. For Installing Node Js, Search Download Node Js or go to  Download Node Js  , Based on your operating System Download the respective files. Once You download and install it you can verify it by opening Terminal or Command Prompt and typing "npm -v" for npm version and "node -v" node version as shown below: 2. For Installing Visual Studio Code Search Download Visual Studio Code in Google or go to  Download Visual Studio Code Based on your Operating System download Respective files and install it, it will take few minutes to install. After installation open visual Studio Code it will look like below                                                                                                                                             Next Topic (Install Angular CLI)
Read more

Importing Project in Visual Studio Code

-
Image
 In Previous section  Angular Application with Angular CLI we have created project todoList now we will import it in our visual Studio Code. we can do it by drag and drop folder in visual studio or by using open folder from visual Studio code as shown below: open readme.md file you can see the project details like host, cli version and other things. Previous Topic(Create Angular Application)                                           Next Topic (Angular CLI Command)
Read more