DEV Community: VCIDevTeam

Mastering the Windows Registry: The mysterious world behind the system

VCIDevTeam — Mon, 26 Jun 2023 04:16:36 +0000

Windows Registry is an important database on the Windows operating system, which stores configuration and customization information of the system and the applications on it. It plays an important role in maintaining system stability and performance. On each version of Windows, the Registry always plays an important part in managing and adjusting the system's components. In this article, we are going to explore in more depth the Windows Registry, how it works, and how to take advantage of it effectively.

1. What is the Windows Registry?

The Windows Registry is a hierarchical database used to store configuration information for the Windows system and the applications on it. It contains keys and values organized into a hierarchical tree structure, helping users and the operating system to access and change important information.
In addition, the Registry also supports a multi-profile structure that stores user settings, each user will have a different profile specific to their account, for example, user A installs Unikey to start with Windows, and other use B, do not install that program, Registry will record these and save each user's folder.

2. Structure of the Windows Registry

The Windows Registry is organized into many hives and subkeys within them. The most important entries in the Registry include:

HKEY_CLASSES_ROOT (HKCR): contains information about file types and their respective utilities
HKEY_CURRENT_USER: stores configuration information for the currently logged-in user
HKEY_LOCAL_MACHINE: contains configuration information for specific computers
HKEY_USERS: store configuration information for all users on the system
HKEY_CURRENT_CONFIG: contains information about the current hardware configuration

Each entry in the Registry contains keys. Keys are directories in the Registry tree and can contain subkeys and values. The key is usually named after the path, e.g. HKEY_LOCAL_MACHINE\Software\Microsoft\Windows
Each key in the Registry can contain one or more values. Values are specific information stored in the key and are used to store configurations and customizations. Values can be of different data types such as string, integer, boolean (true/false), binary, and many other data types.
For example:

HKCU\Software\Microsoft\Windows\CurrentVersion\Run contains a series of values that are executable files that are started automatically when the user logs on. The root key is HKCU (HKEY_CURRENT_USER), which stores the Subkeys: SOFTWARE, Microsoft, Windows, CurrentVersion, and Run. And the Run key contains the Values. With each root key in particular and keys in general, only certain software will be able to access it for security reasons. Therefore, each user, software, and service will only see the keys that they are allowed to see.

The structure of the Windows Registry allows applications and systems to access and store configuration and customization information in an organized and efficient manner, understanding this structure helps users and developers understand and interact with the Registry correctly and securely.

3. How Windows Registry Works

When the Windows system boots, the Registry is loaded into memory. When applications are active, they will access and change the Registry to get system configuration information or store new information. Here are the basic operations of the Registry:

Configuration storage

When the Windows system is up and running, it reads and writes configuration information to the Registry. This includes system configurations such as network settings, graphics configurations, audio configurations, and more. Each application can also store its configurations in the Registry.

Access and modify the Registry

Windows applications and systems can access the Registry through APIs provided by the operating system. This API allows applications to read, write, edit, and delete keys and values in the Registry. Applications can access and update the Registry to get configuration information, customize behavior, or change settings.

Backup and restore

Windows provides a Registry Editor (regedit) tool to access and manage the Registry. It allows users to backup and restore the Registry, to ensure the stability and safety of the system. It is very important to back up the Registry before making changes so it can be restored to the previous state if necessary.

Interaction with applications and systems

Information in the Registry is used by applications and systems to obtain configurations and custom settings. When an application or system needs to access a value in the Registry, it can query the corresponding key and value to get the necessary information.

4. Using Windows Registry

Windows Registry plays an important role in customizing and tuning the Windows system. Users can access the Registry through the Registry Editor, a built-in tool in the Windows system that allows them to change configuration parameters, disable or enable features, and customize the behavior of the system and applications. In addition, you can use third-party tools to manage and optimize the Registry, to increase system performance.

5. Optimize and Repair Windows Registry

