Angular.js vs Angular

Sections

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.

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.

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;

Example 2: (invalid typescript)

// invalid typescriptvar myName = 'John';
myName = 12;

Example 3 (valid typescript )

// invalid typescriptvar myName : any = 'John';
myName = 12;

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.

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.

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

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.

CLI verison

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

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

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nitish Kumar Singh

Web🌐/ Mobile📱/ GraphQL / Cloud☁️ . Full-time programmer, part-time content creator, and Freelancer.