Angular.js vs Angular

Sections

• Introduction
• Angular.js
• Angular
• Angular CLI
• Conclusion

Introduction

There are lots of flavor of Angular ( previously angular.js)

In 2010 when the angular first get release, at that time angular was known by the name angular.js. It uses javascript, and there wasn’t any CLI for it.

If you learn Angular.js then probably you can’t code in Angular. But when you will start learning Angular, you might understand lots of things because some fundamental are same.

So, Angular.js and Angular are different.

Angular.js ( initial release: October 20, 2010 )

If you have ever used jQuery then probably you know that you add CDN of jQuery to your project and get started using the jQuery. In the case of Angular .js also you add the CDN of Angular.js and get started.

• AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.
• AngularJS extends HTML attributes with Directives and binds data to HTML with Expressions

I am adding a simple angualr.js example

If anyone uses angular.js then keep one thing in mind that Google still supports angular.js and it still being maintained by the community and some Googlers.

For each version of angular, you can get the guide that how you can migrate to the newer version.

Angular ( initial release: 4 September 2016 )

First, let’s understand why Angular from angular.js

The answer is very simple, they stopped using JavaScript in angular.js

If not javascript then what?

They start using TypeScript and at this point, they can either name it as Angular.ts or Angular.

Why the name is not Angular.ts

I also don’t know the exact reason.

There could be possibly lots of reason for not adding .ts to the name of Anglar.

• ts might get more attention that Angular
• Adding js as extension in the name of the framework or library common but not ts.
• People might think Typescript is prerequisite for Angular.ts
• The typescript was new for community at that time and after knowing that Angular.ts uses TypeScrpt most user might drop the idea of learning Angualr.ts

At this point, you know why .js was removed from the name Angular.js

As I told you TypeScript was new for the community it means that we need a good guide and awesome community support to get started with it.

Why TypeScript?

You need not learn TypeScript if you a javascript developer.

TypeScript is a superset of JavaScript. It means All JavaScript code is valid in typescript but vice versa is not true.

TypeScript gives us type safety. Let’s understand the type safety with some examples.

Example 1: (valid javascript)

// valid javascript 
var myName = 'John';
myName = 12;

• We are assigning a number to the variable which was earlier used String. It is bad practice we would never do this. Assigning number to the variable which was defined for string.

Example 2: (invalid typescript)

// invalid typescript
var myName = 'John';
myName = 12;

• You can’t assign any different data type to the same variable. If you want to do that then you need to specify that you want to do so.

Example 3 (valid typescript )

// invalid typescript
var myName : any = 'John';
myName = 12;

• Here we specified explicitly that we want to give any data type to the variable myName.

If you want to try these examples then you can go to TypeScript Playground. TypeScript playground transpile the typescript code into JavaScript. If you will make any mistakes with the types then it will warn you about that.

So we had talked a lot about the typescript.

TypeScript = JavaScript + Data Types

How Typescript get converted into JavaScript?

Conversion of one code to the other is known as Transpiling. Angular Transpile the JavaScript into TypeScript.

Let’s come to the Angular.

How to TypeScript works in Angular?

You write code in TypeScript and when you build you project, it gets transpile into JavaScript. It means you are still going to upload javascript to the web server.

Do we need any set-up or installation for transpile typescript into javascript ?

You need some setup for that but Angular team had made a tool which does these setup for you. And that awesome tool is called

Angular CLI

This is what you get when you create a project using angular CLI. The file structure of Angular bit complex and once you start working with it, you will realise that code of Angular is very much organized.

Here is an example of an Angular App which you can run play with it.

If there wouldn’t be this CLI available then a significant amount of developers were not using it. CLI makes our life a lot more easier.

• The file structure which you saw above can be generated using one single command ng new <app-name> .

Angular CLI

It is a tool which helps us in creating new project, generating new component, and a lot more.

Angular CLI come up with Angular v2.0, At that time Angular CLI was not stable but Now Angular CLI is the one of the best CLI in the world.

Why Angular CLI?

If you don’t use the CLI then each time you want to get started with a new project you need to do all the task manually.

• The main reason for creating the angular CLI was to create a new project for you with boilerplate code. It means that now you don’t need to setup you project and typescript Transpiler. Boilerplate code always comes with up and running with basic setup ( Angular + Typescript )

How do CLI tools work?

Angular CLI is Nodejs based CLI tool which you install globally and access in your machine from anywhere.

Settings up the CLI isn’t difficult. This is just a two-step task

1. Download and install Nodejs
2. run npm install -g angular-cli

Once CLI get installed on your machine then you can create the angular project by writing the command ng new <project-name> .

Does angular CLI make our life easy?

Angular CLI is one of the best CLI in the world. I can’t explain how much Angular CLI makes our life easy. If there wouldn’t be CLI then probably I wasn’t writing the article now. If you once understand that how to use CLI in right way then probably you will never need to create any file/directory in your project. Using Angular CLI you can create file folder and even modify code from any file ( Schematics )

Let me tell you some of the features of the Angular CLI.

• Creating a new project
• Creating new components
• Creating new services
• Adding Material Desing (Schematics)
• Adding Material Component i.e. Table, Form, etc (Schematics)
• Adding PWA (Schematics)
• A lot more . . . . ..

CLI verison

You can easily find the version history of angular-cli on GitHub.

• on Mar 24, 2017, Angular CLI v1.0.0 get released

Initially Angular and angular-cli on a different track. angular-cli v1.0.0 was used to create the Angular 2.

Apr 5, 2018, Angular CLI v1.7.4 got released and after that angular team starts naming the angular CLI based on the angular version

• on Feb 9, 2018, Angular CLI v6.0.0 got released and on May 4th, 2018 Angular Framework 6 got released.

They posted an article one medium about the release of Angular 6 CLI because it having lots of great new features.

After angular 6 release, they almost started releasing angular and Angular CLI with the same version number and at the same time.

Conclusion

If you are new to the Angular then don’t go for angular.js. Go for any version of Angular which is higher than 4 because after Angular 4 code looks almost the same in every new version. If you read Angular 4 once then you will find little changes in the code in every new version.

Today

Angular.js Version: 1.7.8

Yes, Angular.js is still being used. I saw on GitHub that that last commit was 10days ago.

Angular Verison: 8.0.0

Angular is now more popular than angular.js.So, let’s talk more about the Angular v8.0.0

• Web Worker Support
• Differential Loading by Default
• Route Configurations use Dynamic Import
• AngularJS Migration Improvements
• Migration Guide for Angular 2+
• Ivy: a new Rendering Engine (Experimental)

If you like this then do let me know on Twitter or anywhere

Nitish Kumar Singh🇮🇳 (@nitishk72_) | Twitter