Angular - A Quick Intro

1- Following this: https://angular.io/start

Image Source: angular.io

Quick Intro:

• Angular great for SPAs — when only parts of the view gets refreshed asynchronously without reloading the whole page
• Follows:
• Modular-based approach,
• Re-usable code,
• Validation & routing provided (quicker development time)
• Unit testable
• Built by Google & Microsoft
• Modules & Components make up the bulk of an Angular application

How Templates work:

• Angular’s template syntax extends HTML and JavaScript
• Ex: template file: product-list.component.html
• Directives — We can use the *ngFor directive to have each product in the list to be displayed the same way, one after the other on the page.
• *ngFor causes the <div> to be repeated for each product in the list.
• *ngFor is a "structural directive".
• Structural directives shape or reshape the DOM’s structure, typically by adding, removing, and manipulating the elements to which they are attached.
• Any directive with an * is a structural directive.
• To display the names of the products, use the interpolation syntax {{ }}.
• Interpolation renders a property’s value as text.
• Interpolation {{ }} lets you render the property value as text; property binding [ ]lets you use the property value in a template expression.
• Event binding is done by using ( ) around the event.
• Angular’s template syntax:
• *ngFor
• *ngIf
• Interpolation {{ }}
• Event binding ( )
• Property binding [ ]

How Components work:

• Components define areas of responsibility in your UI that let you reuse these sets of UI functionality.
• Usually the Root Component is defined as AppComponent
• Each Module is made up of Components and Services
• Usually the Root Module is defined as AppModule
• A Module has:
• Declarations,
• Imports,
• Providers (for services)
• Bootstrap (for components)
• A Component is comprised of three things:
• 1- A component class, which handles data and functionality. Ex: the product data and the share() method were defined in the component class. Written using TypeScript
• 2- An HTML template, which determines what view(s) is presented to the user. In the previous section, we modified the product list's HTML template to display the name, description, and a "Share" button for each product.
• 3-Metadata — information using decorators (which is unique to TypeScript)
• Component-specific styles define the look and feel. The product list does not define any styles.
• An Angular application is composed of a tree of components, in which each Angular component has a specific purpose and responsibility.
• The @Component indicates that the following class is a component. It provides metadata about the component, such as:
• templates,
• styles,
• and selector
• The @Input decorator indicates that the property value will be passed in from the component's parent (in this case, the product list component).

How Services work:

• These comprise of business logic and take up a hierarchical structure
• Heavy use of dependency injection
• Use injectable decorators
• Return Observables
• Which are basically HTTP calls — can be single item
• Or a sequence of items that arrive asynchronously over time
• Example: An EmployeeService is an Injector into EmployeeList and EmployeeDetail

How the File Structure looks for an Angular app:

• package,json - contains the dev dependencies, modules, loading scripts.
• src/ folder - * main.ts - entry point into the app * app/ directory - contains the app.module.ts which is the root module of any Angular app * also contains the app.component.ts which is the root component of any Angular app
• The ng serve executes the main.ts class

Architecture Summary:

• Angular app => made up of 1+ Module
• Module => made up of 1+ Component & Service
• Component => made up of HTML Template & Component class
• Represent different portions of the view in the app
• Service => made up of business logic
• Modules interact & ultimately render the view in the browser

Originally published at https://tech.wahab2.com on July 14, 2019.