Frontend in easy way

What is Angular?

Hatem Bassem's photo
Hatem Bassem
·

6 min read

Table of contents

Angular

What is Angular?

Angular is a front-end framework that specializes in building rich Single-Page applications. It’s a vibrant framework able to build complete client-side applications, and there’s so much to do and learn in Angular. Angular 1.x used Javascript, but later releases adopted Typescript, which is a superset of Javascript.

  • Angular is Typescript-based open-source web application framework, developed by Google
  • Angular integrates a range of features like declarative templates, dependency injection, end-to-end tooling, etc.

Advantages of using Angular

  • Angular supports Single Page Applications

    • Single Page Applications are a type of web application that loads a single HTML page, and the page is updated dynamically according to the interaction of the user with the web app.
    • Communicate with the back-end servers without refreshing the full webpage, for loading data in the application
    • SPAs provide better user experience as no one likes to wait too long for reloading of the full webpage

  • Accessibility Applications

  • Angular CLI

    • Angular provides support for command-line interface tools. These tools can be used for adding components, testing, instant deploying, etc.

  • Animation Support

    • Angular’s intuitive API allows the creation of high-performance, complex animation timelines with very little code.

  • Cross-Platform

    • Web applications: Angular can be used for web development. Also, from Angular 5 onwards, progressive web applications can also be developed. Such applications have high performance and can work offline as well.
    • Native mobile applications: Native mobile applications can be built using Angular.
    • Desktop applications: Angular can be used to create desktop-installed applications for Mac, Windows, and Linux.

  • Code Generation

    • Angular is able to convert templates into highly-optimized code for modern JavaScript virtual machines.

  • Code Splitting

    • With the new Component Router, Angular apps load quickly. The Component Router offers automatic code-splitting so that only the code required to render the view that is requested by a user is loaded.

  • Templates

    • Allows creating UI views with a simple and powerful template syntax.

  • Testing

    • Angular lets you carry out frequent unit tests using Karma. The Protractor allows running faster scenario tests in a stable way.

  • Two-way data binding

    • Two-way binding gives components in your application a way to share data. Use two-way binding to listen for events and update values simultaneously between parent and child components.

    • In Angular >=2.x, the two-way data binding is implemented using the ngModel directive. The primary benefit of two-way data binding is almost automatic retrievals from (and updates to) the data store.

    • To get the most out of two-way binding, you should have a basic understanding of the following concepts:

    • In a two-way binding, the data flow is bi-directional. [()]

    • The different between one way binding and two way binding is

      • One way binding:

        • In one-way binding, the data flow is one-directional.

        • This means that the flow of code is from typescript file to HTML file.

        • In order to achieve a one-way binding, we used the property binding concept in Angular.

        • In property binding, we encapsulate the variable in HTML with square brackets [ ] .

        • Example

          • app.commponent.ts

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "Displaying the content with one way binding";
}

          • app.component.html

<h3>Displaying the content without one way binding</h3>

<hr />

<h3 [textContent]="title"></h3>

          • Output

Displaying the content without one way binding
Displaying the content without one way binding

      • Two-way binding:

        • In a two-way binding, the data flow is bi-directional.

        • This means that the flow of code is from ts file to HTML file as well as from HTML file to ts file.

        • In order to achieve a two-way binding, we will use ngModel or banana in a box syntax. [()]

        • To make sure the app doesn’t break, we need to import ‘FormsModule’ from ‘@angular/forms.

        • Any changes to the view are propagated to the component class. Also, any changes to the properties in the component class are reflected in the view.

        • To bind two properties in order to two-way binding works, declare the ngModel directive and set it equal to the name of the property.

        • Example 

          • app.component.ts

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  data = "Hatem and Yousef sheren";
}

          •  app.component.html

<input [(ngModel)]="data"  type="text">

<hr>

<h3> Entered data is  {{data}}</h3>

      Output

      Hatem and Yousef sheren are playing

      Entered data is Hatem and Yousef sheren are playing

  • Modularity in Angular

    • You can think of modularity in Angular as if the code is organized into “buckets”. These buckets are known as “modules” in Angular. The application’s code is divided into several reusable modules. A module has related components, directives, pipes, and services grouped together. These modules can be combined with one another to create an application.
    • Modules also offer several benefits. One of them is lazy-loading, that is, one or more application features can be loaded on demand. If properly used, lazy-loading can increase the efficiency of an application a lot.

  • Reduced coding

    • Many web developers want to write short but effective code. Angular supports MVC (Model View Controller) architecture, where the developer has to just split his/her code to fit into the MVC structure, and the rest is taken care by Angular. There is no need to write the MVC pipeline.

  • Declarative User Interface

    • Angular uses HTML for defining the user interface of an application. HTML is intuitive, declarative, and less complex than Javascript. In a declarative user interface, the presentational logic is separated from the imperative logic. We don’t need to be concerned about the program flow and the order of loading of components on the webpage. We can simply define the layout of the page, make it clear where the data is being bound, and what it is being bound to. Angular will take care of the rest.

  • There are several large and popular websites that are built using Angular. Some of them are as follows:

Disadvantage of Angular

​ Angular’s main cons are its size compared to other frameworks, and the fact it’s not SEO friendly by nature

Why was Angular introduced as a client-side framework?

  • Traditionally, VanillaJS and jQuery were used by developers to develop dynamic websites. As the websites became more complex with added features and functionality, it was hard for the developers to maintain the code. Moreover, there was no provision of data handling facilities across the views by jQuery. So, Angular was built to address these issues, thus, making it easier for the developers by dividing code into smaller bits of information that are known as Components in Angular.
  • Client-side frameworks permit the development of advanced web applications like SPAs which, if developed by VanillaJS, is a slower process.

State some advantages of Angular over other frameworks.

  • Out of box Features: Several built-in features like routing, state management, rxjs library, and HTTP services are straight out of the box services provided by Angular. So, one does not need to look for the above-stated features separately.
  • Declarative UI: Angular uses HTML to render the UI of an application as it is a declarative language and is much easier to use than JavaScript.
  • Long-term Google Support: Google plans to stick with Angular and further scale up its ecosystem as it has offered its long term support to Angular.
Angularangular materialHTML5Frontend Developmentfrontend