Windows Registry can become large and complex after a period of use, which can affect the performance of the system. To keep the Registry working optimally, there are several possible optimization and repair methods:

Remove redundant keys and values: during the use of the system, there may be keys and values that are no longer needed. Deleting them will reduce the size of the Registry and improve system performance. However, be careful and only delete keys and values that you understand well and don't need.
Use Registry optimization tools: Many Registry optimization tools are available to help you automatically find and delete redundant keys and values, repair errors, and optimize the structure of the Registry. These tools can save you time and ensure system stability.
Backup and restore the Registry: before making any changes to the Registry, it is advisable to make a backup copy of it to ensure that you can restore it to its previous state if necessary. Windows provides a Registry Editor tool for backing up and restoring the Registry.
Repair Registry errors: if the system encounters Registry-related errors, the System File Checker (SFC) tool can be used to check and repair corrupted system files. SFC also can check and repair Registry errors

6. Some tricks with the Registry

Turn off the lock screen

The lock screen is an added layer of security on a Windows PC that requires a password or PIN for you to sign in again. If you feel safe, then you can turn off the lock screen completely.
Open the Registry Editor, go to the HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows folder, right-click Windows in the left panel, select New > Key, and name the new Personalization. Select Personalization, then in the right panel, right-click a space and select New > DWORD (32-bit) Value, name the value NoLockScreen, change Value data to 1, and select OK

Turn off “shake” to minimize windows

Aero Shake is a feature introduced in Windows 7, that allows you to minimize windows by holding the window you want to open and shaking it. To remove it, open Registry Editor and navigate to Computer\HKEY_CURRENT_USER\Software\Microsoft\Windows\Current\Version\Explorer\Advanced
Here, right-click on the right panel, select New > DWORD (32-bit), name it DisallowShaking, change the value to 1, and click OK

Add your apps to the context menu

The context menu is interesting, but controlling it requires creating registry keys to add specific applications to it. Here we will take Notepad as an example:

B1: Open regedit, navigate to Computer\HKEY_CLASSES_ROOT\Directory\Background\shell
B2: in the shell folder, right-click and create a new key named Notepad, which creates a key named command. In the key command folder, right-click the Default string, then in the Value box, type notepad.exe.

Increase network speed

Many of the Registry tweaks on the list will involve design or aesthetic changes that can make Windows smoother and better. But there are also a bunch of registry tricks designed to improve Internet speed. Here are some ways to use the registry to improve Internet speed:

C1: IRPStackSize: navigate to HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\LanmanServer\Parameters, add IRPStackSize as DWORD value on the right side of the regedit window, and modify the value to 32
C2: MaxFreeTcbs: navigate to HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Tcpip\Parameters, create or edit MaxFreeTcbs and set its value to 65536. If you are using an old computer with low-performance hardware, you can set this to a lower number such as 16000.

7. References

To learn more about the Windows Registry and how to work with it, here are some helpful resources:

Microsoft Registry for advanced users: https://learn.microsoft.com/en-us/troubleshoot/windows-server/performance/windows-registry-advanced-users
Auslogics Registry Cleaner (free registry cleaner): https://www.auslogics.com/en/software/registry-cleaner/
How to backup and restore the registry in Windows: https://support.microsoft.com/en-us/topic/how-to-back-up-and-restore-the-registry-in-windows-855140ad- e318-2a13-2829-d428a2ab0692

8. Summary

The Windows Registry is an important component in the Windows system, helping to store system and application configuration and customization information. Understanding and working effectively with the registry can help enhance system performance and stability. However, precautions should be taken and careful editing should be carried out. If you don't have much experience with the registry, get expert help or use reliable registry optimization tools.

By,
VNPT Cyber Immunity - VCI

The changes of ISO/IEC 27001:2022

VCIDevTeam — Fri, 28 Apr 2023 10:03:33 +0000

The global digital landscape is changing. New business practices and Industry 4.0 have become ubiquitous, and core business practices are increasingly cloud-based and digitally dependent.
In response, the ISO/IEC 27001 Information Security Management standard and the ISO/IEC 27002 controls for Information Security standards are being updated to reflect this development.

