Website Development with Angular using CLI

My previous blog post, demonstrating setting up development environments for Angular.This blog post will help you to create simple angular applications and build, here we will demonstrate how to create an angular application from scratch using command prompt (CMD) and, we will discuss the measure files and folders associated with angular application.

Website development with Angular using CLI

Getting Started

Before continuing this blog post, I hope you have visited my previous blog post, or already done with setting up environment development for angular.

Prerequisites

• You should have a knowledge of HTML.
• You should have a knowledge of CSS.
• You should have a knowledge of JavaScript.
• Basic knowledge of the Document Object Model (DOM).
• Model-View-Controller (MVC) concepts.
• Should have basic knowledge of command prompt.

Steps to Create Angular Project

The following steps denomstrates how to create angular project using command prompt. Go through each and every steps carefully.

1. Open the command prompt.
   • Click the Windows Start button Windows Start. It's the icon that has the Windows logo. It is in the lower-left corner by default. This opens the Windows Start menu.
   • Or type CMD. This displays the Command Prompt in the Windows Start menu.
2. Navigate to the directive or folder where you want to save your project using cd command. For example, I want to create a angular application in this path D://Angular then will use following command.
   • Type D: then press enter
   • Type CD Angular then press enter, make sure you have already created the folder Angular in D drive.
   • Or if you did not create the folder then use CMD command like below and press enter again follow the step b.

      MD Angular   
     

3. Use the ng command to create a new angular application. The ng command will generate angular project in D://Angular path.

    ng new AngularApp  
   

4. The above command will create a angular project with name AngularApp.
5. Press enter key and it will as a question in between. If you type Y, then it will generate routing module. Write now it’s not required to create routing module in angular as here we will create only a simple angular project, hence type N.
6. You may find another a special prompt, ignore as of now by typing N.
7. It will be continued with another question, go head with CSS by pressing enter key. The installation will be started and will take some time.
8. When the installation is completed go to the path ‘D:/Angular', you will find a folder AngularApp, open the folder you will get couple of files inside it.
9. We will discuss about the files later in this blog post, now execute below command which will navigate to application folder.

    CD AngularApp  
   

10. Again execute the below ng command, you will notice that the compilation will go on and later a browser automatically gets launched with an angular following page.

     ng serve --open  
    

Website Development with Angular using CLI

Angular Project Structure

Open the folder AngularApp, you will find following measure files inside it. Read carefully about the files.

man.ts

main.ts is a simple script file and the entry point of your application, compiles the application with just-in-time and bootstraps the application.

angular.json

The angular. json file is the configuration file in an Angular app for the Angular CLI. It stores information about the project's architecture, dependencies, build and test configurations, and other settings.

package.json

package.json is a file that contains information about the project and its dependencies In an Angular app. It is a part of the Node. js ecosystem and is used by the npm (Node Package Manager) to manage the packages required by the project.

tsconfig.json

This is the TypeScript files for configuration, You will notice that there are 3 versions. There are:

• tsconfig.json : Contains standard TypeScript settings.
• tsconfig.app.json : extends tsconfig.json and defines an additional setting for the development mode.
• tsconfig.spec.json : it is also extends tsconfig.json and defines an additional setting for the development mode.

index.html

index.html is the default page. When you create a new project, you can find this in index.html. The index.html contains head and body tags. Inside the body tag, The <app-root>tag element which works as a place holder for angular default components.

src subfolder

src subfolder of the workspace contains the source files (application logic, data, and assets) for the root application. Inside the src folder you will get another folder that is app.

app.module.ts

Every Angular application has at least one NgModule class, the root module, which is conventionally named AppModule and resides in a file named app.module.ts .

app.component.ts

 This file is main class file for any component app.component.html - This file is component's html which can be bind with app component.

Angular Component

Components are the main building blocks for Angular applications. Each component consists of: An HTML template that declares what renders on the page. A TypeScript class that defines behaviour. A CSS selector that defines how the component is used in a template.

app.component.html

It contains the html tags that will be used to present data in ui.

Summary

In this blog post, we discussed to create simple angular application step by step. my next post is comming that will create new angular project in visual studio code where we will discuss cointinue discussion to add new components.

Thanks