Moving from AngularJS to Angular: the overview of the two frameworks

Before the revolution, there were only jQuery and similar libraries to use, however, the lack of their capabilities made them eventually outdated.

The developers wanted a more enhanced tool and a fresh perspective on development that would have allowed the creation of modern solutions.

All of this fostered the appearance of a new AngularJS framework.

AngularJS is an open-source framework used for creating one-page websites and applications.

It was designed for simplifying the development and testing processes with the help of Model–View–Controller (MVC) and  model–view–viewmodel (MVVM) patterns.

Angular or Angular 2 is a new version of the old good front-end AngularJS framework that is based on TypeScript.

Both frameworks have their advantages and disadvantages.

Want to build a website or an app with Angular? Hire us!

Angular 1 showed great potential to build products according to the latest trends, which made it popular among developers all over the world.

The widespread usage of AngularJS gradually forced programmers to abandon conventional websites and raised their interest in building Single Page Applications (SPA) – these days they have become the norm.

This was the beginning of the era of better quality products.

So, what was so attractive about AngularJS to the world community?

There are a few things that encouraged developers like me to turn to AngularJS:

1. Kick-start a project instantly.

To get your project up and running, you need to study the documentation, complete an interesting tutorial, insert the tag “script with the link to CDN into the file and add the attribute “ng-app to the HTML tag.

It’s not a big deal, at all!

2. Detailed documentation and well-thought-out guidelines

Even for developers specialized in other frameworks or languages, it would be a breeze to overcome the learning curve.

Reading several articles and watching a few tutorials on this topic – all that it takes.

3. Modularity

AngularJS allows the creation of custom modules which can easily be integrated into apps as plugins and used in future projects.

There is no doubt it’s super convenient.

4. MVC

MVC stands for Model, View, and Controller,  aka separate parts of an app.

Thanks to various services and controllers employed in AngularJS, developers can divide an app into integral parts.

5. Two-way data binding

This one sounds like an incredible feature, although some may say otherwise. This technical aspect eliminates the need for manipulating with DOM since a DOM element is bound to a $scope-object.

To put it simply, any changes in the user interface are accessible to the controller and, vice versa, any alteration of the controller or the model itself will be displayed in the user interface.

6. Directives

To be honest, this is the most exciting thing about Angular 1. Directives let specialists create custom DOM-elements with unique functionality and behaviour.

There is a good number of ways of how to use directives in HTML:

• tags (<my-awesome-directive></my-awesome-directive>)
• attributes (<div accordion></div>)
• classes (<span class=user-name></span>)
• comments (<!– directive: modal –>)

But that is not all. Google developers provide users with an opportunity to use the same directive in multiple ways – as a tag in one case and as an attribute in another case. It is very handy and helps a lot.

And even that is not everything. Directives are the special thing in AngularJS. It’s possible to pass parameters to them, as a directive operates as an independent component whose functions and behaviour can be controlled.

Here is the list of most popular built-in directives:

• ng-if – removes the HTML element if the expression evaluates to false. If the if statement evaluates to true, a copy of the Element is added in the DOM (<table ng-if=!users.length>…</table>)
• ng-class – dynamically binds one or more CSS classes to an HTML element (<div ng-class={‘is-opened’ : isModalOpened}></div>)

7. Developed by Google

Google is the inventor of the framework and enhanced the confidence in it.

Google plays an important role in attracting new followers to the AngularJS community by updating and releasing new versions with advanced functionality.

Today, there are lots of fans of Angular 1 who greatly contribute to creating a solid knowledge base for learning it.

Thanks to the supporters of the framework, those who want to master it can do it easily by applying ready-made modules, directives, and tools.

No matter how good something is, it always has some drawbacks – and Angular 1 is not an exception.

The weak spots of AngularJS

