Angular 8 - Creating First Apppcation

Let us create a simple angular apppcation and analyse the structure of the basic angular apppcation.

Let us check whether the Angular Framework is installed in our system and the version of the installed Angular version using below command −

ng --version

Here,

ng is the CLI apppcation used to create, manage and run Angular Apppcation. It written in JavaScript and runs in NodeJS environment.

The result will show the details of the Angular version as specified below −

Angular CLI: 8.3.26 
Node: 14.2.0 
OS: win32 x64 
Angular: ... 
Package                    Version 
------------------------------------------------------
@angular-devkit/architect  0.803.26 
@angular-devkit/core       8.3.26 
@angular-devkit/schematics 8.3.26 
@schematics/angular        8.3.26 
@schematics/update         0.803.26 
rxjs                       6.4.0

So, Angular is installed in our system and the version is 8.3.26.

Let us create an Angular apppcation to check our day to day expenses. Let us give ExpenseManageras our choice for our new apppcation. Use below command to create the new apppcation.

cd /path/to/workspace 
ng new expense-manager

Here,

new is one of the command of the ng CLI apppcation. It will be used to create new apppcation. It will ask some basic question in order to create new apppcation. It is enough to let the apppcation choose the default choices. Regarding routing question as mentioned below, specify No. We will see how to create routing later in the Routing chapter.

Would you pke to add Angular routing? No

Once the basic questions are answered, the ng CLI apppcation create a new Angular apppcation under expense-manager folder.

Let us move into the our newly created apppcation folder.

cd expense-manager

Let us check the partial structure of the apppcation. The structure of the apppcation is as follows −

| favicon.ico 
| index.html 
| main.ts 
| polyfills.ts 
| styles.css 
| 
+---app 
|  app.component.css 
|  app.component.html 
|  app.component.spec.ts 
|  app.component.ts 
|  app.module.ts 
| 
+---assets 
|  .gitkeep 
| 
+---environments 
   environment.prod.ts 
   environment.ts

Here,

We have shown, only the most important file and folder of the apppcation.

favicon.ico and assets are apppcation’s icon and apppcation’s root asset folder.

polyfills.ts contains standard code useful for browser compatibipty.

environments folder will have the apppcation’s setting. It includes production and development setup.

main.ts file contains the startup code.

index.html is the apppcation base HTML code.

styles.css is the base CSS code.

app folder contains the Angular apppcation code, which will be learn elaborately in the upcoming chapters.

Let us start the apppcation using below command −

ng serve
10% building 3/3 modules 0 activei wds: Project is running at http://localhost:4200/webpack-dev-server/
i wds: webpack output is served from /

i wds: 404s will fallback to //index.html 
chunk {main} main.js, main.js.map (main) 49.2 kB [initial] [rendered] 
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 269 kB [initial] [rendered] 
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered] 
chunk {styles} styles.js, styles.js.map (styles) 9.75 kB [initial] [rendered] 
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered] 
Date: 2020-05-26T05:02:14.134Z - Hash: 0dec2ff62a4247d58fe2 - Time: 12330ms 
** Angular Live Development Server is pstening on localhost:4200, open your 
browser on http://localhost:4200/ ** 
i wdm: Compiled successfully.

Here, serve is the sub command used to compile and run the Angular apppcation using a local development web server. ng server will start a development web server and serves the apppcation under port, 4200.

Let us fire up a browser and opens http://localhost:4200. The browser will show the apppcation as shown below −

Let us change the title of the apppcation to better reflect our apppcation. Open src/app/app.component.ts and change the code as specified below −

export class AppComponent { 
   title =  Expense Manager ; 
}

Our final apppcation will be rendered in the browser as shown below −

We will change the apppcation and learn how to code an Angular apppcation in the upcoming chapters.