NG1 used a digest cyle to detect changes

Data could change anywhere at anytime

$timeout and $scope.$apply to trigger a digest

NG2 brings a new kind of change detechtion

Changes are detected on every browser event

Flow from parent to child - Unidirectional

The change detection can go through thousands of bindings in milliseconds

Take Away

Changes are easier to reason about

Immutable data and Observables for greater performance

ES5 has served us well for many years

JS world has gone through some changes

All for cleaner and simpiler code

NG2 and Ionic V2 use these new standards

Classes and Modules FTW

You can even write NG1 code in ES6 to ease the transition

Out of the box, Ionic 2 is setup for ES6

All the build and transpiling tools are setup for you

You just write your code, and we build

Typescript

Ionic V2 is written in Typescript

You can write in TS as well as ES6

Code completion and intellisense for free

The build process will handle both filetypes

The JS community is moving towards ES6 as well as TS

Support in major browsers as well as editors

Faster and simpiler way to write your javasctipt

Ionic V1 made development dead simple

Could we make things even more straigh forward?

Where were places that we could help developers

NG2 introduces many new topics

Perfect place for Ionic to step in and help out

@IonicView

Automagically handles the @Component and @View for you

Also wraps the template in an an ion-view

Ionicons

Reworked for Ionic 2

Each Icon has a platform specific counter part

Ionic will switch out the icon for you to fit each platform

Adds appropriate ARIA attributes for added accessibility

Sass

Colors have reworked to used Sass maps

You can add and remove colors as you need them

Simple starting point to really customize your app to fit your brand

Build process already included into V2

V1s navigation used UI-Router

Allowed for complex navigation, such as in tabs

Navigation in arbitrary components was not easy

Tied to a URL

Couldn't create app history from nothing

Deep linking from outside an app was difficult

We decoupled routing from Ionic

Simplicity FTW

New views get "pushed" on to the history stack

Want to go back? You "pop" back from that view

This push/pop metaphor is inspired by native navigation

But what about URLs?

Ionic apps aren't tighly coupled to the URL

You can push to a new view, then tell the browser what you want the URL to be

You are in control

  .state('master',{
    url:'/',
    tempalateUrl: 'templates/master.html'
  })
  .state('detail',{
    url:'/detail',
    tempalateUrl: 'templates/detail.html'
  })
          

  <ion-view view-title="Master">
    <ion-content>
      <a class="button" ui-sref="detail"></a>
    </ion-content>
  </ion-view>
          

  import {DetailPage} from './detail';
  @IonicView({
    templateUrl: '/app/master/master.html'
  })
  export class MasterPage {
    constructor(nav: NavController) {
      this.nav = nav
    }
    pushState() {
      this.nav.push(DetailPage)
    }
  }

  <ion-content>
    <a button (click)="pushState()"></a>
  </ion-content>

Take Away

Views can be rendered in anything and everything

URLs have been separated from navigation

App's history can be dynamically created