• The documentation doesn’t cover all the issues and every now and then there is a necessity to look something up on the Internet and dive into the source code.
• Two-way data binding appeared to be an imperfect solution. Overusing this feature resulted in the slow work of applications.
• Creating custom directives is non-trivial and, thus, time-consuming.
• Given that the logic of a project is in its HTML markup, the development and maintenance are rather problematic.
• AngularJS works directly with DOM and not with Virtual DOM.

Despite sufficient limitations, AngularJS is still a powerful tool for web development maintained by such a giant as Google.

Most of the issues are fixed in the newer versions or can be resolved by developers themselves. It’s crucial to use the framework properly adjusting it to the needs of your project.

In the digital era, changes are imminent.

What was brand-new yesterday could be something ordinary today.

The same thing happens with all the technologies in web development, in particular with Angular 1.

Google realised that the current version of Angular didn’t meet the requirements of present-day and decided to completely rebuild it

upgrading AngularJS to Angular.

As a result, an innovative tool, Angular, was developed bearing in mind the disadvantages of the previous version.

Google released Angular (v.2.0) in 2016.

It’s completely different from AngularJS and feels very logical and intuitive.

Angular continues to gain momentum, which is proved by the figures.

The framework is a versatile solution for all kinds of websites – business, shopping, news, sports, etc.

So, what makes Angular “one-size-fits-all?

I’d like to focus your attention on these key characteristics of Angular:

•  Simplicity and Logic

At first sight, the syntax seems to be complicated and incomprehensible, but it isn’t.

Guidelines, documentation, and tutorials explain the fundamentals of the framework in a clear and understandable language.

• TypeScript

TypeScript is a magical language developed by Microsoft that has taken JavaScript to a higher level by equipping it with the technical aspects it lacked.

TypeScript is wonderful since it can be compiled with JavaScript. In addition, they’re backward compatible.

It’s is strongly-typed and allows developers to create interfaces, modules, and classes, inheriting them (including multiple inheritances), describing custom data types and the types of variables (or properties of objects), identifying the interfaces that objects with the reference from a variable must be assigned to.

[php]// An example shows how to describe the type for fields, methods and arguments
import {Component} from “@angular/core”;
import {SomeService} from ‘./services/some-service’
@Component({
selector: “my-component”,
templateUrl: “my-component.html”,
})
export class MyComponent {
name: string = ‘John’;
isMarried: boolean = true;
// …
constructor(private someService: SomeService) {
// …
}
saySomething(phrase: string): void{
alert(phrase)
}
isMarried(): boolean{
return this.isMarried
}
}
———————————————————-
// An example of simple interface
export interface IUserModel {
id: number;
name: string;
age: number;
isMaried: boolean;
}[/php]

It is extremely easy to deal with TypeScript. In case you need to drill into someone’s code, TypeScript will help you to do it with little efforts as it is used to working with modules, classes, interfaces, and strong types. TypeScript is ideal for developing and maintaining sophisticated applications.

• Angular CLI

When it comes to choosing a technology for a new project, it’s crucial to decide on a tool that will work well for everyday tasks.

Angular CLI is a command-line interface for kick-starting new projects, adding files, and performing tasks within the build-deploy-test workflow.

Angular CLI obviates the need to create classes or manually add them. It does all this job by itself.

• Data binding

Unlike AngularJS, Angular deal with both one-way and two-way data-binding.

As I’ve noted before, the method used by AngularJS has its pros and cons. Therefore applying two methods of binding is better.

Remember that your choice should depend on a specific task.

• Built-in RxJS

Imagine an app with a plethora of UI components changing their state between requests.

Supposing, you need to show a spinner while the data is loading or process a server error and show a message.

Callbacks may seem to be the key to solving the problem.

However, with the lapse of time, you may face the callback hell on your way. RxJS is going to rescue you.

