Introduction to Angular concepts
Angular is a platform and framework for building single-page client applications with HTML and TypeScript. Angular is written in TypeScript. It implements the main functions and the optional functions as a set of imported TypeScript libraries for your applications.
The architecture of an Angular application is based on some basic concepts. The basic building blocks are the NgModules, which provide compilation context for components. NgModules collect associated code in sets of functions. An Angular application is defined by a series of NgModules. An application always has at least one root module which allows initialization and, in general, many more function modules.
• Components define views, which are sets of screen elements that Angular can choose and modify based on program logic and data.
• Components use services that provide certain functions that are not directly related to visualizations. Service providers can be inserted into components as dependencies, making their code modular, reusable, and efficient.
Modules, components, and services are classes used by decorators. These decorators mark their type and provide metadata that tells Angular how to use it.
• You map the metadata of a component class to a model that defines a view. A template combines common HTML with Angular instructions and link flags that Angular can use to modify the HTML before it’s rendered for display.
• The metadata of a service class contains the information Angular needs to make it available to components through dependency injection (DI).
The components of an application usually define many views, organized hierarchically. Angular offers the router service, with which you can define the navigation paths between the views. The router offers sophisticated navigation functions in the browser.
The Angular Glossary contains basic definitions of important Angular terms and their usage.
Modules
Angular NgModules differ from and complement JavaScript Modules (ES2015). A NgModule declares a construction context for a set of components associated with an application domain, a workflow, or a set of closely related functions. A NgModule can have its components with associated code, eg B. services, link together to form functional units.
Every Angular application has a root module with the traditional name AppModule, which provides the autostart mechanism with which the application is started. An application generally contains many functional modules.
Get 3RI Technologies’s stories in your inbox
Join Medium for free to get updates from this writer.
Just like JavaScript modules, NgModules can import functions from other NgModules and allow its functions to be exported and used by other NgModules. For example, to use the router service in your application, import the RouterNgModule.
Organizing your code into different functional modules helps manage the design and development of complex applications for reuse. Also, this technique allows you to take advantage of lazy loading, that is, loading modules as needed to minimize the amount of code to load at startup.
Components
Every Angular application has at least one component, the root component, which connects a hierarchy of components to the document object model (DOM) of the page. Every component defines a class that contains data and logic and application and is associated with an HTML template that defines a visualization to be displayed in a target environment.
The @Component () decorator identifies the class directly below as a component and provides the template and specific metadata for the associated component.
Decorators are functions that change JavaScript classes. Angular defines a set of decorators that associate classes with certain types of metadata so that the system knows what those classes mean and how they should work.
Templates, Instructions, and Data Connection
A template combines HTML and Angular markup, allowing HTML elements to be edited before they are displayed. The model statements provide the logic for the program, and the call markup links the application data and the DOM. There are two types of data connection:
• With event association, your application can respond to user input in the target environment by updating application data.
• With the association of properties, it is possible to interpolate values calculated from the date of the application in the HTML code.
Before displaying a display, Angular evaluates the statements and resolves the connection syntax in the model to modify the HTML and DOM elements based on the data and logic of the program. Angular supports a two-way data connection. This means changes to the DOM, eg B. User options can also be reflected in program data.
Your models can use channels to improve user experience, transforming values for display. For example, use channels to display the date and currency values appropriate for the user’s locale. Angular offers predefined tubes for general transformations. You can also define your tubes.
AngularJS Training in Pune will help you to make your career bright.
