- Angular CLI
There are lots of flavor of Angular ( previously angular.js)
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 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
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.
tsmight 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
At this point, you know why
.js was removed from the name
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.
TypeScript gives us type safety. Let’s understand the type safety with some examples.
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 typescriptvar 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 typescriptvar myName : any = 'John';
myName = 12;
- Here we specified explicitly that we want to give any data type to the variable myName.
So we had talked a lot about the typescript.
Let’s come to the Angular.
How to TypeScript works in Angular?
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
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>.
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
- Download and install Nodejs
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 . . . . ..
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.
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.
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