[php]import { Injectable } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;
import { Observable } from ‘rxjs/Observable’;
import { IUserModel } from ‘../models/user.model’;
@Injectable()
export class UsersService {
constructor (private http: HttpClient) {}
getUsers(): Observablelt;IUserModel[]gt; {
return this.http.getlt;IUserModel[]gt;(‘/api/users’);
}
}[/php]

RxJS is a library for reactive programming. It generates data flows between components and allows creating new ones needed in a particular situation.

For instance, there is a flow for picking a product.

If a user adds something to the cart, there is an event with adding a product in the flow.

If a user deletes a product, there is an event with an empty array emitted in the flow.

This approach makes processing requests from a server much more convenient.

• Angular Universal

It is a project which aims to help developers with rendering on servers (SSR) and Angular-apps.

App rendering on a server with its further loading into a generated HTML file really helps searching robots to find the content, which improves the performance.

The limitations of Angular

Like every other product, Angular has its drawbacks:

• specific syntax with a steep learning curve to master;
• the lack of detailed documentation. Just as it is with AngularJS you will need to clear up the details yourself;
• TypeScript and RxJS need to be harnessed, otherwise, you won’t be able to cope with Angular;
• the code with millions of lines will make you dig through the files to figure out how to exclude modules, configuration settings and lazy-loading for modules.

Comparing AngularJS and Angular

Before you learn how to upgrade AngularJS to Angular let’s compare the frameworks.

AngularJS vs Angular2 comparison

Want to know how to migrate from AngularJS to Angular? Keep reading.

Sharing our experience

Our project Team Chess is based on Angular.

It is a unique online chess game that allows teams to play on the same board.

The core feature of the game is that white and black chess pieces are combined into 3 subgroups with 5 pieces in each; each subgroup goes strictly in its turn.

The ways of migrating from AngularJS to Angular

If you’re sure that your product built on the AngularJS framework needs evolving, then it’s time to consider how to upgrade Angular 1 to Angular 2.

A hybrid approach

This way of AngularJS to Angular migration implies the incremental rewriting a code.

In order to have AngularJS executed from Angular 2+, you will need to make these steps:

1. Start using npm in order to load dependencies. It’s advisable to load dependencies in node_modules folders rather than in public folders. Otherwise, you will have to create a symlink with the help of grunt or gulp.

2. We suggest using TypeScript to compile an app. First of all, you need to create a file tsconfig.json in your JS directory.

Use this command to transpile files recursively in JavaScript, You can either add “-w to it or integrate the command in your tasks runner.

tsc –project main_js_folder

3. In order to build your app, utilize SystemJS. It uses require() for resolving dependencies. In a development environment, you can resolve them by refreshing a page, in a production mode, you will need SystemJS to create a bundle file with all of them.

This is all you need to migrate to Angular from AngularJS.

Porting parts from AngularJS to Angular 2 through bootstrapping

The ngApp directive in a body or div element is to auto-bootstrap an AngularJS application.

It can be removed by changing

[php]&amp;amp;amp;amp;lt;div ng-app=”MyApp”&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;gt;[/php]

to

[php]&amp;amp;amp;amp;lt;div id=”ng-app”&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;gt;[/php]

However, this will lead to a blank screen.

To get an AngularJS app bootstrapped in Angular 2+, you will need a file with this code:

[php]// app.module.ts
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AppComponent } from ‘./app.component’;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
—————————————
// app.component.ts
import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent implements OnInit {
title: string = null;
ngOnInit(): void {
this.title = ‘app works’;
}
}
—————————————
// app.component.html
&amp;amp;amp;amp;lt;h1&amp;amp;amp;amp;gt;
{{title}}
&amp;amp;amp;amp;lt;/h1&amp;amp;amp;amp;gt;
—————————————
// app.component.css
h1{
color: #f00;
}[/php]

Then create an entry point to bootstrap an Angular 2+ app, which will make it run again.

Converting AngularJS to Angular with ngUpgrade

Hybrid apps serve their purpose when it comes to smooth upgrading.

