Complete Introduction About Angular

What is Angular?

• Angular is a platform that makes it easy to build applications with the web.

• Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges.

• Angular empowers developers to build applications that live on the web, mobile, or the desktop

What is Angular CLI?

• Angular cli is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules.

• Not only it provides you scalable project structure, instead it handles all common tedious tasks for you out of the box.

Angular Architecture Overview:

• Angular is a framework for building client applications in HTML and either JavaScript or a language like TypeScript that compiles to JavaScript.

Angular Modules:

• Angular apps are modular and Angular has its own modularity system called NgModules.

• Every Angular app has at least one NgModule class, the root module, conventionally named AppModule

Decorators in Angular:

• Decorators are functions that modify JavaScript classes.

• Angular has many decorators that attach metadata to classes so that it knows what those classes mean and how they should work

Angular libraries:

• Angular ships as a collection of JavaScript modules. You can think of them as library modules.

• Each Angular library name begins with the @angular prefix.

Example:

import { Component } from '@angular/core';

Angular Components:

• A component controls a patch of screen called a view.

• You define a component's application logic—what it does to support the view—inside a class. The class interacts with the view through an API of properties and methods.

• Angular creates, updates, and destroys components as the user moves through the application.

Angular Templates:

• You define a component's view with its companion template. 

• A template is a form of HTML that tells Angular how to render the component.

Angular Metadata:

• Metadata tells Angular how to process a class.

• The metadata in the @Component tells Angular where to get the major building blocks you specify for the component.

Data binding:

• Angular supports data binding, a mechanism for coordinating parts of a template with parts of a component

• Add binding markup to the template HTML to tell Angular how to connect both sides.

• Categorized into interpolation ,  property binding , event binding and two-way binding

Angular Directives:

• Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives.

• A directive is a class with a @Directive decorator.

• A component is a directive-with-a-template; a @Component decorator is actually a @Directive decorator extended with template-oriented features.

Angular Services:

• Service is a broad category encompassing any value, function, or feature that your application needs.

• Almost anything can be a service. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well. 

Dependency injection:

• Dependency injection is a way to supply a new instance of a class with the fully-formed dependencies it requires.

• Most dependencies are services. Angular uses dependency injection to provide new components with the services they need.

Animations:

• Animate component behavior without deep knowledge of animation techniques or CSS with Angular's animation library.

Change detection:

• The change detection will cover how Angular decides that a component property value has changed,when to update the screen, and how it uses zones to intercept asynchronous activity and run its change detection strategies.

Events: 

• The events will cover how to use components and services to raise events with mechanisms for publishing and subscribing to events.

Forms:

• Support complex data entry scenarios with HTML-based validation and dirty checking.

HTTP: 

• Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.

Lifecycle hooks:

• Tap into key moments in the lifetime of a component, from its creation to its destruction, by implementing the lifecycle hook interfaces.

Pipes: 

• Use pipes in your templates to improve the user experience by transforming values for display

Example:

price | currency:'USD':true

It displays a price of 42.33 as $42.33.

Router:

• Navigate from page to page within the client application and never leave the browser.

Testing: 

• Run unit tests on your application parts as they interact with the Angular framework using the Angular Testing Platform.

Reference:

• Angular Documentation