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基础。

2. Ionic2 的优势与不足

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

更快的性能

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

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

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

http://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 性能。

3. Ionic 2 开发基础

在开始学习ionic2之前最好能熟悉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开始。

最新技术福利

免费视频教程百度云盘链接:

React Native入门 链接:https://pan.baidu.com/s/1qYtryC8

ionic入门 链接:https://pan.baidu.com/s/1i5mKcnF

微信小程序入门 链接:https://pan.baidu.com/s/1o8FGjDw

为了保证连接的可使用性,请关注微信公众号"ionic实战",

领取 提取码:

React Native入门视频 回复“RN提取码”

ionic入门视频 回复“ionic提取码”

微信小程序入门视频 回复“小程序提取码”

认识ionic2的更多相关文章

  1. VS2015墙内创建ionic2 【利用nrm更换源,完美!】

    STEP 1 设置cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org   一句话建立cnpm STEP 2 安装nr ...

  2. VS2015墙内创建ionic2

    开始学习ionic2,试验各种方法,感觉以下是紧跟rc版本的最佳方案 STEP1 设置cnpm npm install -g cnpm --registry=https://registry.npm. ...

  3. 浅谈angular2+ionic2

    浅谈angular2+ionic2   前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别.   1. 项目所用:angular2+ionic2 ...

  4. Ionic2系列——在Ionic2中使用ECharts

    在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...

  5. Ionic2系列——使用DeepLinker实现指定页面URL

    Ionic2使用了近似原生App的页面导航方式,并不支持Angular2的路由.这种方式在开发本地App的时候比较方便,但如果要用来开发纯Web页面就有点问题了,这种情况下Angular2的route ...

  6. Ionic2系列——Ionic 2 Guide 官方文档中文版

    最近一直没更新博客,业余时间都在翻译Ionic2的文档.之前本来是想写一个入门,后来觉得干脆把官方文档翻译一下算了,因为官方文档就是最好的入门教程.后来越翻译越觉得这个事情确实比较费精力,不知道什么时 ...

  7. Ionic2系列-将beta升级到RC1

    国庆节前Ionic2发布了RC0版本,已经接近正式版了,前不久Angular2和TypeScript2也已经发布了正式版.详情请参考官方博客: http://blog.ionic.io/announc ...

  8. ionic2+angular2中踩的那些坑

    好久没写什么东西了,最近在做一个ionic2的小东西,遇到了不少问题,也记录一下,避免后来的同学走弯路. 之前写过一篇使用VS2015开发ionic1的文章,但自己还没摸清门道,本来也是感兴趣就学习了 ...

  9. Ionic2学习笔记(10):扫描二维码

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5575843.html 时间:6/11/2016     说明: 在本文发表的时候(2016-06-1 ...

  10. Ionic2学习笔记(9):访问本地设备

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5559927.html               Ionic2提供了访问本地设备的方法,但是需要安装 ...

随机推荐

  1. jade的特点

    jade特点 1超强的可读性 2灵活易用的缩进 3块扩展 4代码默认进过编码处理,以增强安全性 5编译及运行时的上下文错误报告 6命令行编译支持 7html5模式(使用 !!!5文档类型) 8可选的内 ...

  2. Servlet添加

    index .jsp <body> <h1>第一个Servlet</h1> <hr> <a href = "servlet/Hellos ...

  3. 2)Javascript设计模式:Singleton模式

    Singleton模式 var User = (function() { var instance; function _User(){} _User.prototype.say = function ...

  4. iOS 调试 之 打印

    参考:http://m.blog.csdn.net/blog/HookyStudent/42964317 参考:http://m.blog.csdn.net/blog/laencho/25190639 ...

  5. php防止重复提交表单

    解决方案一:引入cookie机制来解决 提交页面代码如下a.php代码如下: <form id="form1" name="form1" method=& ...

  6. JavaScript中typeof和instanceof深入详解

    这次主要说说javascript的类型判断函数typeof和判断构造函数原型instanceof的用法和注意的地方. typeof 先来说说typeof吧.首先需要注意的是,typeof方法返回一个字 ...

  7. Hibernate常见异常

    1.数据库编码问题 主要错误信息 WARN: SQL Error: 1366, SQLState: 22001 ... ERROR: Data truncation: Incorrect string ...

  8. #图# #最大生成树# #kruskal# ----- OpenJudge 799:Heavy Transportation

    OpenJudge 799:Heavy Transportation 总时间限制: 3000ms 内存限制: 65536kB 描述BackgroundHugo Heavy is happy. Afte ...

  9. Spring util-namespace下标签相关操作

    java代码 package com.stono.sprtest; import java.util.List; import java.util.Map; import java.util.Set; ...

  10. HTTP服务器的本质:tinyhttpd源码分析及拓展

    已经有一个月没有更新博客了,一方面是因为平时太忙了,另一方面是想积攒一些干货进行分享.最近主要是做了一些开源项目的源码分析工作,有c项目也有python项目,想提升一下内功,今天分享一下tinyhtt ...