Angular (Part-2)

In the previous blog we had understood :- What is Angular,History and Versioning of Angular,Steps to Install Angular,create our first app in Angular,Error occurs while installing the Angular,Some Interview questions and App made with the use of Angular.

If You have not view my first blog about the Angular please view by visiting below link for better understanding above topics and this blog.

https://1062moadil.blogspot.com/2022/04/blog-post.html?m=1

In this blog we will try to cover a very important topic of Angular that is :flow of Angular app.

->Flow of Angular app

    --In Order to learn Angular we must need to understand the flow of     Angular app.

     Flow of Execution of the Angular App is as Follow

     Main.ts -> app.module.ts -> app.component.ts->

     app.component.html -> app.component.cs ->Index.html

· Main.ts

-> This file acts as the entry point of the application. This entry point is defined in the internals of web pack that is used by Angular to support the modular functionality.

· app.module.ts

->From the main.ts file, it is very clear that we are bootstrapping the app with AppModule. This AppModule is defined in APP.MODULE.TS file which is found in

<project_directory>/src/app/app.module.ts

-> This is the module, created with the @NgModule decorator, which has declarations of all the components we are creating within the app       module so that angular is aware of them. Here, we also have imports       array where we can import other modules and use in our app. Below     is an example of app.module.ts file.

· app.component.ts

   ->From the app.module.ts file above, we can clearly see that the module asks to bootstrap the app component.

->This app component is in app.component.ts file. This is the file which                interacts with the html of the webpage and serves it with the data.

->In app.component.ts file, the Component decorator has three important properties with values:

---selector → It has a file as the value that is responsible to utilize this component in another template file as an element.

--template URL → It has an HTML file as a value that displays the screen.

--styleUrls → it has a CSS file as a value that is used to style the component’s HTML.

· app.component.html

->This is the file which contains all the html elements and their binding which are   to be displayed when the app loads. Contents of this file are the first things to be displayed.

->As we found that app.component.html is responsible for the screen we see in our browser here is how it look like.

· app.component.css

     ->This is the file which contains all the CSS of the html elements and their binding which are to be displayed when the app loads.

· Index.html

     ->It is found in the src folder of the app. Compiler dynamically adds all the JavaScript files at the end of this file. Since all the components are now known, the html file calls the root component that is app-root. The root component is defined in app.components.ts which targets app.component.html. This is how index.html file looks like in the coding environment:

 -> The body tag, you can see that a html like element <app-root></app-root> is present. Well, this is our component selector for the App Component which is defined in app.component.ts file. It asks angular to load that component.

Many Times in the Interview question is Asked like :         "How does an Angular application work?"

The Answer should like this:-

· The working of Angular is based on its components. So the working of the Angular application starts with the configuration file ANGULAR.JSON. The builder refers to this file to find the paths, configurations and the main file. Now the process finally starts. Next comes the MAIN.TS file that acts as the entry point for the configuration file. It basically helps in creating the browser environment that enables it to run the application.

· An Angular application operates according to the principles of a client-side web framework. Upon loading the application in a web browser, the following sequence of steps takes place:

· Initialization: The Angular framework initiates the application by bootstrapping the root component, which serves as the entry point.

· Component Rendering: Angular renders components based on their predefined templates. Each component contains a template that describes the structure and layout of the user interface (UI).

· Data Binding: Angular enables data binding, which facilitates the synchronization of data between the component’s model and the view. This synchronization allows for dynamic updates in real time, ensuring that the view consistently and accurately represents the current state of the data.

· Component Interaction: Components communicate with one another through input and output properties, as well as services, facilitating the exchange of data and functionality across different parts of the application.

· Event Handling: Angular manages user interactions, such as button clicks or form submissions, by capturing and responding to events. These events trigger specific actions or updates within the application.

· Dependency Injection: Angular utilizes dependency injection to handle the application’s dependencies and promote modularity. This simplifies the integration of services and reusable code modules that provide specific functionality to components.

· Routing: Angular incorporates a router module that enables navigation within the application. Routes are defined, determining which components are displayed based on the current URL or user actions.

· Compilation and Bundling: Before deployment, an Angular application is typically compiled and bundled. This process optimizes performance by reducing file sizes and merging multiple files into a single bundle.

· Deployment: Following bundling, the application can be deployed to a web server or hosting service, making it accessible to users.

I am sure that you have now got the idea how the flow of angular app. This  blog that is based on the research I have done from various sources and there might be a possiblele that I may have missed some points and in such a case, it would be great if you can add those in the comments to give an even better understanding for everyone.

Thank You and See You in the Next Blog.