Before we jump onto our Hello World application on Angular, let me give you a quick overview of the Angular architecture. The architecture of Angular comprises of eight core building blocks: a module, component, template, metadata, data binding, service, directive, and dependency injection.
Architecture of Angular
An Angular application normally starts with the designing of templates with Angular tags or markups. Then, we write components to handle the templates. The application-specific logic will be added to services. Finally, the starting component or root component will be passed on to the Angular bootstrapper.
When we run the application, Angular takes the responsibility of presenting the template to the browser and takes care of user interactions with the elements in the template according to the logic provided in the components and directives.
Let's see the objective of each block of Angular in the following points:
- Any Angular application will be comprised of a collection of components.
- Services will be injected into components.
- Templates are responsible for rendering the components in the form of HTML.
- Components hold an application logic that supports the views or templates.
- Angular itself is a collection of modules. In Angular 1, the main module or application module is bootstrapped using the
ng-appdirective. We can include other lists of modules that our application module or main module is dependent on; they will be defined in the empty array inangular.module('myApp', []). Angular uses ES6 modules, and the functions or variables defined in modules should be exported explicitly to be consumed in other modules. The exported functions or variables are made available in other modules using the import keyword followed by the function name and then a from keyword followed by the module name. For example,import {http}from@angular/http. - Each Angular library is a facade of many private modules that are logically related.
- Directives provide instructions to render the templates.
We will see each building block of the Angular architecture in detail in the subsequent chapters.