How Angular know which module is the startup module?
In this article, we will learn about How Angular 9 knows which module is the startup module and which is not? Also, we will understand Which conventions Angular team Uses by Sagar Jaybhay.
Which One is the startup Module?
This is mentioned in the main.ts file and below is coed for this file.
import enableProdMode from '@angular/core';
import platformBrowserDynamic from '@angular/platform-browser-dynamic';
import AppModule from './app/app.module';
import environment from './environments/environment';
if (environment.production)
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
platformBrowserDynamic is used to a bootstrap module. This used to set the first module. But another question is .....
How main.ts file is invoked in an angular application?
The main.ts file is invoked by index.html file. But if you see the index.html file code we didn’t find any kind of script invocation code because these all things are done in bundling and minification and when you see dist folder you can see some js files.
Before bundling index.html code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Customerapplication</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
After bundling index.html file in the dist folder. This bundling is done by a webpack.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Customerapplication</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="runtime-es2015.js" type="module"></script>
<script src="runtime-es5.js" nomodule defer></script>
<script src="polyfills-es5.js" nomodule defer></script>
<script src="polyfills-es2015.js" type="module"></script>
<script src="styles-es2015.js" type="module"></script>
<script src="styles-es5.js" nomodule defer></script>
<script src="vendor-es2015.js" type="module"></script>
<script src="vendor-es5.js" nomodule defer></script>
<script src="main-es2015.js" type="module"></script>
<script src="main-es5.js" nomodule defer></script></body>
</html>
In the above code, you will see the script files which angular refer.
- Runtime.js:- this file contains code for webpack runtime.
- Polyfill.js:- used to new code run in old browser
- Vendor.js:- this is actually our code or custom coded files where our component, module, and models have resided.
- Main.js:- this is the point where the first module in our program is called.
- Style.css:- it contains all CSS code
Naming Convention Used By Angular Team
Whatever the angular team followed for file naming convention by angular is Angular Style Guide. For more information about this, you can visit this link https://angular.io/guide/styleguide
In the above image, the app is the root of the application. Names are given us
- root_folder_name.component.ts
- root_folder_name.component.css
- root_folder_name.module.ts
- root_folder_name.component.html
In angular team thinking app comprises of Html, CSS, model. This is given by the angular team style guide. But if you want to use your thought process, company guidelines in which you worked you can use.
Now onwards we create customer applications in that we create customer models and whatever the name in the app we renamed it, the customer.
Below is our customer model
export class Customer
CustomerName:"";
CustomerID:number;
CustomerAmount:number;
To bind these properties with the component we need to use directives which are used for binding or data flow means from view to component or from component to view. This data flow is in one way or two way. It also used to manipulate the dom elements. We learn this in the upcoming post.
GitHub Project Link: https://github.com/Sagar-Jaybhay/angular9
Comments
Post a Comment