The Official Ionic Blog

The next generation HTML5 hybrid app development SDK

angular-design-pattern

With Angular 2.0 fast approaching and the world of frontend frameworks in a massive transition, there’s been a lot of concern about the impending costs of moving to the next generation of Angular. Do developers have to learn yet another new framework?

Few teams have spent as much time with Angular 2 as the Ionic team has. We started building Ionic 2 back when Angular 2 was pre-alpha, with the dream of offering a faster, more standards-compliant, and future-proof mobile web framework than Angular 1 could provide.

One of the major realizations we’ve had from working on Ionic 2 is how similar Angular 2 and Angular 1 are at a high level, and how understanding this will help developers move from Angular 1 to Angular 2 far more easily. In many ways, Angular 2 isn’t really a new framework at all, just a new implementation of the same one we’ve come to know and love.

One framework, multiple implementations

With Angular 1, Angular 2, and Angular Dart, Angular has gone from a specific ES5 frontend framework, to a conceptual framework or design pattern with multiple implementations.

One can build UIs and frontend applications in the Angular style with a choice of at least three major language implementations: ES5, ES6/TypeScript, and Dart, though ES6/TypeScript is becoming the de facto Angular standard (i.e. don’t use Dart!).

If we take a closer look at how Angular apps work in each language, we start to see a ton of similarities. Let’s check out an example:

Example

To output a property from our scope or context, we can do this:

Angular 1:

<span>Today is {{todaysDate | date}}</span>

Angular Dart:

<span>Today is {{todaysDate | date}}</span>

Angular 2:

<span>Today is {{todaysDate | date}}</span>

Notice anything? They’re exactly the same! Let’s try a more complicated example with a theoretical list of songs:

In Angular 1 and Angular Dart:

<ion-list>
  <ion-item ng-repeat="song in songs" ng-click="openSong(song)">
    {{song.artist}} - {{song.title}}
    <span ng-if="song.isFavorite"><i class="icon ion-heart"></i></span>
  </ion-item>
</ion-list>

And Angular 2 (w/ Ionic 2):

<ion-list>
  <ion-item *ngFor="#song of songs" (click)="openSong(song)">
    {{song.artist}} - {{song.title}}
    <span *ngIf="song.isFavorite"><ion-icon name="heart"></ion-icon></span>
  </ion-item>
</ion-list>

Okay, we see more differences here, but the changes are well defined: ng-repeat is now ngFor, with a * used to denote this element as a template (that will be stamped out N times). Iteration uses “of” instead of “in” to grab the values of the list which is more inline with how iteration works in ES6 and TypeScript. We no longer use kebab-casing (i.e. ng-repeat) for attributes since Angular 2 decided to move to a more explicit naming convention (more on this).

If we apply a standard Angular 1 to Angular 2 syntax transformation, we have code that, conceptually, is identical to Angular 1 and Angular 2. We can look at this code and immediately understand the intention of it, assuming we’re already familiar with Angular.

Component Example

Most Angular users will find templates straight forward in Angular 2. A much bigger change comes with the new component model that replaces the directive/controller setup from Angular 1.

In Angular 1:

.controller('HomeCtrl', function($scope) {
  // controller for this "page"
})

.directive('profileImage', [function() {
  // ... directive here
}])

In Angular 2, since everything is a component, we can apply a simple transformation: turn controllers into components and turn ng1 directives into components.

Since Angular 2 lives and breathes TypeScript and ES6, we express “components” as classes that can (optionally) have a template attached. The analog to the above Angular 1 code would look like this in Angular 2:

import {Component} from 'angular2/core';

@Component({
    selector: 'home',
    template: '<div>home</div>'
})
export class HomeComponent { }

And the Angular 1 directive as an Angular 2 component:

@Component({
    selector: 'profile-image',
    template: '<div>profile image</div>'
})
export class ProfileImageComponent { }

Scope?

In Angular 1, scope was really just the “context” available to a region of the UI. For example, our profileImage directive might have a reference to the current user as part of its scope, or context, so it could render the user’s profile image.