1. The change in the Title

After updating, in the ISO/IEC 27001:2022 version, the new title of the standard is "Information security, cybersecurity and privacy protection – Information security management systems – Requirements".

2. The change in the Clauses

The clause structure of ISO/IEC 27001:2022 remains the same as in the 2013 version, but some changes have been made to align it with other ISO management standards:
• Clause 4.2: Understanding the needs and expectations of interested parties
A new subclause has been added to require the analysis of which interested party requests will be addressed by the ISMS.

• Clause 5.3: Organizational roles, responsibilities and authorities
A minor language update has been made to clarify the scope of communication regarding information security-related roles within the organization.

• Clause 6.2: Information security objectives and planning to achieve them
This clause now requires that objectives be regularly monitored and formally recorded.

• Clause 6.3: Planning of changes
This new clause establishes a standard for planning changes to the ISMS. It states that if changes are necessary to the ISMS, they must be carried out in a planned.

• Clause 7.4: Communication
Sub-clauses a-c remain the same. But the sub-clauses d (who shall communicate) and e (the processes by which communication shall be affected) have been simplified and combined into a new clause renamed d (how to communicate).

• Clause 8.1: Operational planning and control
Additional instructions have been added for operational planning and control. ISMS now needs to establish criteria for the actions identified in Clause 6 and control such actions against the criteria.

• Clause 9.2: Internal audit
This clause has been reorganized, but not significantly. Basically, it just separates sub-clauses a and b to create Clause 9.2.1, and the remaining sub-clauses to create Clause 9.2.2.

• Clause 9.3: Management review
A new sub-clause has been added to clarify that the organization's management review will include consideration of any changes to the needs and expectations of interested parties.

• Clause 10: Improvement
This provision has been restructured to list Continuous improvement (10.1) first, followed by Nonconformities and corrective action (10.2).

3. The change in the Annex A

