Angular 8 - Creating First Application

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

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 application used to create, manage and run Angular Application. 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 application to check our day to day expenses. Let us give ExpenseManageras our choice for our new application. Use below command to create the new application.

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

Here,

new is one of the command of the ng CLI application. It will be used to create new application. It will ask some basic question in order to create new application. It is enough to let the application 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 like to add Angular routing? No

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

Let us move into the our newly created application folder.

cd expense-manager

Let us check the partial structure of the application. The structure of the application 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 application.

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

  • polyfills.ts contains standard code useful for browser compatibility.

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

  • main.ts file contains the startup code.

  • index.html is the application base HTML code.

  • styles.css is the base CSS code.

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

Let us start the application 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 listening 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 application using a local development web server. ng server will start a development web server and serves the application under port, 4200.

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

Browser Application

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

export class AppComponent { 
   title = 'Expense Manager'; 
}

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

Browser Application

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

Advertisements