Model and features in Angular framework

Continuing the Angular series in web application development, in this part 2 we will go into the working model and features of Angular.
But first I will review the main features of the framework:
• Template: Allows users to build their components (components) that are highly encapsulated and reusable.
• Data-Binding: The feature automatically synchronizes data between the two dimensions of the model and the view when the view has some changes.
• Service: This can be a certain value, method, or feature that the application needs.
• Dependency injection: Allows users to embed services or code and put them wherever needed.
First I will go into the structure of an Angular project

o The parent folder (root) includes subfolders e2e, node_module, and src. There are also some external configuration files.
o Folder e2e: Contains files related to testing. Angular uses the protractor library to perform cross-browser automation testing.
o Folder node_modules: Where the libraries and downloaded for the angular project. It is managed by NPM, meaning we use NPM to delete and add libraries.
o Folder src: Where the source is stored when the program runs. This is where the code of the angular application is concentrated.
o Folder app: Angular CLI creates this folder as the app's parent folder. Angular CLI was created as an example for us to create other components later. In the app folder there are usually:
o app-routing.module.ts this file is used for navigation.
o app.component.css we define the CSS that the component will use.
o app.component.html where we write html files. The view layer that the user can see…
o app.component.spec.ts this file is used for testing.
o app.component.ts (component class): is the file that handles the business, it's like the Controller in Spring Web.
o app.module.ts file used to configure the app module.
o .editorconfig This file is used to configure if the code editor we use is Visual Studio. I can change the configuration here.
o .gitignore: Used to describe which files are uploaded to GitHub and which are not.
o angular.json: Used to reconfigure Angular CLI.
o browserslist: Which browser versions will be compatible with the angular project.
o karma.config.js: This file is used to run tests of functions.
o package.json: This file contains the necessary libraries for the angular project, in addition, if we add a 3rd party library, declare it here.
o tslint.js: Used to check whether the code is quality or not, is easy to read or maintain, and is standard.

How Angular Works

For Angular to render the interface and display it in the browser, we run the command " ng serve -o " (where -o is the option to open the web dev interface in a new browser window).

We can understand the working mechanism of Angular as follows:
o Angular will load the index.html file.
o Then Angular will load the main.ts file.
o In the main.ts file, Angular will load the parent module app.modules.ts.
o app.modules.ts loads the parent module component (root) aka root component. In our Angular project, we will have many components. Each component is part of the view visible to the user.
o In the component module, there will be HTML and CSS (view) files that will then display the website to the user.

The first page that Angular calls…

The index.html file is the first file that Angular will call when the application is deployed. The content of the index.html file is as follows.

As we can see there are no javascript and CSS files in index.html. The body tag contains only one tag, app-root.
When we do the ng build, Angular will compile the .ts files of 3rd party libraries and embed them in the index as follows.
This file can be found in the dist folder. When running the ng build command, Angular will create for us a folder that is dist, it compresses all the project files.
So we see that angular adds 3 javascript files to the index.html file, these files have the following effect:
o runtime.22eb52b7ae39d210.js: use webpack to deploy running angular application.
o polyfills.1abcbd05316f6609.js: cross-browser support…
o main.1a28e5c215027b7d.js: the code of your application.

main.ts

The main.ts file has the following content.

o We see import platformBrowserDynamic to tell Angular to load the Angular application using the desktop browser.
o Next we see Angular import AppModule. AppModule is the parent component of the whole Angular application. Angular organizes code in hierarchical modules. The parent module has many child modules, the child module has many child modules in it. So AppModule is the parent module of the Angular application. All Angular applications must have at least one parent module to load first we call it the root module. Then comes the component modules inside.

Root Module

Angular will first load the file AppModule. The AppModule file is described below.
o After the root module is invoked, it needs at least one component to be loaded. In this example, we will load the first component, AppComponent. In the Angular project we will have 1 parent component, in the parent component there will be many child components. Below is the uploaded AppComponent declaration.
@ NgModule in Angular is used to declare child modules and third parties that will be used in the application…
o imports: Used to embed external modules and third parties that will be shared with the Angular application.
o declarations: Where will declare parent components, children directives, or services that we use in the Angular project.
o bootstrap: Indicates which component Angular should load when the Angular Module is loaded.