The title of this Annex has been changed from "Reference control objectives and controls" to "Information security controls reference", and the standard now uses the term "Purpose" instead of "Objective".
• Changing the structure of Controls
In the new ISO/IEC 27001:2022, this has been reduced from 14 groups to only 4 themes.
o Organizational controls: 37 controls.
o People controls: 8 controls.
o Physical controls: 14 controls.
o Technological controls: 34 controls.
• The creation of Attributes
New to this version is the introduction of attributes, denoted by the hashtag symbol (#). These properties can be used to group similar controls. Each organization can create its attributes to meet its needs since these attributes are optional.
o Control Type: Preventive, Detective, Corrective.
o InfoSec Properties: Confidentiality, Integrity, Availability.
o Cybersecurity Concepts: Identify, Protect, Detect, Respond, Recover.
o Operational Capabilities: Governance, Asset management, Information protection, Human resource security, Physical security, System and network security, Application security, Secure configuration, Identity and access management, Threat and vulnerability management, Continuity, Supplier relationships security, Legal and compliance, Information security event management, Information security assurance.
o Security Domains: Governance and Ecosystem, Protection, Defence, Resilience.
• New controls
Having 11 new controls added to Annex A, the number of newly added controls in each group of controls is detailed below: 5.7, 5.23, 5.30, 7.4, 8.9, 8.10, 8.11, 8.12, 8.16, 8.23, 8.28.
• Merged controls
The latest version, ISO 27001:2022, has merged multiple controls with similar content. Specifically, 56 controls from ISO 27001:2013 have been merged into 24 new controls. As a result, control A.18.2.3 in ISO 27001:2013 now applies to two controls in ISO 27001:2022: 5.36 and 8.8.
• Updated controls
There are 58 control measures that have been updated to be more appropriate and linked together, of which: 24 controls have been renamed and the remaining 34 controls remain the same name, only changed. their numbers and their order.

CONCLUSION

ISO/IEC 27001: 2022 has been revised and updated to better suit the current information security situation, specifically:

There are a number of editorial changes, including:
o “International Standard” is replaced throughout by “document”.
o Rearrange some English phrases to facilitate the standard translation process.
Terms 4 to 10 have some minor changes.
The major changes in the revision are contained in Annex A, reflecting the changes expressed in ISO/IEC 27002:2022. These changes are:
o Structure has been consolidated into 4 main areas: Organization, People, Physics and Technology instead of the 14 groups in the previous edition.
o Controls listed have been reduced from 114 to 93: No controls have been removed. Some controls have been consolidated, some have been removed, new controls have been introduced, and others have been updated.
o New concept of attributes introduced: In line with common terminology used in digital security, these 5 attributes are: Control Type, InfoSec Properties, Cybersecurity Concepts, Operational Capabilities, and Security Domains.
Correspondence of controls in ISO/IEC 27001:2022 with ISO/IEC 27002:2013

By,
VNPT Cyber Immunity - VCI

Lifecycle Hooks in Angular

VCIDevTeam — Tue, 28 Mar 2023 03:02:13 +0000

Continuing the series of Angular in web application development, in this part 3 we will dive into another special feature in Angular: lifecycle hooks.

What are Lifecycle Hooks?

Lifecycle hooks allow us to connect and run code at a specific lifecycle event of a component or directive.

Angular is in charge of all the components of directives that it creates, updates, or deletes for us. So with the use of the lifecycle hooks, we can gain better control of our application.

For that, we use some "hooks" methods with a prefixed of ng to our component or directive. And these "hooks" are split into two different kinds: hooks for components or directives and hooks for child components.

The lifecycle

The following are the hooks for components or directives in the usual order:

Constructor
OnChanges
OnInit
DoCheck
OnDestroy And these are the hooks for the component's children:
AfterContentInit
AfterContentChecked
AfterViewInit
AfterViewChecked

So now, we will create a simple example with an input and a button.

Firstly, create an HTML interface in the app.component!

And similarly the OnSubmit handler function in app.component.ts

Then we instantiate a demo component, this is where we will demo the main lifecycle hooks.
The html file in the demo component.

The .ts file with the import of the lifecycle hooks we will be using.

Call it in the HTML file of the app.component like this.

And we have a simple interface.

We can see in the console log that the Constructor has been called so we will start with what is the Constructor.

Constructor

Constructor is the class's default method when it is first created. Instead of using it to handle the logic in this function, it should be used to define Dependency Injection.

NgOnchange

Next, we'll edit demo.compont.ts using Onchange.

After changing @Input bound class components, ngOnChanges is called. The @Input() decorator binds data from an external source. The @Input property is passed once more when the external source modifies the data in a recognizable way.

The moment we alter the input, ngOnChanges will launch. It also happens when the input data is initialized. SimpleChanges is the sort of optional argument that the hook accepts. Information regarding the modified input limit properties is contained in this value.

ngOnInit

Let's return to the.ts file and proceed using ngOnInit in that sequence!

Initializing the component's input bound property (@Input) causes ngOnInit to trigger once. In this illustration, when the demo receives input, the hook does not activate. It activates instead as soon as the data renders the application.

As we can see, when we initialize in the constructor for the demo, the value has the value "demo," but when we update OnInIt, the value has changed to " " in the app.component.
The hook ngOnInit is one-and-done. Its primary concern is initialization.

ngDoCheck

Every change detection cycle causes ngDoCheck to trigger. Recognize regular changes. Every time change detection is run, do any action; it will catch DOM events (click, hover), setTimeout, setInterval, or XHR requests. Every time Angular detects a change, ngDoCheck is called, so we must use it carefully because, if implemented improperly, it can lead to performance issues.

Every additional change loop that ngDoCheck executes after Angular has finished running and before we change the data is equivalent.

Next are the hooks for the child components

We will add an h1 tag with the inputText data binding.

ngAfterContentInit

Once the component's content DOM initializes, ngAfterContentInit triggers (first load).

Begin using AppComponent. DemoComponent must be rendered for AppComponent to be finished. The ng-content>/ng-content> element of DemoComponent projects the content contained within its element. The rendered content completes rendering, and ngAfterContentInit fires. Subsequently, DemoComponent completes rendering, followed by AppComponent, and ngAfterContentInit does not fire once more.

ngAfterContentChecked

DOM targeting change detection cycles are followed by the ngAfterContentChecked event. Developers may now simplify the way the DOM reacts to change detection. Performance problems might result from ngafterContentChecked firing repeatedly.

Additionally, ngafterContentChecked is called when a component is first started. It occurs immediately following ngafterContentInit. Via change detection, ngafterContentChecked can be re-enabled.

ngAfterViewInit

Once the DOM view has finished initializing, ngAfterViewInit begins. View begins to load immediately after content. ngAfterViewInit is frequently used to run a view query with a reference to viewChild or viewChilden.

Render in the aforementioned example begins with AppComponent. The DemoComponent must be rendered for the AppComponent to be finished. The ng-content>/ng-content> element of DemoComponent projects the material contained within its element. When the rendered content and DemoComponent have completed rendering, ngAfterViewInit fires, and after AppComponent has finished rendering, ngAfterViewInit will not fire once again.

ngAfterViewChecked

During each change detection cycle to the component's View, ngAfterViewChecked is triggered. Developers may participate in the process of helping to identify changes impacting the DOM view by using the ngAfterViewChecked function.

The manner ngAfterViewChecked will be executed again varies with each cycle.

ngOnDestroy

ngOnDestroy terminates the lifecycle hooks. But first, we must use a button in the html to add the Destroy function to the app.compont. Because only when a component or directive is destroyed will OnDestroy be invoked.
app.component.html file

app.component.ts file

And finally demo.component.ts file

We will have an interface like this

We could see that OnDestroy hasn't been called yet but after clicking the Destroy button.

DemoComponent passes false. The evaluation of the *ngIf structural directive is false. ngOnDestroy executes, and ngIf deletes its p> and /p>. Any number of button clicks will cause destruction to be set to false in this process.

Order of execution of lifecycle hooks when components are nested

When components are related to one another as parents and children, each component runs its own lifecycle hooks. Whichever is called first, related lifecycle hooks in that component are executed first. Nevertheless, there is a preset executor for each hook, such as:

The parent component starts running before the child component when using ngOnit and ngDoCheck.
When using ngDestroy, the son runs first and then the parent component destroys all of the child components.
The child components run first and then the parent component when using ngAfterViewInit and ngAfterViewChecked

The intriguing series' third and final installment on lifespan hooks is now complete. We appreciate your time and will see you in the next section.

By,
VNPT Cyber Immunity - VCI

Model and features in Angular framework

VCIDevTeam — Tue, 21 Feb 2023 09:31:15 +0000

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

Angular in app development

VCIDevTeam — Thu, 19 Jan 2023 01:50:10 +0000

Why Angular? It's not a framework every programmer knows. Yes, Angular is one of the frameworks everyone knows, so it is one of the frameworks that every programmer must understand and grasp, especially novice programmers. So I write this article for those new to the profession or who have just switched to front-end programming. In the first article, I want to introduce the framework, history, advantages, and when and often used for Angular. So let's get started!

So what is Angular?

Angular is an open-source framework. It is a JavaScript-based TypeScript development framework that eliminates unnecessary features and code to ensure lighter and faster applications.
Website designers can use HTML as a modeling language and extend the HTML syntax to convey application components. Furthermore, by using Angular, you also won't need to rely on third-party libraries to build dynamic applications.

Besides, Angular also allows you to create interactive single-page applications (SPA - Single Page Application) through attractive features like:
• Create templates (templates),
• Two-way binding,
• modularity,
• RESTful API (RESTful API access) handling and AJAX handling,
• dependency injection

Angular development history

Google developed angular back in 2009. They aim to create a free and open-source framework that the community can use. First, it was called Angular 1 and then changed to AngularJS. Later versions were changed from Angular 2,3,4,5 to the current Angular 14. With each upgrade, Angular will be better fixed and improved to meet problem-solving needs. The complexity of modern platforms.

I can mention some outstanding features as Angular can create client site applications based on the Model-View-controller (MVC) framework, providing two-way data flow in the Document Object Model and having high compatibility

Since its inception, Angular has gained many users and supporters. In fact, according to Stack Overflow's 2021 developer survey, it's currently the third most popular web framework among professional developers.

Why choose Angular over another Framework?

Understanding what Angular is not enough for you to choose for your next projects, let's find out the reasons why famous businesses or corporations choose to use Angular.

Developed by Google

The first outstanding advantage of Angular is that Google supported and developed it. This worldwide most used search engine site provides Long-Term Support (LTS) for Angular to further expand the Angular environment.

Google applications all use Angular also they are considered stable. Angular users will have the opportunity to learn from Google's certified Angular experts.

User interface

Angular uses HTML to define the user interface of the application. Compared to JavaScript, HTML is a less complex language. It is also a declarative and visual language with directives like ng-app, ng-model, ng-repeat, and form controls.

With the help of Angular, you don't need to invest time in program flows and decide what content to load first. Angular will handle what you ask. The front end has very HTML-friendly code by easily binds data to this platform.

Angular is a front-end platform that not only allows the development of modern applications but also allows the creation of high-end animations to enhance the user experience. Angular's API is so intuitive that developers can create complex videos and animations with low code.

Plus, with smart unit testing frameworks like Jasmine and Karma, you can fix your broken code at any time. Angular has more than 11 built-in testing modules to ensure error-free code.

PWA and SPA – High Speed and Ultimate Performance

Angular Progressive Web Apps (PWA) is a cost-effective solution that allows websites to behave like mobile apps. PWA will reduce dependency on the network, greatly improving the user experience on the website.

Caching in a PWA is efficient and saves bandwidth whenever possible. This reduces the risk of serving outdated content. Furthermore, since it is a website, it can be optimized for SEO.
It also helps to load the first page quickly and improves website performance on mobile devices, because AngularJS can easily run on any device, including mobile.

To summarize, the strengths of angular include:

Code is clearer

Angular uses the TypeScript programming language, which is a superset of JavaScript. It compiles JavaScript but also eases the process of finding and eliminating common problems while coding.
This approach helps developers write cleaner and error-free code and ensures code quality, something that is helpful when investing in enterprise application development.

Higher performance

Angular has hierarchical dependency injection, which is much better than AngularJS, where classes are not dependent on each other. It's quite oriented towards external sources, giving more performance to Angular mobile apps.

Better error handling

The latest version of Angular, Angular 14, also provides features such as improved error handling for @Output in situations where a property is not initialized.

Seamless updates using Angular CLI

Angular CLI (Command-Line Interface) is easy to install and use, is newbie-friendly, offers innovative testing tools and simpler commands, and is supported by different engineers and platforms, making it easy to use. Can update even components with third-party dependencies.

Material Design-like Interface

Angular provides pre-built material design via navigation elements, Orm controls, pop-ups, layouts, and data tables. This helps mobile app developers overcome the impact of Google Material Design on mobile app design and design a digital product that users need in the long run.

Shorter development time

Angular allows developers to create web applications faster and more efficiently. This is due to the technical benefits that this framework offers, such as comprehensive documentation, the help and support of Google, and a large developer community.

Safety

Angular is a popular and trusted platform because it has the backing of a large corporation like Google. Thanks to the community support – and because it is well maintained – Angular is considered by developers to be a reliable and trustworthy platform.

Easy testing

Automated testing for each component of the entire Angular web application is very simple because it is divided into several parts. You also don't have to remember the order in which you should test. All you have to do is follow the “one-file-one-module” theory. The structure of the framework is divided into modules, and components, making your application ideal for unit testing. Each code unit is independently tested throughout Angular application development, giving you detailed quality control.

Cross-platform development

Angular is a cross-platform framework. Angular Progressive Web Application (PWA) solutions can run on multiple platforms and it widely used this framework in mobile applications. Because they can emulate native applications, more and more businesses are looking to develop cross-platform solutions with Angular.

Front-end developers have previously used a combination of Ionic and Angular for cross-platform development. But currently, the most popular mix is Angular + NativeScript.

Cost-effective

Angular development is cost-effective for several reasons. First, it allows developers to use a single codebase to create a website with multiple versions. Second, they can use a variety of features and functions to create high-quality websites as quickly as possible. Finally, as mentioned above, you can also comfortably test Angular features, which reduces the risk of bugs at the next stage of development (and saves you a lot of time). As a result, developers can avoid testing all modules to detect and resolve any underlying issues. Bug-free apps leave users less frustrated.

Entrepreneurs who choose Angular often do so because they desire a powerful, cost-effective user interface that allows them to win large audiences and generate money. That's because the framework provides everything entrepreneurs need.

What is Angular usually utilized?

Angular Progressive Web Applications (PWAs)

Imagine that your user is in an area with no network and wants to find a nearby supply store. Your application may not help them; even if it has all the necessary functions to help locate the store, it may not work if the user is offline. Every time the network goes down at any time during the life of the application, it will stop working.

Every time your user is disconnected, it can take a few minutes or longer for the initial site to load and set up.

One of the reasons why to create Progressive Web Applications was to avoid these network interruptions. PWA uses current browser technologies to provide a pleasant user experience, even if you enter an area without cellular transmission or an internet connection. PWAs use service workers to act as proxies that intercept network requests then they cache the response.

We can download PWAs on the client system. Thus, users can use the app even when their device is offline.

Single-Page Applications (SPAs)

SPA is a suitable solution for website development. Users interact with the software application on a single page, which dynamically updates as they use it. SPAs are so well-known because they provide a better user experience (UX) compared with more traditional multi-page apps.

Angular's routing and data management make it easier to create SPAs while delivering staggering performance.

Interfaces with Beautiful Animations

Incredible User Interface (UI) animations are becoming increasingly popular as a source of competitive advantage for web applications. If leveraged appropriately, you can make your app stand out and make a strong brand statement.

With Angular, you can create an attractive and intuitive interface that delivers a great user experience. That will help retain users because great UI and UX will drive users to want to return to your app. Given that Angular provides an easy-to-use module for user interactions, coding apps will also be fun for your development team.

Enterprise Web Applications

No matter how large your project is, Angular will handle your application design now and as it scales. Businesses worldwide expect a durable enterprise web application with cutting-edge code that adheres to established standards.

The development of these applications must be highly optimized, business-oriented, and easy to understand, to support and accelerate the company's growth.

The benefits of using Angular for web development for enterprise applications are numerous, and the ability to achieve goals increased when translated into TypeScript. In addition, it has the aforementioned characteristics:
• Simple and easy maintenance
• Autocomplete
• Progressive restructuring
• Fine-tune navigation
• Code Reusability
With all the information you have now, to guarantee that Angular is the right solution for you, let's put it together.

In short, when should we use Angular?

Many companies are building digital products and services, but not all of them know when to use Angular. Considering your project's needs and desired user experience, you can resolve to use Angular.
If you are looking for a framework:
• Safe and reliable because of the supportive community and a major technology company (Google).
• Allows easy testing.
• Provides a vast library of verified third-party components.
• Has high scalability potential due to the ease of adding new features.
• Reduces development time as it is a cross-platform tool that allows you to code for many different platforms and provides simple, automated testing.
• Moderately priced while giving the app a familiar feel.
Deciding on an Angular project is a great choice.

Come full is the end of his first post. In the next part, we will go into the functionality and working models of Angular. Thank you for reading!

By,
VNPT Cyber Immunity - VCI