Basic instructions for migrating from ionic1 to ionic2

Time:2020-12-3

Migration concept

Ionic 2 is a new framework based on the rewriting of angular 2. All the parts you know about angular still exist, but there are some new syntax and structural changes that developers still need to understand. There is an opportunity to write a separate article on the content of angular 2 change. What you want to know can be directTransfer to angular 2

There are a lot of things already familiar in ionic 2. All the concepts of ionic 1 remain in ionic 2, though they may be slightly different. As in ionic 1, you still have views and controllers, but they have been merged into one instance.

In ionic 1, it looks like this:

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

.controller('MainCtrl', function(){

})

Ionic 2 is rewritten as follows:

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

  }
}

There are many other changes, such as navigation. Now you can use components as you like and navigate to them the way you want. This makes navigation more flexible and supports a native style navigation stack.

Migration from angular 1

Although the syntax structure of angular 2 application needs to be updated, developers can still use theJohn Papa’s Angular Style guideandTodd Motto’s Angular Style guideThese two articles actively ensure that the upgrade is in line with best practice.
At the same time, here are the preparation steps for code migration:

Controlleras syntax

ControllerAsSyntax is a feature in angular 1 that replaces data binding to$scopeYou can bind instances directly to the controller. This makes it easy to migrate an angle 1 controller to an angle 2 class.

Traditional controller:
index.html

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

app.js

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

Convert tocontrollerAsThere are only a few changes to grammar
index.html

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

app.js

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

TypeScript

Typescript is a superset of JavaScript that provides annotation types in ES6 classes and code. Now with typescript, you can write code as an ES6 class, which makes it easy to move to ionic 2. And best of all, any valid JavaScript code is still valid typescript code, so you can convert your code blocks on demand. Your previous controller can easily be converted to this via typescript:

app.js

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

app.ts

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

Project structure

In angular 1, it is a convention to separate JavaScript code from the template and put it together. However, since ionic 2 and angular 2 are based on component concepts, you may need to reorganize your project structure to keep up with the new concept.

So your original project looks like this:

    |-www/
    |
    |--js/
    |--|-app.js
    |--|-HomeCtrl.js
    |--|-DetailCtrl.js
    |
    |--templates/
    |--|-Home.html
    |--|-Detail.html
    |
    |-index.html

After reorganization, it looks like this:

    |-www/
    |
    |--Home/
    |--|-HomeCtrl.js
    |--|-Home.html
    |
    |--Detail/
    |--|-DetailCtrl.js
    |--|-Detail.html
    |
    |-index.html
    |-app.js

The new organizational structure can help you to think coherently, so that you apply every oneView / statusandTemplatealsocontrollerBecome a component.

Recommended Today

Windows 10 uses screen keyboard

Link to the original text:http://xiaoheidiannao.com/articles/Screen-Keyboard.html More computer skills can be found at:http://xiaoheidiannao.com/articles/Screen-Keyboard.htmlCheck it out catalog introduce Typing mode Numeric keypad Opening method introduce The screen keyboard comes with windows 10Software, which allows users tomouserealizationkeyboardThe function of. On screen keyboardwindowWill be displayed at the top of the screen, otherSoftwarewindowIf it overlaps with the screen keyboard, it […]