Building blocks

Angular is one of the most comprehensive SPA frameworks available, as it attempts to provide almost everything you need to implement complete apps. Due to this fact, Angular brings quite a lot to the table.

Let's review the key application building blocks:

  • Modules: Unrelated to ECMAScript or TypeScript modules, Angular modules are logical containers that encapsulate logical parts.
  • Components: Angular enables you to decompose your app's visual tree into smaller reusable units called components.
  • Templates: Angular adheres to MVC-style programming, meaning the view is separated from the component's logic. Views in Angular are called templates and consist mostly of plain HTML.
  • Metadata: Angular uses metadata extensively, enabling declarative-style programming.
  • Router: Angular Router enables you to implement client-side routing to support user-intuitive and shareable links.
  • Data binding: Having the view and code separated can be a nuisance, as these usually need to interact with each other. To deal with this issue, enter data binding.
  • Directives: Directives allow extending or customizing existing elements in all sorts of ways.
  • Pipes: Pipes enable transforming values in an encapsulated and reusable way.
  • Services and dependency injection: Angular promotes encapsulating business logic into application services. Dependency injections can be used to compose everything together.
  • Observables: Angular enables advanced asynchronous patterns, such as observer, pub/sub, and sagas, with the use of Reactive Extensions (RxJs) and its observable APIs.
  • Change detection: Leveraging Zone.js, Angular detects state changes and makes minimal updates to the HTML DOM to optimize app performance.

The preceding blocks are the key features you use in Angular apps. Actually, Angular is more than just an application framework as it is meant to be a real platform in the sense of providing everything you need to write, test, build, deploy, upgrade, and maintain the app. By that notion, the Angular platform adds more platform-oriented building blocks to the overall picture:

  • Angular CLI: A CLI tool provided by the team to assist you with starting and managing your project.
  • Elements: Angular elements enable the implementation of components as standard web components that can improve interoperability between apps and technologies.
  • Schematics: Angular CLI uses a schematics system to manage and execute its command system. You can use schematics to extend the command system to customize scaffolding, and even perform code alterations.
  • Universal: Angular Universal enables isomorphic rendering in your Angular apps. In many projects, you might need to use server-side rendering, which can assist greatly with the initial time-to-render, as well as improve search engine optimization (SEO).
  • Progressive web apps (PWA): PWA can be a quick and simple alternative to provide users a native-like mobile app experience. Angular provides a package that aims to assist developers to build their apps as PWAs.
  • Testing: Angular provides rich support for testing all parts of your application and it is built-in as part of the tooling as well.

As you can see, there's much to learn when it comes to Angular. While many prefer the fact that much is provided out-of-the-box, others might see it as a constraint and choose an alternative instead.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.135.196.103