This concept is exactly the same in ng2, except we use the natural ES6 concept of class instance data! Angular has gone from a custom context system to a standards-based approach since JavaScript has evolved to make this possible (with a little TypeScript decorator magic to make it cleaner):

export class ProfileImageComponent {
  @Input() user;

  clickFace() {
    // this.user is available, much like $scope.user would have been in ng1
  }
}

In Angular 2 we no longer need to have a custom $scope system to handle data for components, we get it for free* with ES6 and TypeScript!

*oversimplification, but it feels free to the end user!

Reducing the barrier to entry

Us Angular 1 veterans tend to forget how difficult it was to grok Angular 1. I know I had to take a month off from a lot of my other work to just understand what all these random terms like transclusion, directives, linking, scope, and so on actually meant.

A developer new to Angular and starting with Angular 2 will hopefully have way less domain-specific knowledge to learn since they can skip all the esoteric terms from Angular 1 and jump right into ES6/TypeScript code.

Plus, with no custom module system, Angular 2 code interops with the rest of the ES6 ecosystem, making it dead simple to install and import 3rd party code.

Angular all the way down

Once developers make the mental switch from the syntax of Angular 1 to Angular 2, we think they’ll find that they already know Angular 2. The concepts are practically identical, and the similarities don’t stop with templates and components; as users dig into pipes, dependency injection, and services, they’ll find tons of similar similarities (I like the sound of that).

Since there is so much overlap, we’ve tried to make Ionic 2 feel similar to Ionic 1, since it’s still based on Angular, just a new, better implementation of it! So far it seems to be going over really well and I’m optimistic that Angular 2 is going to be a major hit now that the dust is settling and the Angular 2 APIs are stabilizing.

