Ionic -- 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.tsimport {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（点击打开链接）