Ionic -- Ionic1与Ionic2的区别

最新推荐文章于 2026-04-27 14:15:28 发布

原创最新推荐文章于 2026-04-27 14:15:28 发布 · 4.1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ionic #ionic2 #区别 #javascript #typeScript

ionic 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了Ionic2相较于Ionic1的主要改进，包括更快的性能、更清晰的项目结构、更强大的CLI等，并提供了从Ionic1迁移到Ionic2的具体步骤及示例代码。

现在公司使用ionic1的框架做项目，ionic2发布之后想把项目迁到ionic2上来，所以研究一下，发现把项目从ionic1迁入到ionic2是有点。。。

Ionic专注于以标准的HTML、CSS、和JavaScript来构建的移动站点，并可以通过Cordova打包成移动App，只需要编写一次代码，就可以分别部署到Ios、Android等多种移动平台上。

接下来我们介绍一下这两个框架的区别：

1. Ionic2与一代相比有较大的变化，基于最新的Angular 2，使用TypeScript进行开发（如果没有接触过Angularjs或ionic1，完全不用担心，直接从ionic2开始学习即可）

2.Ionic2借助Angular2的革命性改进，与1.x版本相比具有以下优势：

A.更快的性能

http://blog.ionic.io/wp-content/uploads/2016/09/beta11-vs-beta12.gif(点击打开链接)

B.更清晰的项目结构

C.更强大的CLI

D.更友好的页面导航

E.更强大的模板语法

F.更高效的开发体验

3.Ionic2基于Angular2进行构建，这是对于原始版本完全的重写。一些语法和架构都有了变化，开发者需要注意。在Ionic1中使用的views和controller等，在Ionic2中都合并到了一块。

4.请保证安装的Node和npm为较新的版本。

5.在Ionic2中，每个组件、页面都只专注于做一件事，它单独有自己的一个目录，有自己的类（Class）、模板文件（Template）和自己的样式文件（在这里我们提倡使用scss）

home.ts

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(private navCtrl: NavController) {

  }
}

home.scss

.home {
    &.xxx{

    }

    .xxx{


    }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="home">
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>app/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
</ion-content>

6.模板的语法结构

ionic2的模板语法与Ionic1非常相似，但是看起来又有点古怪，其实Ionic2的模板语法更为简洁。我们来看一下对比。

ionic1：

<img ng-src="{{photo.image}}" />

    ionic2：

<img [src]="photo.image" />

我们看一下 事件调用：

    ionic1：

<button ng-click="doSomething()">

    ionic2：

<button (click)="doSomething()">

7.它仅仅是javascript而已

ionic1和angular1都有一些特定的语法，但是追其根本只不过是javascript，也许你对EM6认识不是很深，但是你改变不了它是ECMAscript标准的事实，也就是说作为一个web前端开发的你，逃不了要学习这项新的语言，如果你感兴趣你可可以试试Typescript，如果你曾经做过后台开发，我敢肯定你会爱上它，那么你使用ionic2的同时，你是在熟悉未来web的新标准，它会让你成为一个更好的web前端开发者。直到现在仍然有很大一部分前端开发人员不知道angular，不知道reactjs，甚至EM6和typescript，所以你应该感受到一丝优越感。

jsvascript：

this.someData = null;

var me = this;

doSomething(function(data){
    me.someData = data;
});

看到了么？你问了使用this指针，不得不在函数外面作为变量me的引用，但是你使用了EM6:

this.someData = null;

doSomething((data) => {
    this.someData = data;
})

7.编译

ionic从平台上讲是基于cordova的封装（不仅仅是它的CLI
），因此ionic工程也是一个标准的cordova工程，也就是说我们最终给跨平台提供的是www目录的资源文件，但是在ionic2中我们都是在 www的同级目录的app目录进行编码，也是因为我们使用EM6或Typescript写的代码浏览器并不能够直接执行，如果你自己观察ionic2的工程目录，你会发现Gulp.js的脚本多了几个任务的定义，其实是几个ionic的钩子命令，如ionic
serve，ionic build之类的，其目的是在我们打包，或者浏览器模拟时的
命令执行之前，执行一些gulp任务，其中就是对typescript、scss的编译，是不是感觉很方便，而且最终合并编译到www/build/js目录下，并且很难反编译，也就是说你的app如果被人解包，他只能运行，但如果想拿到你的源码是相当困难的。

介绍一个ionic2入门的文章：https://yanxiaodi.gitbooks.io/ionic2-guide/content/（点击打开链接）

ionic英文网址：http://ionicframework.com/docs/components/#overview（点击打开链接）