Angular 2 is really just a better Angular!

  • dmackerman

    Excellent post. This completely echoes my experience with NG2 up to this point as well.

  • Emerson Thompson

    Very cool!

  • IrfanAmir

    at first, like many other developers i was hesitating to switch to angular 2. Then I realized that it is not that difficult plus i will get familiar with next generation of Javascript. I think learning ionic2 / angular2 is the best way to learn ES6/TypeScript

  • Rahat Khanna

    Excellent post, people should now Embrace #Angular2 and start building their apps or migrating existing projects..

  • http://www.pluritech.com.br/ Luis H. Moreno

    I’m liking the way you’re managing this blog right now. A lot of new posts each week. Keep it this way. Great article. Both Angular2/Ionic2 is fascinating.

    • yesimahuman

      Thanks! We’re going to be ramping up content on the blog, stay tuned!

  • http://meetup.com/AngularMN Jonathan Walker

    Great write-up. I got my hands on ionic 2 w/Typescript and I couldn’t have put it better. Angular 2 feels very natural. As someone coming from working with multiple Angular 1.x apps over the past year plus, I’m looking forward to the future of Angular, and more of your blog posts 😉

  • James Morgan
  • http://sampathloku.blogspot.com/ Sampath Lokuge

    Nice post.Thanks 🙂

  • http://www.arminzia.ir Armin

    Great read, thanks. And keep the goodies coming with Ionic 2, exciting times!

  • Matthias Max
  • Bo83

    It should be noted that in your theoretical list of songs example you are showing syntax for AngularDart1 and not AngularDart2. AngularDart2 uses the (click) syntax not the old ng-click syntax.

    Also AngularDart2 provides a lot of maintenance advantages over TypeScript/Angular2 (blog post discussing this can be found at the first link below). Google is investing heavily in adopting usage of Dart. Primarily the main app used by their Ads dept (which is Google’s #1 money maker) was written in Dart and I know the Fiber team also uses it and many other teams at Google are beginning to adopt Dart. Second link is another blog post discussing Google’s affinity towards using Dart in their major projects.

    http://tinyurl.com/j2dfp8r

    http://tinyurl.com/ztblgew

  • Tom McLellan

    Great post – very motivating to move to NG2! A lot of us are probably wondering when is the right time to migrate an existing Ionic 1 app to Ionic 2. I’m betting NG2 and Ionic 2 will go stable later this year, and wondering if there will be an Ionic 1.X release with ng-upgrade and/or Angular 1.5 to allow a gradual migration path. Looking forward to the next post!

  • Mikael Couzic

    I’d really like to read more about your opinion on Angular2 with Dart. Why shouldn’t we use Dart ? I find it really appealling, especially the development environment simplicity (no compilation, Dartium interprets my source code) and the type system (TypeScript can be pretty annoying with all the type definition imports, and code gets cluttered with “any”)

    • jasdeepharibhajan

      The entire advantage of TypeScript is lost if you keep using “any”. The whole idea is to use stricter types so the code at compile time is of a much higher standard than it would be without that type-checking in place. It reduces potential errors that could occur in the future, that just by writing ES5 JavaScript we would never think of. Yes, it’s a bit of a pain to introduce into a new codebase, and can get a little annoying at times, but overall code quality is vastly improved with little additional overhead and both as a developer & a business this is win-win

    • http://simplyspiritdesign.com Jasdeep Khalsa

      The entire advantage of TypeScript is lost if you keep using “any”. The whole idea is to use stricter types so the code at compile time is of a much higher standard than it would be without that type-checking in place. It reduces potential errors that could occur in the future, that just by writing ES5 JavaScript we would never think of. Yes, it’s a bit of a pain to introduce into a new codebase, and can get a little annoying at times, but overall code quality is vastly improved with little additional overhead and both as a developer & a business this is win-win

  • Brendan Alexander

    I have done 2 small scale web apps in Angular 2. Am now porting over a large-scale jquery web app to Angular 2. Am lovin’ it through and through. Am looking forward to the final release, esp the animation functionality. I find Angular 2 intuitive, easy to use, and implicitly makes me code in very organized way. And it’s only going to get better!

  • Kumar Gandhi K

    “I’m optimistic that Angular 2 is going to be a major hit now that the dust is settling and the Angular 2 APIs are stabilizing.”

    I like the sound of that 🙂

  • Günter Zöchbauer

    I’m using Angular2 with Dart and I don’t see any reasons to advise against using Dart. On the contrary. Most questions on StackOverflow, Gitter, … are about TypeScript project setup and build issues (webpack, systemjs, imports, …). I already used Angular.dart (basically the prototype of Angular2). Sure, Dart is not mainstream. If you want to go mainstream, use TypeScript. But if you advice against Dart you should at least provide some arguments. If you want to build largish applications Dart is definitely worth a try.

  • Andres Araujo

    From my experience it’s far easier develop applications with NG2 Dart than ES6/TS.
    Productivity and maintainability are on the sweet spot with Dart.

  • Alex

    I don’t understand your advisement against using Dart. Using Dart with Angular 2 is a wonderful and simple experience. I have apps already in ES6, TS and Dart, and Dart has easily been the smoothest experience of them all. Do you have any reason behind “don’t use Dart!”. Have you even bothered to try it first?

    Google sure loves it. Their biggest internal Angular 2 projects are all in the Dart flavor. Guess they missed your newsletter!

  • http://www.gnomeontherun.com/ Jeremy Wilken

    In my training and presentations about Angular 2, I find you’re right about the general concepts being quite familiar. The problem is the syntax, which is not just the change in ng-click to (click) type template syntax but the full embrace of ES6/TypeScript. There is a lot of apprehension or uncertainty about things like types, modules, and classes. Often I get the comment that it seems like a lot of new stuff, but the reality is most of the hangup is not actually Angular 2, just the recommended approach using ES6/TypeScript. Developers who learn and embrace ES6 (TypeScript is optional) and then learn Angular 2 will likely find it to be much more approachable (or understand Dart, which is quite powerful if your in that camp).

    • H.a.w.k P.h.i.l

      I agree with this comment. Frontend folks who started out their career with jQuery will find ES6/TS is difficult to understand. For example, how to use extend / implements? how to watch variable or entire object? etc…

  • ChenReuven

    1. Thanks For This Article
    2. i hear about Angular Mobile. Do u know about it?
    if the project will publish what will be the difference between Ionic and Angular Mobile? 🙂

    Thanks

  • vinod raghuwanshi

    Thanks for good article.

  • http://www.nickkenens.com Nick Kenens

    Love it.