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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abdul Wahab

Abdul Wahab

1.7K Followers

Multi-disciplinary Software Engineer specialized in building products users love. Today, I manage & secure big data in the cloud. All views shared are my own.