Benefits of using AngularJS 2.0 in your next web application

Have any questions about strategy for Angular 2.0? This is the place where you will learn about angularJS 2.0. After many request from my readers i am explaining my own opinions and insights about major features of AngularJS 2.0.

Motivations to develop Angular 2.0

You might be wondering why AngularJS make a big jump to 2.0 and why so many breaking changes? The AngularJS team developed lots of big changes in 2.0 version. It will take a few minuts to talk about some of the high level motivations of changes.

angular-2

Better Speed & Performance

Angular turns to optimized your templates code. Now it is using JVM (Java Virtual machines) which will give you all the benefits of hand-written code with productivity of a framework. It serve the first view of your application on node.js, .NET, PHP and other servers for near-instant rendering in just HTML and CSS and also pass the way for websites that better optimize for SEO purpose.

Productivity

Quickly create UI views with simple and powerful template syntax and command line tools for start building fast, add components and tests, then deploy your application.

How to create angularJS 2.0 template :

<template>  
    <div class="border">
        <div class="tabs">
            <div [ng-repeat|pane]="panes" class="tab" (^click)="select(pane)">
                <img [src]="pane.icon"><span>${pane.name}</span>
            </div>
        </div>
        <content></content>
    </div>
</template>

</div>

</div>

</template>

Angular Uses TypeScript language

AngularJS 2.0 is not only a version upgrade, it’s a complete rewrite. AngularJs 2.0 recommends the use of TypeScript language developed by Microsoft which uses the following improvments :

Object Oriented Programming
Static Typing
Generics
Lambdas

Routing Solution

AngularJs 2.0 have changed the way to use routing solution to generate the navigation for front end UI. Following is key features :

JSON-based route configuration
URL resolver
Support the query string
Use push state
Static, Parameterized and Splat Route Patterns
Navigation based model (Generating navigation for UI)
Document title updates
404 route handling
Location service
History manipulation

Here is My First AngularJS 2.0 App

Directory structures of My First AngularJS 2.0 App.
angular-2-1

Create main.ts file

Create the file app/main.ts with the below code :

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

import { bootstrap } from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';

bootstrap(AppComponent);

Create index.html

Create index.html, then copy and paste the below code :

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

<html>

<head>

<title>Angular 2 QuickStart</title>

System.import('app').catch(function(err){ console.error(err); });

</script>

</head>

<body>

<my-app>Loading...</my-app>

</body>

</html>

Add some styles in your view file.

Create a styles.css file in your app root folder and add some styling.

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
body {
  margin: 2em;
}

h1 {

color: #369;

font-family: Arial, Helvetica, sans-serif;

font-size: 250%;

}

body {

margin: 2em;

}

Conclusion

Thanks for taking time to read this. If you have any particular features in your mind, share it with us in the comments section below.

Play This App Download

Thank you for giving time on freewebmentor community. Please don’t forget to subscribe our newsletter or join us on Facebook to be the first to learn the next great thing from freewebmentor.

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

Benefits of using AngularJS 2.0 in your next web application

Recommended Posts:

webmentor