Create Your Page Structure

With your base application in place, the next step we recommend is to lay down the page structure. Think of this step as the framing of the new house, while the previous step was the pouring of the foundation. First, remove any pages that might have been generated by the CLI, then create stub pages for your application. The Ionic CLI makes this very easy with the $ ionic g page command. If you are building a tab-based application, remember the generate command can also assist with that.

Update the Theming

Ionic 1 could use SCSS, if you enabled it. Now this is how your CSS is generated in Ionic 2. The main .scss file in located in src/theme/variables.scss, and this is where any global changes to the styling should be applied. One of the other changes in Ionic 2 was each page now has its own .scss file that your can use to target specific styling changes you might need to make. Ionic 2 has exposed a lot more variables within the theming framework, so you might find the workaround that you had to do in Ionic 1 may no longer be needed.

Replacing Your Controllers and Views

One of the biggest challenges you might have is rewriting all your controllers and views. The Angular 1 $scope concept has been replaced with a modern class and component design. You will want to take some time to understand this new architecture before diving into converting your application. Once you have an understanding of it, most everyone agrees it is a cleaner and more intelligent approach. If you have a more traditional class-based programming background, you will find this refreshing. The additional use of TypeScript will also improve your code quality.

Our views—those HTML templates—will need some minor updating as well. Some components are the same as in Ionic 1, while others like cards and buttons have had a few modifications to them. One change to note is the inclusion of the <ion-header> and <ion-navbar> on every page. In Ionic 1, this was globally set and proved difficult to adapt to various designs.

Replace Your Factories/Services

In Ionic 1, shared data and functions were handled through the use of either factories or services. Now, this is handled as a standard ES6/TypeScript class that has the @Injectable decorator applied to it. With that decorator, Angular will allow this class to be used through dependency injection.

Convert the Application Initialization

The method of initializing our application has also changed in Ionic 2. No longer is there a concept of root run code; rather, this is replaced by a master component. In fact, in Ionic 2 our entire app is made of components. Now we just handle any initialization with our entry component.

Update the Routing

The page routing system in Ionic 1 was based on the UI-router module. While it was an improvement over the default router, it had difficulty with the navigation often found in mobile applications. In Ionic 2, the navigation system follows a more native push/pop style. That long code block that existed in your Ionic 1 app can be ignored. Your navigation system will now be handled screen by screen, instead of globally.

If you still need addressable URLs for your application, look at using the DeepLinking system to assist you. This can be easily defined in the app.module.ts file.