ionic | ionic tutorial | Ionic 2 vs Ionic 1 - ionic - ionic development - ionic 2 - ionic framework

Ionic 2 vs Ionic 1 - Mobile App Development

File Structure:

Ionic 2 has a well-organized file structure while comparing with the file structure used in Ionic 1.

Every page & component in Ionic 2 comes with its own folder & supports different files such as a class file, template file and style file.

Let’s have a look at the structure for “Home” and “About” page in Ionic 2 project:

home

• home.js
• home.html
• home.scss

about

• about.js
• about.html
• about.scss

Push Pop Navigation Approach

The navigation approach used in Ionic 1 is different compared to Ionic 2. Ionic 1 facilitates a “web” based navigation approach which is defined through URLs and requires to activate states by linking to them.

Ionic 2 supports a “native” navigation approach where the pages are both “pushed” & “pooped”.

The push feature makes it possible to push a page onto the navigation stack in order to set it as the current page.

The pop features provides with an ability to remove a page from the navigation stack in order to return to previous page. This native navigation approach of Ionic 2 is related to pushing & popping an array.

Template Syntax:

The template syntax of Ionic 2 is more clean & useful due to its code block, while comparing with the template syntax of Ionic 1. Here is an example which illustrates this template syntax difference:

Ionic 1: <button ng-click=”doSomething()”>

Ionic 2: <button (click)=”doSomething()”>

JavaScript:

Ionic 2 uses plain old Javascript, which is not specific to any framework. However, Ionic 1 needs an understanding about a lot of frame based terminologies & syntax.

If you have a good knowledge about Ionic 2, it will not only help you to easily build Ionic 2 based applications, but will also support you to become a better Javascript developer.

ES6 Syntax

Since Ionic 2 supports ES6, so it is beneficial for you to make use of all the new ES6 syntax. Ionic 2 has the ability to transpile a code into a legitimate ES5 code.

It indicates that you just require to code away in ES6 without any worry and the entire thing will work fine.