Angular is a JavaScript framework which is developed by Google. By using Angular developers can build Web Applications, mobile, and desktop Apps with web technologies like HTML, CSS, and JavaScript. Angular 1.x versions and Angular 2+ versions are totally different. Angular 1 controller based and using JS whereas Angular 2 fully component based using TypeScript.
The history of Angular is given below –
Angular
Angular 2+Angular 1.x
Components BasedController and scope Based
Mobile First</tdNot built for mobile first
Improved Dependency InjectionSupports Dependency Injection
Supports ES5/6, TS or DartSupports ES5/6 or Dart
Angular CLI AvailableDoesn’t have any CLI
Angular 2+ uses the classes for define the servicesClasses are not available
Can be run on client-side & server-sideRun on only client-side
bootstrapModule() function is used to initialize the Appng-app and angular.bootstrap() function are used to initialize the app
Supports Pipesfilters
Supports camelCase and PascalCase syntaxes Like ngModel, ngForm and NgFormSupports spinal-case and camelCase syntaxes like ng-model, ng-class and ngModel
Use Html DOM elements properties and eventsUses its own directives like ng-click, ng-show and ng-src etc.
Use () for events and [] for attributesDoesn’t support () and [] based syntax
There are various reasons to use Angular which are listed below.
  • Angular fully supports Single Page Application (SPA) framework
  • Developed, Maintaining by Google and Open source
  • It supports Typescript and ES7 standard
  • By default it comes with Model-View-Controller Architecture
  • Supports to enable testing using jasmine and karma
  • Able to create a re-usable component, modules, routes
  • Supports Dependency Injection implementation
  • Great community support
Angular has comes with more features which makes it more useful to create any app easily, below is the list of important features and mail building blocks.
  • Component
  • Module
  • Data bindings
  • Services
  • Dependency Injection
  • Directives
  • Templates
  • Application Bootstrapping
  • Navigation
