The Basics Of Angular JS: Core Features and Its Pros and Cons

An open-source web app framework, Angular JS was originally developed by Adam Abrons and Misko Hevery over a decade ago. Now, it is maintained mainly by Google as well as a community of corporations and individuals and is suitable for building large-scale, easy-to-maintain, high-performance web apps.

In order to understand the whole concept of this framework, you will have to enroll in an Angular JS Course. However, this article should cover the basics of Angular JS, its features, architecture and the pros and cons of using it.

Angular JS Overview

With the latest version of 1.2.21, Angular JS aims to simplify both the testing and development of such apps by offering a framework for client-side MVC (Model-View-Controller) and MVVM (Model-View-View-Model) architectures.

Angular JS is also a reliable framework to create RIA (Rich Internet Apps). In addition, apps written in Angular JS are compliant to cross-browser, meaning it automatically handles code in JavaScript suitable for each browser. It is a completely free, open-source and used by thousands of developers across the globe to address the many challenges of developing single-page apps.

Angular JS Core Features

  • Modules

This refers to an app. Modules are containers for the various parts of an app and are a collection of functions defined in JavaScript files. An Angular module divides an app into small, functional and reusable components that can be integrated with other apps.

Each Angular module is identified by a specific and unique name and can be dependent on other modules. All app controllers also belong to a module. Furthermore, on every web page, a single module is assigned to it through ng-app directive.

  • Directives

These are the markers on DOM elements like CSS, attributes, comments and more, telling the Angular JS HTML compiler to attach a behavior specified to that DOM element as well as transforming the DOM element and children. The Angular JS directives always start with “ng-“.

  • Controllers

Angular apps are controlled via controllers. These are JavaScript functions that are bound to a specific scope. The ng-controller directive refers to the app controller.

  • Scope

Scopes are objects that define a model. They act as a middleman between view and controller. Scope binds a DOM element to the view model and functions by definition in a controller. Scope is also considered the angular data source.

  • Expressions

Using an expression, you can do data binding, such as {{ }}, which are a declarative way of specifying an HTML data binding location. Angular JS will update this text automatically.

An expression does not support control flow statements such as exceptions, loops or conditionals and can be added inside the HTML template. IT also supports filters to format data before displaying it.

  • Data Binding

This is the automatic data synchronization between view components and models. In other words, any changes in the view will update the model and vice versa.

Angular JS handles data-binding mechanism using 3 functions: $apply(), $digest(), and $apply(). More often, Angular JS will call the $digest() and $watch() functions on the scope object automatically, but in some cases, you’ll have to call these functions yourself in order to update new values.

  • Filters

These are used to extend the behavior of directives and binding expressions. It allows data formatting to be displayed on the Dom and is invoked in the HTML along with the “|” character inside expressions.

Filters are also used to apply specific conditions or format values and are executed whenever the value bound in the updated binding expression.

  • Services

Angular JS also comes with several built-in services. These are singleton objects that can be instantiated only once in app and can be used by other components like controllers, directives, filters and other services.

If you need a solution for data cache or storage or want to share state across your app, then Services should be used.

  • Routing

Angular JS Routing is the switching views. It also helps you divide your app in several views and bind multiple views to a Controller to make it more manageable. This is taken care of by the Service $routeProvider, providing the methods when() and otherwise() in order to define the routes of your app.

  • Dependency Injection

This is a software design pattern which deals with how components can get hold of their dependencies. It helps you create a loosely-coupled architecture, allowing the developer to understand, create and test apps easily.

The injector subsystem creates components, resolving dependencies and providing them to other components as needed. In addition, components like directives, services, animations, and filters are defined by an injectable factory method or a constructor function.

  • Testing

As mentioned before, Angular components can support dependency injection. This, in turn, allows Angular codes to be tested.

The testing framework like Karma and Jasmine are the most commonly used testing framework with Angular since they support mocking and can be configured using JSON file as well as various plug-ins.

Angular JS Pros

  • In Angular JS, views are HTML pages with JavaScript-written controllers do the processing.
  • Developers can do a short code but still achieve more functionality.
  • The framework provides reusable components.
  • Angular code supports testing, both Integration testing, and Unit testing.
  • It provides data binding to HTM, giving the user a responsive and rich experience.
  • It uses dependency injections and uses separation of concerns.
  • The framework provides the ability to create single-page apps in a maintainable and clean way.
  • Angular apps can run on all smartphones and major browsers.
  • Since Angular JS is an open-source framework, there are minimal issues and errors to solve.
  • It is built on the famous MVC concept which is a design pattern used in today’s web apps.

Angular JS Cons

  • Angular JS is non-degradable. If a user disables JavaScript, nothing will be visible, but only the basic page.
  • It is not secure. Since it is a JavaScript-only framework, Angular JS apps are not safe. Server-side authorization and authentication are needed in order to keep Angular JS apps secure.