Component

In @NgModule we have bootstrap : [AppComponent] tells Angular to load AppComponent. Code Component is displayed as follows:
o Create a component consisting of 3 files. 1 is the Class Component file, 2 is the HTML file to display the view, and 3 is the CSS file.
o Class Component is marked with @Component which has 3 properties selector, templateURL, and styleUrls.
In there:
o selector is used to indicate which DOM element this component uses. We see the selector named app-root. In any case, if we embed tag in the template is compiled using AppRootComponent and gets any attached features.
So this tag will contain the HTML interface of the App Component. In normal HTML, this tag is not defined by ourselves.
o templateUrl: in the component, we have specified ‘./app.component.html’ which means will load the template from the app.component.html file in the same directory as the component.
o styleUrls: Similar to templateUrl, we also specify [‘./app.component.css], this means we will use CSS in the app.component.css file for this component.
When we run ng -server -o we will see the HTML interface defined in the template URL as the file app.component.html

Now I will go through the basic features of Angular

- Template

• When views in HTML become complex or are reused in Angular, then templates will solve the problem. Views are usually hierarchical, allowing you to modify or show and hide entire sections of the interface.
• The view hierarchy can include views from components in the same NgModule, but can also include views from components defined in other NgModules.
Templates are the same as regular HTML, except for containing the Angular template syntax, which changes the HTML based on your application's logic and the state of the application, and the DOM's data.
Example of a template:
The template above uses typical HTML elements like div, h3, and p, and also includes Angular template syntax elements like *ngFor, data.name, data.age, (click), [personInfo], . Template syntax elements tell Angular how to render HTML to the screen using the program's data and logic.

- Data binding

Databinding is a technique where data is synchronized between the component and the view layer (template HTML file). For example, when the user updates the data in the view layer, Angular also updates that value in the component.
Angular supports two-way data binding, a mechanism for coordinating parts of a framework with parts of a component.

+ One-way binding

o One-way binding is understood as data being transmitted one way. Can be from view to component or vice versa from component to view.
o From component to view we use Property Binding to display data as follows:
o We use it to display value from component to view.
For example, we have a component
So the data in this component we display in the View as follows:
o On the contrary, if the view passes data to the component, we use Property binding as follows [disabled]=”isDisabled”

o Event Binding we use to bind events like a mouse click, keyboard eve,nt, etc. To use it, we use the following syntax to perform an event when the mouse clicks on the Save button. It will then call the showStatus function inside the component class.

+Two-way binding

Two-way binding allows application components to share data by listening for events and updating values simultaneously between parent and child components.
Angular's Two-way binding syntax is a combination of square brackets and parentheses [()], and the combined syntax of property binding [] and event binding() is shown below.

- Service

Angular Services are pieces of code that we can use over and over from different components. These pieces of code will perform a specific task for a certain intent.

We can use services for the following purposes:
o Call the data transfer API from the backend or the outside.
o Share logic code or data so that components can share.
Service advantages:
o Easily access methods and properties on other components throughout the project.
o Easily debugs when there is a problem.
o Can be reused in multiple modules.
Example of an AppLogService service that logs to the browser console:

- Dependency Injection

Dependency Injection (DI) is built-in and is an important part of the core of Angular. Using the Dependency Injection mechanism helps us embed the service into different components or services to access that service class.
Angular creates a new instance of a component class, which determines the service or other dependencies the components need by looking at the constructor parameters.
When Angular detects that a component depends on a specified service, it first checks if the injector has any existing instances of that service.
For example, the process of injecting the AppLogService service in the component's constructor method is below:

If an instance of the requested service does not yet exist, the injector creates an instance using the registered provider and adds it to the injector before returning the instance of the service.
Once all the requested services have been initialized and returned, Angular can call the component's constructor with the instances of those services as arguments.
Example using AppLogService in AppDataPersonComponent:
Above we have the getLog() method that calls the AppLogService service through the Injector specified as logService.
In short, Dependency Injection is used a lot in Angular projects through which we can call the service or code specified earlier.
So that concludes the second part of my series about the Angular framework. Thank you for reading and see you in my next post.

By,
VNPT Cyber Immunity - VCI