Understanding Angular
Hi guys, long time no see!
This time it is Angular , that I come with and we will be walking down some key concepts of Angular, touching upon the various features that Angular provides , calming those anxious nerves and finding meaning to the chaos!
So , let’s begin 👉
❶ What is Angular
Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your applications.
❷ Single Page Application : The Need and The Pros
Single Page Applications are web applications that load a single HTML page and for any new feature or component , only a part of the page is updated instead of the entire page on every click of the mouse. The page does not reload or transfer control to another page during the process.
In this way it differs from the traditional web apps. This ensures high performance and loading pages faster.
Angular allows you to make SPA in an easier manner.
❸ Angular Architecture
An angular application has following important parts to it:
⦿ Modules ⦿ Services
⦿ Components ⦿ Directives
⦿ Templates
⦿ Metadata
⦿ Data-Binding
⦿Dependency Injection
➍ Ng Modules
Module in Angular refers to a place where you can group the components, directives, pipes, and services, which are related to the application. In case you are developing a website, the header, footer, left, center and the right section become part of a module.
The basic building blocks of the Angular framework are Angular components that are organized into NgModules. NgModules collect related code into functional sets; an Angular application is defined by a set of NgModules. An application always has at least a root module that enables bootstrapping, and typically has many more feature modules.
Organizing your code into distinct functional modules helps in managing development of complex applications, and in designing for reusability. In addition, this technique lets you take advantage of lazy-loading — that is, loading modules on demand — to minimize the amount of code that needs to be loaded at startup.
➎ Angular Components
- Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data.
- Components use services, which provide specific functionality not directly related to views. Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient.
- The
@Component()decorator identifies the class immediately below it as a component, and provides the template and related component-specific metadata.
➏ Angular Templates
A template combines HTML with Angular markup that can modify HTML elements before they are displayed. Template directives provide program logic, and binding markup connects your application data and the DOM. There are two types of data binding:
- Event binding lets your application respond to user input in the target environment by updating your application data.
- Property binding lets you interpolate values that are computed from your application data into the HTML.
Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to your program data and logic. Angular supports two-way data binding, meaning that changes in the DOM, such as user choices, are also reflected in your program data.
➐ Angular Services and Dependency Injection (DI)
For data or logic that isn’t associated with a specific view, and that you want to share across components, you create a service class. A service class definition is immediately preceded by the @Injectable() decorator. The decorator provides the metadata that allows other providers to be injected as dependencies into your class.
Dependency injection (DI) lets you keep your component classes lean and efficient. They don’t fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services.
➑ Angular Router
The Angular Router NgModule provides a service that lets you define a navigation path among the different application states and view hierarchies in your application. It is modeled on the familiar browser navigation conventions:
- Enter a URL in the address bar and the browser navigates to a corresponding page.
- Click links on the page and the browser navigates to a new page.
- Click the browser’s back and forward buttons and the browser navigates backward and forward through the history of pages you’ve seen.
The router maps URL-like paths to views instead of pages. When a user performs an action, such as clicking a link, that would load a new page in the browser, the router intercepts the browser’s behavior, and shows or hides view hierarchies.
If the router determines that the current application state requires particular functionality, and the module that defines it hasn’t been loaded, the router can lazy-load the module on demand.
The router interprets a link URL according to your application’s view navigation rules and data state. You can navigate to new views when the user clicks a button or selects from a drop box, or in response to some other stimulus from any source. The router logs activity in the browser’s history, so the back and forward buttons work as well.
To define navigation rules, you associate navigation paths with your components. A path uses a URL-like syntax that integrates your program data, in much the same way that template syntax integrates your views with your program data. You can then apply program logic to choose which views to show or to hide, in response to user input and your own access rules.
➒ Angular Material
Angular Material is a UI component library for Angular JS developers. Angular Material components help in constructing attractive, consistent, and functional web pages and web applications while adhering to modern web design principles like browser portability, device independence, and graceful degradation.
Reactive forms provide a model-driven approach to handling form inputs whose values change over time. This guide shows you how to create and update a basic form control, progress to using multiple controls in a group, validate form values, and create dynamic forms where you can add or remove controls at run time.
That’s all folks for this time, as and when I progress I will take you along with me.
Happy Learning! 😃