The ngUgrade library is ideal for converting small components of an application. It allows doing the transition in a natural and seamless way through mixing and matching AngularJS and Angular elements together.

With the help of ngUpgrade it is possible to upgrade Angular 1 and downgrade Angular dependencies.

How does ngUpgrade operate?

At its core, there is the UpgradeModule with the tools for having applications of both older and newer versions of Angular work together.

This utility allows managing both frameworks together.

Surprisingly, there are no conflicts between the AngularJS and Angular frameworks as their components successfully interoperate in three directions: dependency injections, the DOM and change detection.

Dependency Injections

Both versions have dependency injections that work in a different way, though.

Fortunately, the UpgradeModule is capable of eliminating these differences and providing the systematic cooperation between AngularJS and Angular. It is about upgrading AngularJS and downgrading Angular dependencies:

• This is how it works with AngularJS. The frameworks share every provided instance of each service. In Angular 2+ there is the root injector (or module) containing all these services available to all the components.
• It’s worth mentioning that only services from the root module can be downgraded. When a downgraded service is registered, it’s necessary to clearly specify a string token that is going to be used in Angular 1

The DOM

The DOM contains elements from both Angular 1 and Angular using the input and output bindings or injected dependencies to interoperate.

The point is that each and every DOM element belongs to the one or the other framework.

For example, if an element is owned by AngularJS, Angular disregards it and vice versa.

It should work like this. A hybrid app functions as an AngularJS app.

The root template is run by AngularJS. Only when an Angular component is processed in the template, its template is managed by Angular with any number of components and directives.

Moreover, you can alternate between the two frameworks by allowing the templates of one framework to use the components of the other or through projecting the content from AngularJS to Angular.

Detecting changes

AngularJS and Angular apply different methods to detect changes.

The former framework tends to call the scope.$apply( every time when an event occurs. In Angular there is no need for calling the scope.$apply().

As the Angular is always aware of where its code ends, it knows when to kickstart the change detection.

The UpgradeModule mixes the approaches of the two frameworks within hybrid applications.

All the changes in an application happen inside the Angular zone that initiates every change detection whenever an event occurs.

The $rootScope.$apply()is invoked after every single turnaround of the Angular zone that triggers the AngularJS change detection.

Main rules to follow when upgrading to Angular from AngularJS

Certainly, your strategy should depend on the scope and complexity of an application.

Some apps may appear to be easy for an Angularjs to Angular update while others will require a lot more work to do.

You need to be well-prepared for migrating from AngularJS to Angular 2.

It’s a good idea to pay careful attention to these guidelines Upgrading from AngularJS to Angular Guide and AngularJS Style Guide.

You ought to know how you should structure your AngularJS code in order to align it with Angular, as the latter includes the best parts of the former.

To make the conversion from Angular 1 to Angular 2 uncomplicated and gradual, implement these  simple rules:

• Keep one component (controller, component, service, and filter) per file for convenient navigation and successful migration between the frameworks.
• Make sure that multiple parts of an application are located in different directories and NgModules.
• Structure your app layer upon layer in order to import one part at a time. If your application doesn’t look like this yet, we advise you to take notice before getting started with an upgrade.

Summary

There is no clear answer to the question “What is best AngularJS or Angular?.

Although Angular 2+ has inherited the best parts of its older version, there is still a wealth of websites built on AngularJS.

The Google team make great efforts to enhance the stability of both frameworks, optimize their toolkit, support older versions and release new ones.

The openness of the Angular community and its willingness to lend a hand engages more and more followers.

This post is a short summary of how to move from good old Angular 1 to its successor Angular.

For more information on this subject check out the Google documentation, guidelines, tutorials and articles. Also, you may want to turn to the Angular community or Google support to get help.

Have you got an experience of migrating from AngularJS to Angular?

What did you finally get?

Share your story in the comments.

If you’re just planning the conversion, feel free to contact us to receive the answers to all your questions.