What is Angular?
According to the Angular documentation, "Angular is a framework and platform for building single-page apps." It is one of the big three frontend frameworks, along with React and Vue. Angular's three fundamental principles are modules, components, and services. Each of these basic ideas has several sub-concepts. Modules come in two varieties: root modules and feature modules. Components include root components, templates, views, data binding, directives, and pipelines. Dependency injection is used by service providers. This may seem like a lot, and it is. Angular has a reputation for being a powerful front-end framework, but if you grasp Angular modules, components, and services, you'll be well on your way.
Angular includes various prebuilt modules to help developers; they are known as NgModules by Angular. NgModules in Angular are always tagged with the @NgModule annotation. Common modules are the FormsModule, RouterModule, HttpClientModule, and Angular material design module. Modules are based on the notion of single responsibility. While a module can do several things, its major focus is on one thing, such as forms or routing. This reduces application clutter and organises the software into small useful pieces. The organisation of code into modules also allows for lazy loading, which means that modules load when needed rather than all at once when the application is launched. Lazy loading can assist improve the load times and speed of your application, which is an important consideration.
Every Angular app will have a root module called the AppModule, which will be stored in an app.module.ts file by default. This root module is responsible for allowing the application to bootstrap, or load and initialise itself. Below is an example of a standard AppModule.
Metadata for Modules
An Angular module's metadata consists of five properties. These are the properties:
- Declarations: Here we can list any directives, components, or pipelines that must communicate with one another.
- Any module, such as the forms or router modules, can be imported.
- Exports: Allows this module's components, pipelines, and directives to be utilised in other modules that import it.
- Providers: The services placed here become globally known, allowing for dependency injection.
- Bootstrap: Only the base module includes this capability. The primary application view, often called as the root component, will be included.
An Angular component is a Typescript class that interacts with a view. A view consists of a component and a template. A template is HTML that has been combined with the Angular data-binding syntax. Fields and methods in a component help to support a view. The view is then updated using these properties and methods. Angular builds and destroys all components as the user moves around the application.
Metadata for Components
An Angular component is similar to a Typescript class with one exception: it must be decorated with the @Component decorator. The @Component tag's primary role is to associate the template with a component; without this metadata, Angular would have no idea what to do with your component. The metadata tag has three crucial fields:
- This is what your HTML component will be called. Angular will insert your component wherever this tag is detected.
- This is the URL of the view linked with your template. As shown above, you can use relative pathing or define the HTML inline.
- providers: a list of services that the class makes use of.
A template is a section of HTML that references a component. A template is similar to an HTML page fragment. The example below shows the template for the HeroListComponent class code from above. As we can see, the template makes use of our component's selectHero method and includes an embedded view called.
Templates can be nested as well. The diagram below depicts how a template, child A and child B, can contain other templates, which can then contain further templates, the grandchild template. This allows for view segmentation while still displaying and hiding entire sections of a webpage as a single grouping.
Data binding significantly improves the usability of Angular. It enables data to be transferred back and forth between your component and template. The Angular developer would have to write custom code to push data between the template and component without data binding. Data binding can be used to transport data from a parent to a child component in addition to communicating between a parent template and a child component. In my experience, the moustache syntax is the most widely used in Angular, though this is partly dependent on developer preference. The following are the four Angular data binding forms:
- Interpolation: This approach inserts data from the component into the template, as shown as a value in the image below.
- Property binding, like interpolation, goes a step farther. Sets the property value in the array from the template HTML.
- event binding: Allows HTML/document object paradigm events to activate component functions.
- Using two-way binding, you can bind properties and events in the same expression.
Is a catch-all term for any code that performs a specified purpose for an application. Although this is a wide term, there are fundamental standards that a service should follow. An Angular service should be reusable and follow the single responsibility notion of doing one thing well. A component is in charge of the view, but a service is in charge of everything else. Things like repetitive business logic, data retrieval, and input validation that are required for the app but have nothing to do with graphics should be classified as services. Encapsulating this logic in a service allows it to be injected anywhere in your application, allowing for infinite reusability. Angular does not enforce any of these when writing a service.
The following diagram should now make sense. This article covered the principles of Angular, as shown in the diagram. An Angular web application is composed of a component class and an HTML template. Annotations and metadata connect the component and template. They communicate via data binding, the component via event binding, and the template via property binding or interpolation. Dependency injection is a technique for introducing services into a component. Future articles will go over pipes, directives, and more advanced Angular concepts.