Ionic 2 With TypeScript 入门

1.认识Ionic 2

如果您听说过跨平台开发,那一定应该听说过 PhoneGap 或 Cordova ,这项技术可以让开发人员使用Web技术开发出媲美原生App的移动应用。但是 Cordova 只提供了使用 JavaScript 调用 Native 功能,在开发的时候还需要开发人员自己去实现诸如样式美化、页面切换、数据展示、弹出框、Modal窗体、日期选择器等功能或组件,为了提高开发效率,出现了各种前端框架,如 Ionic、 JQuery Mobile UI、 Sencha Touch、 Framework 7等。

简单来说,Ionic 是一套UI框架,对 Angular 进行了封装,提供了一套适配各移动平台UI风格的前端组件,使用 Cordova 进行打包,可以让开发人员免去调试大量 CSS 的工作,专注业务逻辑开发即可。

Ionic 基于 AngularJS 开发。由于AngularJS 1.x版本在性能上已经很难有较大提升,Google 不久前推出了全新设计的 Angular 2,在此基础上 Ionic 2 也发布了RC1,接近正式版了。现在正是学习 Ionic 2 的最好时机。

1.1.Ionic 2 介绍

Ionic 2 专注于以标准的 HTML 、 CSS 和 JavaScript 来构建移动站点,并可以通过 Cordova 打包成移动 App,只需编写一次代码,就可以分别部署到 iOS 、Android 等多种移动平台上。这项技术已经帮助很多开发者创建了很多漂亮的 App。现在 Ionic 2 已经发布了第二代版本,使移动开发更容易、更有效率。

Ionic 2 与一代相比有较大的变化,基于最新的 Angular 2 ,使用 TypeScript进行开发,如果您没有接触过 AngularJS或Ionic1.x,完全不用担心,直接从Ionic 2` 开始学习即可。

在使用 Ionic 2 之前,您应该具备 HTML、CSS、JavaScript 基础。

1.2.Ionic2 的优势与不足

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

更快的性能

Angular 1 的检测机制在某些场景下会导致性能降低,由于最初的架构限制已经很难进行提升了。Angular 2 有效避免了这种情况。数据显示 Angular 2 比Angular 1 快5到10倍。

官方提供了一个动画来展示 Ionic 2 的性能提升:

因图片较大,请点击查看:

blog.ionic.io/wp-content/uploads/2016/09/beta11-vs-beta12.gif

更清晰的项目结构

Angualr 2 应用是模块化的,因此Ionic 2的项目结构比Ionic 1更为清晰,如:

-home.page

--home.page.ts

--home.page.html

--home.page.scss

-about.page

--about.page.ts

--about.page.html

--about.page.scss

每个页面的代码、模板、样式都放在一块,意义非常清晰。

更强大的CLI

Ionic CLI 提供了更强大的功能,如添加一个页面,可以使用以下命令:

ionic g page NewPage

Ionic CLI 会生成以下的文件,并且文件中已经生成了基本的代码:

-new-page

--new-page.ts

--new-page.html

--new-page.scss

Ionic CLI 可以生成 pages, providers, tabs, pipes, components,directives等。

更友好的页面导航

Ionic 2 的导航方式相比一代有了巨大的改进,完全进行了重写。在 Ionic 1.x 中,需要配置路由:

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

.state('home', {

url: '/',

templateUrl: 'templates/home.html',

controller: 'HomeCtrl'

})

.state('main', {

url: '/main',

templateUrl: 'templates/main.html',

controller: 'MainCtrl'

});

$urlRouterProvider.otherwise("/");

});

Ionic 2抛弃了这种繁琐的方式,更类似原生的开发体验,一行代码即可搞定:

this.nav.push(SecondPage);

使用全新的NavController组件,导航栈的操作方式更加方便,实现前进、后退等功能就像操作数组那么简单。

更强大的模板语法

Angular 2的模板语法刚接触时可能会觉得有点难以上手,但熟悉之后就能够更加灵活的控制单向绑定、双向绑定、事件绑定等各种功能。

更高效的开发体验

基于 TypeScript,使用 Ionic 2 拥有更好的开发体验,支持类、模块、接口、lambda表达式等新的特性,大大改善了 JavaScript的开发体验。当然你需要一个好的编辑器,如VS Code:

强大的智能感知,自定义的类都可以哦,真的有点开发强类型语言的感觉啊 8-)

当然,因为最终还是要依靠 Cordova 进行打包,因此不可避免的会遇到所有 Cordova 类跨平台应用面临的问题,在某些性能较差的移动设备上渲染速度较慢。Ionic 2 已经明确提出不支持低版本 Android 设备,并且在 Angular 2正式版发布以后,支持 AoT 编译也会在一定程度上优化 App 性能。

1.3.Ionic 2 开发基础

在开始本课程之前最好能熟悉 HTML、CSS及 JavaScript,初步了解 TypeScript、Angular 2 的基础知识,如果了解不深入也没关系,Ionic 2已经为我们隐藏了很多底层的细节,封装的方法意义都很清晰,我们会在实践中,逐步掌握那些奇怪的标签。

Ionic 2基于Angular 2进行构建,这是对于原始版本完全的重写。一些语法和架构都有了变化,开发者需要注意。在Ionic 1中使用的views和controllers等,在Ionic 2中都被合并到了一块。

TypeScript是由微软开发的开源语言,是 JavaScript 的超集,兼容 JavaScript。提供了静态类型、 Lambda表达式、接口等先进的概念,可以说是面向对象的 JavaScript。2012年10月第一次发行公开版本,目前已经发布了2.0正式版。开发者是大名鼎鼎的 Delphi 和 .NET 之父:安德斯·海尔斯(Anders Hejlsberg)。上次大神来华时有幸见过一次,非常和蔼可亲。

AngularJS 是由谷歌推出的一款优秀的前端框架,被用于谷歌公司的多款产品中。AngularJS提供了MVVM、模块化、双向绑定、语义化标签、依赖注入等先进思想。AngularJS 诞生于2009年,但是1.x版本在性能上存在诸多问题,谷歌继续发布了颠覆性的Angular 2,目前已经发布了2.0正式版。Angular 2 的设计思路与1.x版本是有较大区别的,采用了 TypeScript 进行开发,因此如果之前没有接触过Angular 1.x的话,可以完全从 Angular 2 开始。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • 自从接触angular2以来,组长就提到了3个对于我来说是新东西的东西: angular2 typescript ...
    贺贺v5阅读 8,773评论 15 31
  • 人生苦短,生活不易。如果你感到落寞,不妨来听听我的故事。 我自小出生在农村,家里很穷,瓦房三间,敞房一间。那时候对...
    洛子帅阅读 5,395评论 103 191
  • 替别人看的一本书写的读后感,没地方放了,放到简书上面来,实在不适合写这种职场鸡汤的读后感,快憋出病来了。。。 村上...
    谢小喵阅读 284评论 0 3
  • 从去年冬天开始,我就有点焦虑和不知所措。 整个单位都在整合,铁饭碗忽然就变成了水中的浮萍,明天不知飘向何方,我们每...
    o希尔达o阅读 404评论 0 3
  • 会有一天,我吻你的脸 带着泪带着疤带着不同的心情 会有一天,我走你身边 忘了伤忘了痛忘了满满的心动 会有一天,我在...
    私九月阅读 295评论 5 1