The Angular team recently announced the new version of Angular is Angular 5. It comes with lots of new features and bug fixes as compared to previous versions. In Angular 5, there some depreciations are added and previously depreciated stuff have been removed.
Let us we start the discussion of migrating Angular 1 to 5 one by one. When Angular upgrading from Angular 1 to Angular 2, Angular 4 and Angular 5, We usually knew our AngularJs 1.x basic code first.
What is AngularJs?
AngularJS is a JavaScript framework and it is an open source framework used to build web applications. It is developed by Google. AngularJs can be freely used, changed and shared by anyone. AngularJS extends HTML attributes with Directives. It can be added <script> tag in HTML. Basically, AngularJs is called as Angular 1.
AngularJs extends with HTML directives
- ng-app: defines an AngularJS application.
- ng-model: binds the value of HTML controls to application data.
- ng-bind: binds application data to the HTML view.
Upgrade Angular 1 to Angular 2
Why upgrade?
AngularJS is very simple and easy to use a scripting language as compared to other versions. Angular 2.x is the next major version of the framework and it will surely be the version we want to go with when building web applications in the future.
However, The AngularJs is not sufficient for today’s generations web applications. We need more flexible and more attractive websites. We still have lots of websites out there that seem to be outdated, old and slow. Even if those websites are over 10 years old, they still work. That’s why nobody doesn’t want to change their website.
So before we think about going through the process upgrading we should really ask ourselves why we want to do it.
Why it wants to upgrade ??
- Better Performance
Angular used to come with detect changes very fast view caching, precompilation to a template, high-speed performance bootstrap time, and other things that make the framework fast.
- Server-side Rendering
The Angular has been divided into two parts, an application layer, and a render layer.
- More powerful Templating
In Angular, very high powerful templates are used to web applications. The new template syntax is statically analyzable as discussed here, removes many directives and integrates better with Web Components and other elements.
- Better Ecosystem
Angular provides a future facility of an ecosystem.
What are the changes in Angular?
Below we show there are some changes
- Components
It is the new building blocks when creating applications with Angular. Nearly everything is a component, even our application itself.
- Inputs/Outputs (i/o)
Every Component is communicated via inputs and outputs, if they run in the Browser, these are element properties and events.
- Content Projection
Basically the new transclusion, but more aligned with the Web Components standard.
- Dependency Injection
In Angular, each component having injector and they come with its own injector.
Why upgrade Angular 2 to Angular 4??
There are some reasons to consider upgrading Angular 2 to Angular 4.
- View Engine:
Angular 4 has a new View Engine. Angular 4 is capable of producing less code when we use the AoT compile mode. We get the compressed code without any impact on the application performance with the help of view engine. E.g. Code size with AoT has reduced from 555Kb to 175Kb, etc. That’s why the Angular 4 is faster than Angular 2.
- AoT mode – Ahead of Time compilation:
In AoT mode, Angular 4 is highly capable of compiling our many templates during the build time in order to generate the JavaScript code. Both AoT mode and JIT mode is different as compared to JIT mode – (Just in Time). In Angular 4, we see in the older mode does the compile during the build time, but the latter mode does the compile at runtime when the application starts. Bellow show the advantages of AoT mode:
- There is no need to transfer the Angular compiler to the users, as a result, the package size should be smaller.
- The template errors at the build time instead of the runtime which, makes the application start quicker.
- Enhanced *ngFor and *ngIf in Angular 4
Earlier there was no else part for a ngIf tag. But, now it is possible to use in Angular 4. See in below example.
Ex: <ng-template>
<div *ngIf=”heroes.length > 0; else empty”>
<h2>Heroes</h2></div>
<ng-template #empty>
<h2>Hero not found!</h2>
</ng-template>
- Meaningful errors
It pprovides very help to the developer for developing any web application and Angular 4 has many in-built meaningful errors in generating source maps. When there is an error in any of your templates, the Angular 4 will generate source maps which provides a meaningful context in terms of the original template.
Improved features Of Angular 4
There are following features discuss bellow
- Tag ng-template
An Angular 4 template is now known as ng-template. It is an actual HTML tag whereas the ng – template tag is a new Angular 4 tag as shown below program.
Ex : <ng-template>
<div *ngIf=”heroes.length > 0; else empty”>
<h2>Heroes</h2></div>
<ng-template #empty>
<h2>Hero not found!</h2>
</ng-template>
- Http Request
Now we can add the search parameters to an HTTP request in Angular v4.
Ex : http.get(`${baseUrl}/api/heroes`, { params: { sort: ‘descending’ } });
In Angular v2, we were required to write many lines of code for Http Request. Let see as shown below:
Ex : const params= new URLSearchParams();
params.append(‘sort’, ‘descending’);
http.get(`${baseUrl}/api/heroes`, { search: params });
3. Overriding a template
An overriding of a template in Angular 4
Ex : TestBed.overrideTemplate(HeroComponent, ‘<h2>{{hero.name}}</h2>’);
An overriding of a template in Angular 2
Ex : TestBed.overrideComponent(HeroComponent, {
set: { template: ‘<h2>{{hero.name}}</h2>’ }
});
- Internationalization I18n
In the internationalization to improve small things such as ngPlural (from ‘ngPluralCase=”=0″’ to ‘ngPluralCase=”0″’).
Ex :
After:
<div [ngPlural]=”value”>
<ng-template ngPluralCase=”0″>Case 0</ng-template>
<ng-template ngPluralCase=”1″>Case 1</ng-template>
<ng-template ngPluralCase=”2″>Case 2</ng-template>
</div>
Before:
<div [ngPlural]=”value”>
<ng-template ngPluralCase=”=0″>Case 0</ng-template>
<ng-template ngPluralCase=”=1″>Case 1</ng-template>
<ng-template ngPluralCase=”=2″>Case 2</ng-template>
</div>
- The ‘CanDeactivate’ interface in Router Module
This interface has an optional parameter that contains the next state. Now We can implement customized logic so that a user can navigate away from the current component as per application requirements.
- The ‘ParamMap’ interface in Router Module
The ‘ParamMap’ interface can be used to represent the parameters of a URL. In Angular v2, we were using params to represent the parameters of an URL. It offers the options between ‘get ()’ method to get a value, and ‘getAll ()’ method to get all values or multiple values.
- Animations:
In Angular 4, Animations package has added as @angular/platform-browser/animations and in Angular2, this package needs to be included and referred in the application code.
How to upgrade Angular 2 to Angular 4??
Let us we see upgrading Angular 2 to 4. Angular 4 is very faster and smaller than Angular 2. Angular 4 has a meaningful error. Above we see advantages of Angular 4 over the Angular 3. It is as easy as updating your projects composer.json file. We can do this through the command line using NPM.
Commands:
: On Windows
- npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest –save
: On Mac/Linux
- npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest –save
Difference between Angular 1, Angular 2, and Angular 4 :
Here we discuss on a difference between major components of Angular 1, 2 and 4. AngularJS Training make use of the features technology of the Angular 1.0 to 4.0 which is used into latest web development technology.
1) Architecture
Angular version 1 vs Angular version 2 :
- The architecture of Angular 1 is based on MVC and the Angular 2 is based on service/controller.
Angular version 2 vs Angular version 4 :
- Upgradation of the version from 2.0 to 4.0 has reduced it’s bundled file size. It is used to reduce the created code and it developed code is used for prod mode and debug.
2) JavaScript and TypeScript
Angular version 1 vs Angular version 2 :
- Angular 1 use JavaScript to create the application and Angular 2 is used typescript to write the application. Typescript is helping to build more robustness and structured code. Typescript is superset of JavaScript.
Angular version 2 vs Angular version 4 :
- Angular 4 is compatible with newer versions of TypeScript 2.1 and TypeScript 2.2. It helps to type checking and also enhanced IDE features for Visual Studio Code.
3. Mobile Support
Angular 2 has two layers such as application layer and the rendering layer. Angular 2.0 has made it possible to accomplish the native applications for a mobile platform like React Native.
4) Component-based UI
The concept of the controller which was present in Angular v1.0 is removed in Angular v2.0. Angular v2.0 has changed to component-based UI. It helps a developer to divide the applications in terms of components with desired features and enable to call required UI.