Ionic1与Ionic2

1、Ionic2新特性

①组织结构与框架:

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

②命令行工具:

  在开发中,我们总希望能够有一个规范使得我们的开发更具有合理性,同时还能提升我们的开发效率,那么ionic2的CLI完全可以满足你这一点。

③路由导航:

  Ionic2的路由导航不同于Ionic1,我们都知道其实Anngular1自带理由是比较弱的,在复杂路由跳转的app中,是很吃力的,我 们一般都是依赖Angular1的插件ui-router,它是基于URL的hash(当然官方也提供配置切换到html5模式),那么ionic1也是 在这个基础之上进行导航封装的,比如说页面导航堆栈。

④模板的语法结构:

  ionic2的模板语法与Ionic1非常相似,但是看起来又有点古怪,其实Ionic2的模板语法更为简洁。例如:

  • ionic1:
<img ng-src="{{photo.image}}" />
  • ionic2:
<img [src]="photo.image" />

我们看一下 事件调用:

  • ionic1:
<button ng-click="doSomething()">
  • ionic2:
<button (click)="doSomething()">

⑤编译:
 
 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如果被人解包,他只能运行,但如果想拿到你的源码是相当困难的。

原文地址:https://www.cnblogs.com/hujinshui/p/6268405.html