Recently Angular has released its newer version Angular 9, and with this version, we got several updated as well as the new features and these are listed below.
  • Smaller bundles and better performance
  • Added undecorated classes migration schematic in the core.
  • Support for TypeScript Diagnostics Format.
  • The formControlName also accepts a number in the form.
  • Internationalization support for Angular Ivy.
  • Selector-less directives as base classes in View Engine in the compiler.
  • Added support for selector-less directive as base classes in Ivy.
  • Ivy compiler is now the default for ngc.
  • Convert all ngtsc diagnostics to ts.Diagnostics.
  • Bazel: support ts_librarytargets as entry-points for ng_package.
  • Core: add dynamic queries schematic.
  • Core: Mark getas deprecated.
  • Ivy: expose ng.getDebugNodehelper and also support ng-add in localize package.
  • Ivy: i18n —add syntax support for $localizemetadata block.
  • Ivy: i18n — reorganize entry-points for better reuse.
  • Language-service: enable logging on TypeScriptHost.
  • Language-service: provide diagnostic for invalid templateUrls.
  • Language-service: provide diagnostics for invalid styleUrls.
    We know that it is difficult to keep in mind all those npm commands, but sometimes we may forget a few of them and get stuck, and at the end, we will find it with the help of different search engine. Using CLI prompts, now we can use different commands very easily like ng new and ng add. When we type ng new and then press the enter key, it will ask three different named and the sequence is listed below.
    • Application name
    • Enable routing
    • The format of the stylesheet
    After providing appropriate values, it will create a new Angular project.
    To work with latest Materialized components, we need to update our latest angular material package using below command.
    ng update @angular/material
    To optimize our Angular App, we have to very clear with the current bundle size. Based on the current size of our app, we can do optimization techniques. Run the below cmd to
    ng serve
    And you will get complete bundling details like this into your console.
    There are some prerequisites to learn Angular, which are listed below.
    • Basic knowledge of JavaScript
    • Basic knowledge of HTML
    • Basic knowledge of CSS
    • Knowledge of Typescript add an advantage
    • Any IDE to work with Angular
    As per angular office document, below is the pictorial diagram of angular architecture.
    Angular
    Module is a bundle of functionalities of the Application. Modules are piece of code and it divides your application into small bundle of tasks.
    NgModule is a decorator which have metadata of the module. It describes components, services, directives, pipes, etc. NgModule decorator having the following metadata properties :
    • declarations : Declare view related things like component, custom directives, pipes to make available in this module.
    • exports : To makes the declaration stuffs to available on other modules.
    • imports : import the other modules features.
    • providers : Register the set of servicesof the Application.
    bootstrap–Bootstrapping root component of the App. This is very 1st component which rendering on the browser.Every angular application must have at least one
    The Abbreviation of CLI is Command Line Interface. It is a command line tool which is used to create, initialize, generate andto manage the angular application easily. Angular CLI comes with many inbuilt cmds, by using these cmds we can easily manage the Application. Install the Angular CLI by using the below cmd,
    npm install -g @angular/cli
    Angular CLI is a powerful command-line tool by which we can create new Angular stuffs, build, test and deploy the angular application.
  • Bootstrapping Angular app
  • Code generation options for Component, Module, Class, Pipes, Services, Enums.
  • Unit test runs
  • Testing Angular app
  • Build and deployment our Angular application
    • Components are the main building block of an Angular Application.Angular apps have collection of Angular component trees. Components also one of the directives with View. If you want to render any view on the browser, component is the main part.
    Directives are Instructions to the DOM. Directives instruct how to behave an existing DOM element.Directive update the appearance of a DOM element.
    There are three types of directive in angular and these are as follows:
    • Component or Template Directive : It renders a View or Template.
    • Structural directives : It changes or updates structure of the DOM like Adding or removing DOM elements based on the given condition.
    • Attribute directives :It changes or updates the appearance of the DOM like Adding or Removing DOM attributes based on the given condition.
    ComponentsDirective
    Component use @Component decorator and its meta-data properties. Directives use @Directive decorator and its meta-data properties.
    Components are mainly used to Render Views. Directive are used to change the behaviouror update DOM structure of the DOM element.
    It is used to divide the application into smaller views.It is used to manipulate DOMs.
    Holding Application ViewsDoes not have any Views
    Angular Command Line Interface is the tool and by using this tool, we can scaffold, initialize, generate different files, and can build or deploy the angular application easily. To use different commands, we should install the package by using npm below command.
    npm install -g @angular/cli
    There are 8 angular lifecycle hooks are as follows:
    • ngOnChanges: This method is called When the value of a data bound property changes.
    • ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.
    • ngDoCheck: This is for the change detection and to act on changes that Angular cannot or won’t detect on its own.
    • ngAfterContentInit: This is called in response after Angular projects external content into the component’s view.
    • ngAfterContentChecked: This is called in response after Angular checks the content projected into the component.
    • ngAfterViewInit: This is called in response after Angular initializes the component’s views and child views.
    • ngAfterViewChecked: This is called in response after Angular checks the component’s views and child views.
    • ngOnDestroy: This is the clean-up phase just before Angular destroys the directive/component.
    To create a new Angular app using CLI command, then we can use below command.
    ng new
    It will take a few seconds or minutes based on our internet connection speed and then the new angular app will be created with the basic configuration.
    After creating a new Angular app, now it’s time to compile our app, for that we can use below command to serve our app.
    ng serve
    After executing above given command, our application will start building and it can also be helpful to rebuild the app after any changes occurred. If you want to open app automatically into a new window from the browser then we can use the flag –o like this.
    ng serve –o
    If you have created new Angular app and server the app using ng serve, then our app will be executed on URL localhost:4200, but we can change it using an additional flag along with ng serve which is –port.
    ng serve –port 4300
    An Angular component mainly contains a view, class, and metadata. It is used to represent the data visually in our view. A component can be thought as a web page. An Angular component is exported as a custom HTML tag like as:
    . When we create a new Angular app using CLI, it will create default App component as the entry component of application. If we are using Angular CLI than new component will be created using the below ng command.
    ng generate component componentName
    Data binding is one of the main building blockof Angular application which establish communication between a component and the DOM element. There are four types of data binding in angular and these are as follows:
    A) Interpolation : {{ value }} adds the value of a property from the component to DOM
    B) Property binding : Value is passed from the component to the specified html attribute: Syntax : [property]=”value”
    C) Event binding : When a specific DOM event happens like click, change, keyup etc., then call the specified method of the component. The communication is DOM to Component.
    Syntax : (event)=”functionName()”
    D) Two-way Binding : Two-way data binding allows in both ways component to DOM and voice-versa. Syntax : [(ngModel)]=”value”
    Interpolation expressions are the same expression that we use with JavaScript. But the difference is that we can use it within our Html template, so it looks like that we are using JavaScript along with Html but keep in mind that not every JavaScript expressions are supported like (new), (++) and (–).
    Property binding is generally used to show or update the value of the variables in component and vice versa. We can also call it one-way data binding thus it is not used to update the two-way binding mechanism, and value will be reflected at the component level.
    Two-way binding is one of the strongest binding mechanisms, where two different bindings are merged i.e. input and output bindings. It means that Event binding works with the two different binding mechanisms at a time and generates the output based on the event which was triggered. For two-way data binding, we will use the punctuation [( )] in order to bind the two-way data. It can be happen using the directive called ngModel which listen to the input for any changes and return the output. We will understand more by implementing the simple example, where we will type the text into the input and at the same time, we will get the value of the same input value.
    Metadata is used to decorate the class so that it can configure the expected behaviour of a class. Metadata can be attached to the TypeScript using the decorator. A) Class decorators : e.g. @NgModule and @Component B) Property decorators Used for properties inside component. for example, @Input and @Output C) Method decorators: Used for methods inside component class, e.g. @HostListener D) Parameter decorators Used for parameters inside component class constructors, e.g. @Inject
    ConstructorngOnInit
    It is a default method of the class that is executed when the class is instantiated. It is a component life cycle hook called by Angular to indicate that the Angular is done creating the component.
    Used for Injecting dependencies business logic performed
    Called by JavaScript engineCalled by angular
    Not everything in component is initialized at the time of invocationEverything is ready at the time of invocation
    No need to import anythingIn order to use OnInit we have to import it in the component class like this: import {Component, OnInit} from ‘@angular/core’;
    WhatsApp-Credo-Systemz