By: Prem Tiwari | Last Updated: | In: Angular JS, Freebies
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.
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 :
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
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 :
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 :
Here is My First AngularJS 2.0 App
Directory structures of My First AngularJS 2.0 App.
Create main.ts file
Create the file app/main.ts with the below code :
|
1 2 3 |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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> |
Add some styles in your view file.
Create a styles.css file in your app root folder and add some styling.
|
1 2 3 4 5 6 7 8 |
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.
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.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
