Difference between Angular and AngularJS

Introduction

AngularJS was a fantastic framework that survived for over a decade (until Dec 31, 2021). After a few years, people started finding it a bit laggy in complex web applications containing more than 5k bindings on the page. AngularJS used the digest cycle to keep UI in sync with model value. Although, it has a few other technical flaws too. To overcome them, the Angular team had to revamp the UI update mechanism, along with addressing a few other issues. Hence they came with an Angular framework. By design, it is super fast, with web components first, keeping up with web standards, etc. The common fact between both frameworks is that they support two-way binding, templating, UI updates, etc. This chapter will focus on comparing the difference between Angular and AngularJS.

Controllers VS Components

We will be differentiating between Controllers and components by looking at the below points

• Syntax
• Usage
• Data Sharing

AngularJS Controllers

An angular controller can be easily related to the controller part of the MVC pattern. It was responsible for driving communication between view and model.

Syntax

angular.module('controllers')
.controller('myController', ['myService', 
  function (service) {
     var vm = this;
     vm.init = function() {
        // init function code.
     }
     
     // init
     vm.init();
  }
]);

Usage

This controller can be attached to view by using ng-controller, custom directive, or from route configuration.

my-template.html

<div ng-controller="myController as vm">
    ....
    Content here
    ....
</div>

my-directive.js

angular.module('myApp').
.directive('myCustomer', function() {
  return {
    template: 'Hello, {{vm.user}}',
    controller: function GreetUserController() {
      this.user = 'world';
    },
    contrcontrollers',
  };
});

Datasharing

It can be done by:

• Pass data between directives
  • using @, =, <, and & pass value from attributes.
  • isolated scope
• Service / Factory / Provider
• $scope.$parent.$parent (access parent $scope, NOT RECOMMENDED)
• Event emission by using $scope.$broadcast and $scope.$emit.

