<commit_before>---
layout: v2_fluid/docs_base
category: getting-started
id: migration
title: Ionic 2 | Getting Started | Migration
header_title: Getting Started - Migration
header_sub_title: Ionic 2 Developer Preview
---


# Whats New in Ionic 2
Ionic 2 is built on top of Angular 2, which is complete rewrite of the original framework. All the parts of Angualr you know are still there, but there are new syntax and structural changes that developers need to be aware of. For an overview of the changes in Angular 2, take a look at [Learn Angular 2](http://learnangular2.com/).

For Ionic 2, things should feel quite familiar. All the concepts from Ionic V1 are still in V2, though they may look slightly different. You still have views and controllers like you did in V1, but in V2 they have been merged into on instance.

Take this V1 on example.


V1

```
.config(function($statProvider){
  $statProvider
  .state('main', {
    url: '/',
    templateUrl: 'templates/main.html',
    controller: 'MainCtrl'
  })
})

.controller('MainCtrl', function(){

})
```

We can rewrite this in V2 like so.

```
@Page({
  templateUrl:'main/main.html'
})
export class MainCmp {
  constructor(){

  }
}
```

Other changes, such as our navigation chagnes, are much more different, but all for the best. Now we can treat components as arbitrary views, and navigate to them how every we want. This makes navigation much more flexible and allows for much more native-styled navigation stacks.

# Migrating from Angular 1

<a class="improve-docs" href='https://github.com/driftyco/ionic-site/edit/ionic2/docs/v2/getting-started/migration/index.md'>Improve this doc</a>


While Angular 2 requires apps to be update for the syntax change, developers can be proactive and make sure their app is upgradable by following best practices and working with [<NAME>'s Angular Style guide](https://github.com/johnpapa/angular-styleguide) or [<NAME>'s Angular Style guide](https://github.com/toddmotto/angularjs-styleguide). Both of these will provide you with steps you can take to prepare your code for migration.

### ControllerAs Syntax

ControllerAs Syntax is a feature in Angular 1x where instead of binding data to `$scope`, you can bind to the direct instance of the controller instead. This makes migrating a Angular 1x controller to an Angular 2 class much easier. It's fairly easy to migrate to `controllerAs` from a traditional controller:

_index.html_

```html
    <ion-content ng-controller="MainCtrl">
      <ion-item>
        {{data.text}}
      </ion-item>
    </ion-content>
```

_app.js_

```javascript
    .controller('MainCtrl', function($scope){
      $scope.data ={
        text: 'Hello World'
      }
    })
```

To convert this to `controllerAs` syntax, you only have to change a few things.

_index.html_

```html
    <ion-content ng-controller="MainCtrl as main">
      <ion-item>
        {{data.text}}
      </ion-item>
    </ion-content>
```

_app.js_

```javascript
    .controller('MainCtrl', function(){
      this.data ={
        text: 'Hello World'
      }
    })

```

### TypeScript

TypeScript is a superset of JavaScript that provides ES6 Classes and type annotations in your code. By adopting TypeScript now, you can write your code as ES6 Classes that will be easy to move to Ionic 2\. The best part is that any valid JavaScript is also valid TypeScript, so you can convert your code piece by piece. If we take our controller from before, we can easily convert it to a TypeScript class like this.

_app.js_

```javascript
    .controller('MainCtrl', function(){
      this.data ={
        text: 'Hello World'
      }
    })

```

_app.ts_

```javascript

    export class MainCtrl{
      constructor(){
        this.data ={
          text: 'Hello World'
        }
      }
    }

```

### Project Structure

With Angular 1, it was a practice to keep all your JavaScript together and separate from your templates. Since Ionic 2 and Angular 2 will be moving to a component base setup, you can reorganize your project to help mentally enforce that concept. So a project who's directory could look like this:

```<commit_msg>Update index.md<commit_after>---
layout: v2_fluid/docs_base
category: getting-started
id: migration
title: Ionic 2 | Getting Started | Migration
header_title: Getting Started - Migration
header_sub_title: Ionic 2 Developer Preview
---


# Whats New in Ionic 2
Ionic 2 is built on top of Angular 2, which is complete rewrite of the original framework. All the parts of Angular you know are still there, but there are new syntax and structural changes that developers need to be aware of. For an overview of the changes in Angular 2, take a look at [Learn Angular 2](http://learnangular2.com/).

For Ionic 2, things should feel quite familiar. All the concepts from Ionic V1 are still in V2, though they may look slightly different. You still have views and controllers like you did in V1, but in V2 they have been merged into one instance.

Take this V1 example.


V1

```
.config(function($statProvider){
  $statProvider
  .state('main', {
    url: '/',
    templateUrl: 'templates/main.html',
    controller: 'MainCtrl'
  })
})

.controller('MainCtrl', function(){

})
```

We can rewrite this in V2 like so.

```
@Page({
  templateUrl:'main/main.html'
})
export class MainCmp {
  constructor(){

  }
}
```

Other changes, such as our navigation changes, are much more different, but all for the best. Now we can treat components as arbitrary views, and navigate to them however we want. This makes navigation much more flexible and allows for much more native-styled navigation stacks.

# Migrating from Angular 1

<a class="improve-docs" href='https://github.com/driftyco/ionic-site/edit/ionic2/docs/v2/getting-started/migration/index.md'>Improve this doc</a>


While Angular 2 requires apps to be update for the syntax change, developers can be proactive and make sure their app is upgradable by following best practices and working with [<NAME>'s Angular Style guide](https://github.com/johnpapa/angular-styleguide) or [Todd Motto's Angular Style guide](https://github.com/toddmotto/angularjs-styleguide). Both of these will provide you with steps you can take to prepare your code for migration.

### ControllerAs Syntax

ControllerAs Syntax is a feature in Angular 1.x where instead of binding data to `$scope`, you can bind to the direct instance of the controller instead. This makes migrating a Angular 1.x controller to an Angular 2 class much easier. It's fairly easy to migrate to `controllerAs` from a traditional controller:

_index.html_

```html
    <ion-content ng-controller="MainCtrl">
      <ion-item>
        {{data.text}}
      </ion-item>
    </ion-content>
```

_app.js_

```javascript
    .controller('MainCtrl', function($scope){
      $scope.data ={
        text: 'Hello World'
      }
    })
```

To convert this to `controllerAs` syntax, you only have to change a few things.

_index.html_

```html
    <ion-content ng-controller="MainCtrl as main">
      <ion-item>
        {{data.text}}
      </ion-item>
    </ion-content>
```

_app.js_

```javascript
    .controller('MainCtrl', function(){
      this.data ={
        text: 'Hello World'
      }
    })

```

### TypeScript

TypeScript is a superset of JavaScript that provides ES6 Classes and type annotations in your code. By adopting TypeScript now, you can write your code as ES6 Classes that will be easy to move to Ionic 2\. The best part is that any valid JavaScript is also valid TypeScript, so you can convert your code piece by piece. If we take our controller from before, we can easily convert it to a TypeScript class like this.

_app.js_

```javascript
    .controller('MainCtrl', function(){
      this.data ={
        text: '<NAME>'
      }
    })

```

_app.ts_

```javascript

    export class MainCtrl{
      constructor(){
        this.data ={
          text: '<NAME>'
        }
      }
    }

```

### Project Structure

With Angular 1, it was a practice to keep all your JavaScript together and separate from your templates. Since Ionic 2 and Angular 2 will be moving to a component base setup, you can reorganize your project to help mentally enforce that concept. So a project whose directory could look like this:

```
{'fraction_non_alphanumeric': 0.09128329297820824, 'fraction_numerical': 0.007263922518159807, 'mean_word_length': 3.504362050163577, 'pattern_counts': {'":': 0, '<': 28, '<?xml version=': 0, '>': 28, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7237807', 'n_tokens_mistral': 2439, 'n_tokens_neox': 2270, 'n_words': 1040}