Getting Started with Angular 2
Angular 2 is the shiny new framework that comes with a lot of new concepts. Learn all the great new features.
ng-conf, the original AngularJS conference just took place last week in Salt Lake City, Utah on March 5-6. While none of us here at Scotch attended (we’ll be at ng-vegas!), the livestream was incredibly informative and fun to watch.
Here are the bullet points of our favorite news for those that didn’t take a peek at the conference presentations on YouTube.
Angular has a new website!
Built on Angular to show off Angular, the new site (angular.io) has a clean material design and is fully focused on Angular 2.
The Angular site we know currently (angularjs.org) will live on for Angular 1.x.
The community is amazing
The growth of the Angular community has been immense. Last month, there were 964k active users on angularjs.org and about 100,000 people connected with the Angular team on GitHub.
Angular 1 is still being developed
A 1.4 release candidate is coming this week. There are also plans for 1.5 and 1.6 after that. These updates will server to make Angular 1.x even better and faster than it already is.
More importantly, these new versions will help pave the path to Angular 2.
Angular 1.4 RC0 this week
Angular 1.4 will have:
- ~30% faster digest times vs 1.3
- 2-4% memory footprint improvement
- Performance improvements varies depending on browser/application
There is an upgrade path from Angular 1 to 2
There are actually two upgrade paths dubbed Big Bang and Incremental.
Big Bang is where you stop development in Angular 1 and work on building your entire app in Angular 2. This is the upgrade path people were expecting to take since the differences were so large between the versions.
Incremental is the interesting upgrade path. This requires you load both Angular 1 and Angular 2 libraries. Along with the new router, you’ll be able to take bits and pieces of your application and migrate them. This way, you can move through your application piece by piece. There is also the option to switch out the overarching controller for your application and work from the top down.
Here are two very informative videos to watch; one is on migrating 1.3 to 2.0 and the other is on Angular 2 syntax by Misko Hevery, the father of Angular.
ngModelOptions is cool
With ngModelOptions you have the ability to trigger a model update at set times or on set actions. Watch the 5 minute video:
There’s a new Angular router in town
The router is one of my favorite parts of any application. We’ve written about the current routing situations ngRoute, UI-Router, and have built a multi-step form. Soon be writing about the new Angular router.
The new router is:
- Component based
- Compatible with Angular 2 and Angular 1
We’ll write more on the new router soon, but the main feature is that it is component based where ngRoute and UI-Router were URL and state based respectively. Here’s Brian Ford, the developer working on the new router talking about the new features:
Having this new router component based helps us bridge the gap between Angular 1 applications and Angular 2 applications that rely on Web Components.
Angular 2 will have all the features you know
- Dependency injection
- Data binding
- Material Design
We’ll also get new features
- New languages
- Web Components
- New template syntax (sounds scary at first, we know!)
- Unidirectional data flow
- Ultra-fast change detection
Angular 2 will come with a style guide
John Papa and Todd Motto, both of which have their own very popular respective style guides for Angular 1.x applications have come together with the community and Angular team members to create a style guide for Angular 2 applications. This keeps developers in line and not having to wander around creating their own best practices.
Angular 2 syntax is actually easier to learn than 1.x
Scared of the big syntax changes coming in Angular 2? Don’t be. There is actually less to remember and the design and syntax choices make a bunch of sense. The day 2 keynote by Misko clears up much of the new syntax and explains why the choices were made.
Angular 2 is fast
Immutable data structures help speed up the change detection for large amounts of data.
Angular 2’s change detection is able to take advantage of immutable data structs for huge perf wins pic.twitter.com/uhtHXkU5dL
— Brian Ford (@briantford)
The blue line is Angular 1. The red is Angular 2. The yellow is Angular 2 with immutable data structures. The speed of your application won’t slow down just because you have more data!
Angular will also be more memory efficient, especially when showing views that have already been rendered:
AtScript is now TypeScript
- Type annotations
- Field annotations
- Metadata annotations
- Type Introspection with Annotation Support
The Angular team worked closely with the TypeScript team and as of TypeScript 1.5, the above features will be added. There has been a lot of working amongst the Angular and external teams like Microsoft’s TypeScript and work with Ember and their router. This is always an awesome thing to see developers banding together for a common goal.
Firebase’s AngularFire 1.0 is out
Honorable mention is this great talk by Shai Reznik. He pokes fun at the Angular team for some of their naming conventions (naming a filter… “filter”?!) and it’s a fun watch if you have the time.
ng-conf brought a lot of great new information to the table and brought much relief to the many Angular developers that were scared the new version would be a complete breaking change.
With great announcements like:
- Angular 1 still in constant development
- A new router to help bridge the gap to Angular 2
- An upgrade path to Angular 2
- ES6, Dart, and TypeScript support
- Incredible speed improvements
- A new website
There was plenty to chew on from ng-conf and it will be a very fun year for Angular developers!