@Component({
  selector: 'my-component',
  temlptemplate1>Hello World</h1>`,
  styles: [`h1 {  }`]
})
export class MyComponent {

}

Angular Components

Components are the building blocks of any Angular application. These are the reusable pieces used to break down the application into smaller chunks.

Syntax

@Component({
  selector: 'my-component',
  template: `
      <h1>Hello {{name}}</h1>
  `,
  styles: [`
      h1 { color: green }
  `]
})
export class MyComponent {
    name = 'World';
}

Usage

This component can be used on the page in two ways

• Selector
• Dynamic component loading

Selector

<my-component></my-component>

Dynamic Component Loading

const componentRef = this.view.createComponent(MyComponent);

Datasharing

Data sharing can be done by:

• @Input and @Output property binding
• By using Service instance.
• Access parent component using @Host / injecting component in the constructor.
• Access the child component using @ViewChild.

Components of Angular vs AngularJS

There are various components of Angular and AngularJS, they are quite similar in syntactically different.

AngularJS

• Directive - app.directive('myDir', ...)
• Filter - app.filter('myFilter', ...)
• Service / Provider / Factory - app.servi ce('myService', ...)
• Config - app.config('myDir', ...)
• Constant - app.constant('myConstant', ...)
• Decorator - app.provider('myDirProvider', ...)
• Controller - app.controller('myController', ...)
• Component - app.comonnent('myComponent', ...)
• Value - app.value('myValue', ...)
• angular.module - app.module('myDir', [...])

Angular

• Component - @Component decorator used for defining Component
• Directive - @Directive decorator used for defining Directive
• Pipe - @Pipe decorator used for defining Pipe
• Service - @Injectable decorator used for defining Service
• NgModule - @NgModule decorator used for defining NgModule
• Resolver - @Injectable decorator used for defining Resolver, and implementing the Resolve class

Differences in Template Engine

The template engine of AngularJS and Angular is pretty equivalent, but the mechanism behind the evaluation of bindings and syntax is a bit different. We will compare based on the below points

• Interpolation - Way of reading putting a model value on HTML
• Binding - Passing data between attributes and properties
• Templates - Way of creating HTML view

AngularJS

• Interpolation - AngularJS uses {{}}(double curly braces start and end) for binding variable on HTML
• Property Binding - Uses expression like attr-name="modelValue" for passing data to directives.
• Attribute binding - To change attributes, you can use ng-attr-*(* indicates attribute name)
• Templates

  • Directive template

    angular.module('app.directives')
        .directive('myDirective', function() {
          return {
            // VVVVV -- template here, or it can be templateUrl
            template: 'Hello, {{vm.user}}',
            controller: [function GreetUserController() {
              this.user = 'world';
            }],
            contrcontrollers',
          };
        })
    

  • $templateCache - OtherAnotherof defining temple ate using $templateCache service, and use it as templateUrl in directives.

    angular.module('app.controllers')
     .controller('mainController', ['$templateCache', 
       function($templateCache) {
          var vm = this;
    
          vm.onInit = function() {
          // put method used for adding templates in cachethe 
          $templateCache.put('templateId.html', `<div>
            My Test Template
          </div>`);
        }
        // init
        vm.onInit();
      }
     ])
    

  • text/ng-template- Another way of defindefininglates on HTML as script tag with type=text/ng-template and use using it as a templateUrl.

    <script type="text/ng-template" id="templateId.html">
      <p>This is the content of the template</p>
    </script>
    

Angular

• Interpolation - Angular also uses {{}} for binding variable on HTML
• Property Binding - It can be used as[property]="modelValue", squared bracket wrapped with property name.
• Attribute Binding - To set DOM attribute you can use [attr.style]="style", it's a combination of property binding [] and inside use attr.* prefix before attribute name.
• Template
  • Component template - We can define the template or templateUrl in component

    @Component({
      selector: 'my-component',
      temlpateUrl: 'my-component.html',
    })
    export class MyComponent {
    }
    

  • ng-template - You can define reusable templates using the -template tag, kind of similar to template API of web component.

Backward Compatibility

As I said when Angular was released, there was no backward compatibility support with AngularJS. As time moved on, things started getting mature. AngularJS and Angular both can be used together with different strategies these days.

• Hybrid mode - You can use AngularJS and Angular together using ngUpgradeModule aka hybrid mode. Afterward, you have to decide on a strategy for migration, and this strategy is completely dependent on the nature of the application. The important thing to note here is,
  • Use upgrade methods when using AngularJS code in Angular context like upgradeModule, upgradeComponent, etc.
  • Use downgrade methods, when using angular code in AngularJS context like downgradeModule, downgradeComponent, etc.
• Iframe - Another way is to load part of the application using iframe, and communicate between apps using wind the ow.postMessage API.
• Angular elements - Using this API you can convert angular components to web components. And use them with AngularJS as a simple web component.

On other hand, backward compatibility of Angular 2+ versions is seamless.

• Easy upgrades
• Run ng update for upgrade de
• Most breaking changes are automatically covered by CodeMod

Use of Directives between Angular vs AngularJS

The Architecture of Angular vs AngularJS

There is a major difference between Angular and AngularJS architecture.

AngularJS

AngularJS follows the traditional MVC (Model View Controller) architecture pattern.

• Model - Can be related to $scope/service, which holds the application state.
• View - HTML template that is responsible to display the view.
• Controller - controller which is attached to view.

When any event occurs, the framework triggers a digest cycle and updates bindings/expressions on the HTML page.

Angular

Angular architecture is a bit different than AngularJS. Refer to the below diagram.

Components are majorly used everywhere in the app. They hold the template and associate the context with its class. If in case any data is required to be shared throughout the application Service can be used. Using Dependency Injection, these service instances are retrieved from the Injector tree. Apart from all this, there is NgModule. It can be considered a Submodule, it holds the components, directives, pipes, services, etc involved in a particular fa functionality. Whoever wants to use these capabilities provided by NgModule then they just have to import it and use it.

Mobile support

AngularJS can be laggy on mobile devices, but Angular was developed keeping mobile in mind. We can talk about Mobile Web and Native Mobile application support for these frameworks

Mobile Web Application

AngularJS

To be honest, we can say it works on the mobile web but could be laggy at times. Again, it depends on the device's confined duration. The reason behind the slowness could be, that AngularJS wasn't developed with the mindset of keeping it for mobile first.

Angular

Angular is a mobile-first framework, you will see that it works smoothly on the mobile web. This could be because the Angular compiler generates an optimized JS code after compiling the complete codebase to make sure it works faster on browser VMs.

Native Mobile Application

It's been great that AngularJS and Angular both support Native Mobile development using a Hybrid application approach.

AngularJS

You can create a native mobile application using an ionic framework, dedicated and designed for AngularJS. Internally it uses Cordova, to communicate with Native APIs.

Angular

Angular also supports native web application development, but there you can see two options

1. Ionic - Using a capacitor you can develop a hybrid application.
2. NativeScript - Native mobile app development with Angular application.
3. PWA - Progressive Web Application

Performance and Speed

AngularJS

• AngularJS would respond slowly after 5k bindings
• Optimization techniques
  • One time binding - {{::modelValue}}
  • Virtual scrolling
  • Reduce digest cycle
  • Avoid polluting $rootScope and calling $rootScope.$apply
  • Lazyloading

Angular

• Angular is super fast
• Optimization techniques
  • Configure Change detection strategy
  • Virtual scrolling
  • Run outside the zone
  • Zoneless angular
  • Memoization
  • Lazy loading

Testing And Tools

AngularJS

• Testing

  • Protractor - BDD
  • Karma Jasmine - TDD

• Debugging tools

  • Batarang
  • ng-inspector

Angular

• Testing

  • Karma, Jasmine - TDD
  • Jest - TDD
  • Testing-library - TDD
  • Cypress - BDD, TDD
  • Playwright - TDD

• Debugging Tools

  • Angular Dev tools
  • Augury
  • @ngneat/inspector

State Management

Various options are exist

AngularJS

• Using Services
• [ng-reduxVarious options are/ng-redux "{rel=noopener nofollow}")

Angular

• Using Services
• NgRx
• NgXs
• Akita
• MiniRx

The Advantages of Angular over AngularJS

• Modern tools are used
• Always Matching with current web standards
• Reactivity at heart
• Easy version updates
• Moving toward metaprogramming
• First-class support for web components.