Angular Training

Presentation of Angular

What is Angular ?

Angular is more than just a frontend framework with which to build Single Page Applications (SPA). It is a full-fledged development platform built on TypeScript that comprises:

  • A component-based framework for building scalable web applications.
  • A collection of well-integrated libraries that cover a wide variety of features including routing, form management, client-server communication, progressive web apps and more.
  • A suite of developer tools to help you develop, build, test, and update your code via the Angular CLI.

Server generated pages vs SPA + API

There are two common models for developing websites:

  • Server-generated pages:
    • The presentation and the data of each page is generated by the server before delivering it to the client
    • Generally stateful (it means that data is shared during page navigation using sessions and cookies)
    • The UI and business logic are coupled
    • The response body is generally heavier because it contains both the UI and the data
    • Also called multi-page applications (because each view is represented by a separate page)
    • Some example frameworks: PHP, Symphony, JSP, Tapestry, ASP Razor pages

server page

  • Single Page Application (SPA) + API:
    • The UI consists of a single static HTML file. The file is said to be static because the server does not modify the page before delivering it
    • The data is dynamically fetched from the server when the client needs it
      • The server that serves the data is commonly called an API/backend server
      • The data is generally in JSON format
      • It is not necessary to provide an API (for example, a video game SPA)
    • The page content is altered by the client through DOM manipulation. This allows, for example, to simulate a view or page change
    • The client uses Javascript in order to fetch dynamic data and manipulate the DOM
    • This model is similar to the one used in mobile apps (the SPA is analogous to the mobile app)

server page

An Angular application is an SPA that is complemented by an API if needed. There are other SPA frameworks such as Vue.js, React and Ember.js (the last one is the least popular). Each framework has its own strengths and weaknesses.

Advantages of using Angular

Angular presents numerous advantages:

  • It is particularly well suited to projects that need to scale and to that effect, it is mainly used for enterprise projects.
  • Its rich official library ecosystem enables great consistency across projects which means that when transferring teams or projects you will only need to learn about the new business domain and not an entirely new way of doing things because another library set choice was made.
  • It is very well documented and the consistency in the way the framework is used means you are more than likely to find any question you may encounter along your learning journey already answered.
  • The Angular team takes a lot of pride in how easy they make updating Angular projects, providing easy steps to follow and some fully automated migration.