minati biswal

Learn React by building a Trello-inspired application with a real-time database and authentication. Understand Gatsby's building blocks, build a strong foundation, and write applications with React JS Training

Adding new features is the business of publishing new frameworks—but luckily, the fundamental underlying architecture does not change very often. When it does, it's not typically a complete overhaul. With the exception of Angular 2.0, which was completely divergent from its predecessor, all major releases so far contain largely the same architecture.

Let's now take a look at the core architectural pieces of the framework.

Components Components are like widgets that are in charge of displaying themselves along with the data they consume and/or manipulate on areas of your screen called views. An Angular application is like a tree of components, and Angular provides mechanisms for components to communicate with each other in a bidirectional manner—parent to child and child to parent.

Templates Components rely on their templates for rendering their data. Templates are where you define what the component looks like and you can hook in styles to window-dress your component any way you like. A component can either contain its template (that is, the HTML) and its styling (that is, the CSS) either directly within itself or have references to template and style files outside of itself. At the end of the day, the world's fanciest frontend frameworks produce HTML, CSS, and JavaScript because these three things are the only things browsers understand.

Directives Within the templates you create for your component, Angular enables you to alter the DOM with powerful constructs called directives. There are directives for controlling the way things are rendered on the screen (that is, the component view) such as repeating snippets of HTML, for displaying things based on conditional logic, for hiding or showing things, filtering arrays of data, and much more.

Modules Angular is modular. That is to say that its functionality is wrapped up in modules, known as NgModules, and are themselves libraries. Modules are perfect for lumping code together in an organized way. For instance, there are modules for helping with forms, routing, and communicating with RESTful APIs. Many third-party libraries are packaged as NgModules so you can incorporate them into your Angular applications. Two examples of this are Material Design and AngularFire—we'll be taking a look at both of these libraries in later chapters.

Services Services are not really an Angular artifact per se, but rather a very general notion representing encompassed functionality, functions, and features that your application's components may need to consume. Things such as logging, data retrieval, or virtually any calculation or lookup service, can be written as services—these services can reside within your application, or live externally from it. You can think of a service as a highly specialized class that provides some service (such as looking up the distance between two zip codes) and does it well. Just as with components, not only are there tons of third-party services you can use in your Angular applications, but you can create your own custom services.