Let us create a simple angular application and analyze 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 the below command −
ng –version
Here,
ng is the CLI application used to create, manage and run Angular Applications. It is written in JavaScript and runs in the 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 the below command to create the new application.
cd /path/to/workspace
ng new expense-manager
Here,
new is one of the commands of the ng CLI application. It will be used to create new applications. It will ask some basic questions in order to create a new application. It is enough to let the application choose the default choices. Regarding the 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 creates a new Angular application under the expense-manager folder.
Let us move into 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 subcommand 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 −
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 −
We will change the application and learn how to code an Angular application in the upcoming chapters.
