First Application in Angular

By | August 12, 2018

We already set up Angular CLI. Now we will create our first Angular Project. We will use Visual Studio Code (VS Code) as our code editor. If yet doesn’t have VS code please browse here and download and install it.
1. Open Visual Studio Code (VS Code)
VSCodeWindow
2. Go To View Menu -> Select Integrated Terminal
VSCodeIntegratedTerminal

So Integrated Terminal will open which is follows-
VSCodeIntegratedTerminalOpen

3. Choose the drive where Angular project will created. In my case I choose E:\ drive as follows-
C:\Users\DELL>E:
VSCodeChooseDrive

4. Create a Directory in E:\ drive where my Angular projects will created. So write following command-
E:\>mkdir AngularProjects
VSCodeCreateDirectory

So a new folder will created inside E:\ drive which name is AngularProjects

5.Then enter inside the newly created directory (folder) by following command-
EnterIntoDirectory

6. Write following command to create Angular project-
E:\AngularProjects>ng new HelloWorld
CreateNewAngularProject
Here ng is Angular keyword. New means new project. HelloWorld is the name of the project-
Creating New AngularProject

This will take few minutes to setup Angular Project
AddedFiles

And that’s it. We have created our first Angular app using VS Code and Angular CLI.

Opening Angular Project inside VS Code
1. Open VS Code
2. Open Terminal from View-> Integrated Terminal
3. Go to directory where we have our project-
3.1-C:\Users\DELL>E:
3.2-E:\>cd AngularProjects
3.3-E:\AngularProjects>cd HelloWorld
3.4-E:\AngularProjects\HelloWorld>code
So Another VS code window will open with our application
*. Please ignore step 1 if VS Code is already openned.
*. Please ignore step 2 if Integrated Terminal already openned.
*. Please ignore Step 3.1 if already in E:\ drive i.e. in the drive where the project is in.
*. Please ignore Step 3.2 if already in AngularProjects directory i.e. in the directory where the project is in
*. Please ignore Step 3.3 if already in HelloWorld project i.e. in the in the project
OpenCode

Launch Angular App in browser
The name of of project is HelloWorld. Now we will Launch our project on the browser.
1. Open VS Code
2. Open Terminal from View-> Integrated Terminal
3. Go to directory where we have our project-
3.1-C:\Users\DELL>E:
3.2-E:\>cd AngularProjects
3.3-E:\AngularProjects>cd HelloWorld
3.4-E:\AngularProjects\HelloWorld>ng serve

As previous
*. Please ignore step 1 if VS Code is already openned.
*. Please ignore step 2 if Integrated Terminal already openned.
*. Please ignore Step 3.1 if already in E:\ drive i.e. in the drive where the project is in.
*. Please ignore Step 3.2 if already in AngularProjects directory i.e. in the directory where the project is in
*. Please ignore Step 3.3 if already in HelloWorld project i.e. in the in the project
AngularLaunch
LauchFinal

The output is as follows-
HelloWorldApp

82 Total Views 1 Views Today
Md. Mojammel Haque

CSM, CSPO, CSD, CSP-SM, CSP-PO (ScrumAlliance.org)
Certification Profile Link-
https://www.scrumalliance.org/community/profile/mhaque13

Currently working as Lead Team (Application Architecture) at Raven Systems Ltd. Passion for software development especially agile practices such as TDD with in depth knowledge of Object Oriented Programming, SOLID Principles, Gang of Four Design Patterns, Some Enterprise Application Architectural Patterns. Over 8 years of software development experience ASP.NET. Has the ability to understand and transform complex business requirements into software ensuring applications are delivered on time. Also experience in non Microsoft .NET technologies such as Dapper.Net, Git, Structure Map & Angular, Bootstrap, HTML-5, CSS-3 etc.

Category: 1. Full Stack Web Development 1.05-Angular Uncategorized
Md. Mojammel Haque

About Md. Mojammel Haque

CSM, CSPO, CSD, CSP-SM, CSP-PO (ScrumAlliance.org) Certification Profile Link- https://www.scrumalliance.org/community/profile/mhaque13 Currently working as Lead Team (Application Architecture) at Raven Systems Ltd. Passion for software development especially agile practices such as TDD with in depth knowledge of Object Oriented Programming, SOLID Principles, Gang of Four Design Patterns, Some Enterprise Application Architectural Patterns. Over 8 years of software development experience ASP.NET. Has the ability to understand and transform complex business requirements into software ensuring applications are delivered on time. Also experience in non Microsoft .NET technologies such as Dapper.Net, Git, Structure Map & Angular, Bootstrap, HTML-5, CSS-3 etc.

One thought on “First Application in Angular

Leave a Reply

Your email address will not be published. Required fields are marked *