Ionic -- Ionic1与Ionic2的区别

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

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

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

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

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

A.更快的性能

Ionic -- Ionic1与Ionic2的区别_第1张图片

  

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

B.更清晰的项目结构

 Ionic -- Ionic1与Ionic2的区别_第2张图片

C.更强大的CLI

      Ionic -- Ionic1与Ionic2的区别_第3张图片

D.更友好的页面导航

  Ionic -- Ionic1与Ionic2的区别_第4张图片

E.更强大的模板语法

  

F.更高效的开发体验

   Ionic -- Ionic1与Ionic2的区别_第5张图片

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

4.请保证安装的Nodenpm为较新的版本。

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


  
    Home
  



  

Welcome to Ionic!

This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.

Take a look at the app/ directory to add or change tabs, update any existing page or create new pages.

6.模板的语法结构

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

ionic1:



    ionic2:



我们看一下 事件调用:

    ionic1:


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(点击打开链接)








你可能感兴趣的:(ionic)