Migration Process
Google has experienced great success with their AngularJS 1.x product, and developers really like it. So we're all happy to hear that Google was going to allow the use of Angular 1 and Angular 2 code in the same project. In fact, they'll even allow you to use Angular 1 and Angular 2 code in the same view. This can really help with the learning and migration processes. You can slowly upgrade your web app to Angular 2 without anyone even knowing. Not only can you use the same code bases, but your data binding will work across the difference Ng versions, as well. (You can download Wijmo's Angular 2 Explorer here.)
Google is currently working on ways to make slow migration easier and add additional seamlessness. Right now, you need four separate things to work correctly to be able to use the two-in-one application:
- Dependency Injection
- Component Nesting
- Transclusion
- Change Detection
To assist with this, a library named ng-upgrade is built. Once it's complete, you'll be able to include it in your mixed Ng app, and you'll be able to mix and match Angular 1 and Angular 2. If you're interested in learning more about the migration process, you can read the docs.
Is Angular 2 right for me?
Angular 2 has many benefits over Angular 1, including performance, more robust templating, lazy loading, cleaner APIs, and naturally easier testing and debugging. Google did some testing and they found Angular 2 performance to be up to 3-5x faster than Angular 1 during initial render and re-render scenarios. They managed this performance spike due to a better diffing algorithm and view caching (among other improvements). Testing and debugging is much easier, as well, due to the upgrades to the templates. You can now statically analyze templates, so future IDEs and tools can discovers errors that you would normally see at run time in development time. Of course, Angular 2 has an aggressive plan for improving performance, such as server-side rendering for web-crawler support, web workers, and a native mobile UI.
Ever since Google announced Angular 2, it has been gaining steam among the development community. If you're going to compare two code bases, one of the things that might jump out at you is the idea that there's no longer is $scope element, nor will you find controllers anywhere in Angular 2.
About Angular 2
Angular is a development platform for building mobile and desktop applications. One of the largest differences here is the idea that Angular 2 is based entirely on web components. In fact, for those of us that have done any hybrid application development, you'll appreciate what Angular describes as a “wealth of essential features” for mobile devices such as mobile gestures, animations, internationalization, and UI components.
At first glance, Angular 2 seems to be much cleaner and simpler than the original Angular project. Just like Angular 1 aimed for in its original release, Angular 2 aims to solve development problems using modern web standards. Google's really focusing on evergreen web browsers here. These evergreen browsers update automatically, which means that Google doesn’t need to employ hacks or workarounds to support legacy software. Currently they're supporting most of the browsers for mobile, but they're still deciding on how far back they want to go.
Angular 2 is modular and lightweight. The Angular team published a 5-minute quick start guide that literally only takes 5 minutes to get your application up and running.
Of course, if you're more interested in reading more about the architecture and design patterns that the Google team followed, they made their notes and papers publicly available. If you're not interested in reading through dozens of pages of notes, their team was nice enough to compile a cheat sheet for you.
TypeScript
A few months ago the Angular team migrated Angular to Typescript. It's neat how Google and Microsoft have teamed up. Even though Angular 2 is developed in Typescript you don't need to actually develop your web applications using Typescript. They provide great documentation if you are using Dart or just plain JavaScript. I personally come from a C# background so naturally I picked up the Typescript version of Angular 2 before I looked at the Javascript version.
Seven Building Blocks
Every Angular 2 application is going to rest on seven main building blocks. Google has a cool picture in their documentation that sums it up well:
These include Component, Template, Metadata, Data Binding, Directive, Service, and finally Dependency Injection.
Download Wijmo's Angular 2 Explorer >>
MESCIUS inc.