1.Ionic2新特性 ①组织结构与框架: 在Ionic2中,每个组件.页面都只专注于做一件事,它单独有自己的一个目录,有自己的类(Class).模板文件(Template)和自己的样式文件(在这里我们提倡使用scss): ②命令行工具: 在开发中,我们总希望能够有一个规范使得我们的开发更具有合理性,同时还能提升我们的开发效率,那么ionic2的CLI完全可以满足你这一点. ③路由导航: Ionic2的路由导航不同于Ionic1,我们都知道其实Anngular1自带理由是比较弱的,在复杂路由跳转…

ionic3.X版本有不少亮点.作为从angular1到ionic1.ionic2一直用它们开发单页面应用的使用者来说,一直存在的一个痛点就是,将整个项目作为网页不打包成app的话,第一次加载时间太长了,而且怎么优化都解决不了这个问题,简直残忍.所以当看到说3.x支持页面懒加载了之后,忍不住试了几试,结果很尴尬....不管是按照官方文档还是国内其他人的一些文章,结果都会报错.再三检查,确定代码没有问题.调来调去,找资料,google...都没找到什么有用的信息,心中不免奇怪,这么多人用,怎么就没…

经历了一个从0到有的app的开发,我已经很熟悉Ionic1了,在此期间我曾发现过Ionic1的一些bug,和一些不合理的地方(根基版本 不同,后续我会陆续发表这些文章),我甚至在此期间对Ionic1进行代码改造和Hack,或者对其组件进行增强和封装,在onic2刚刚发布的时候,我 就已经迫不及待的欣赏它的新特性,但是我为此不得不再学习另外一个框架. 如果你已经熟悉Anguar1和Ionic1,那么请不要嚣张(陕西话叫zhang,二声.东北话叫嘚瑟,河南话叫啥?回家问问我妈再告诉 你!),听小明在…

好久没写什么东西了,最近在做一个ionic2的小东西,遇到了不少问题,也记录一下,避免后来的同学走弯路. 之前写过一篇使用VS2015开发ionic1的文章,但自己还没摸清门道,本来也是感兴趣就学习了一下.后来看到TypeScript,觉得这个真不错,强类型,有点类似c#的感觉,而且如果写错了编辑器都可以感知出来,于是就开始看ionic2.ionic2是基于angular2的,语法跟以前有了很大的变化.但自己写原生app写惯了,反而觉得这种方式更方便一些.每个页面都是一个组件,组件里也可以套组件…

ionic2+angular2中踩的那些坑 好久没写什么东西了,最近在做一个ionic2的小东西,遇到了不少问题,也记录一下,避免后来的同学走弯路. 之前写过一篇使用VS2015开发ionic1的文章,但自己还没摸清门道,本来也是感兴趣就学习了一下.后来看到TypeScript,觉得这个真不错,强类型,有点类似c#的感觉,而且如果写错了编辑器都可以感知出来,于是就开始看ionic2.ionic2是基于angular2的,语法跟以前有了很大的变化.但自己写原生app写惯了,反而觉得这种方式更方便一…

1. Ionic 2 介绍 Ionic 2专注于以标准的HTML.CSS和JavaScript来构建移动站点,并可以通过Cordova打包成移动 App,只需编写一次代码,就可以分别部署到iOS.Android等多种移动平台上.这项技术已经帮助很多开发者创建了很多漂亮的 App.现在Ionic 2已经发布了第二代版本,使移动开发更容易.更有效率. Ionic 2与一代相比有较大的变化,基于最新的Angular 2,使用TypeScript进行开发,如果您没有接触过 AngularJS或Ionic…

一.   基础搭建 1.      新建IONIC2项目 ionic start myApp tabs --v2 不加--v2会新建ionic1的项目 2.      运行项目 cd myApp ionic serve 3.      添加个人信息页 ionic g page myinof 添加页面后运行项目会报错: imports: [ IonicModule.forChild(Myinfo), ], 解决办法:把此句注释 // IonicModule.forChild(Myinfo), 4.…

onic官方文档链接:http://ionicframework.com/docs/ 如果是新的环境会有很多坑,主要是有墙,请仔细阅读每个步骤 文档包含以下内容: l  环境搭建 l  创建demo并调试运行 l  打包APK l  添加支持热更新 l  优化启动慢问题 l  常用命令 1.      环境搭建 需要安装以下软件和插件(Android): l  安装nodeJS(自带npm) l  配置cnpm  (使用淘宝镜像取代npm) l  安装cordova和ionic2 l  安装JA…

Angular2是一个全新的框架,它从ReactJS以及其他web移动框架借鉴了不少经验和优点,巨大的改进使得开 发体验和性能已经超越了Angular1,而且Ionic2无论是从UI交互效果和跨平台的差异性都优于Ionic1 1. 安装使用 ionic2的安装运行基本和前版本的ionic基本一致,非常简单. npm install -g ionic # 安装ionic工具集 ionic start projectName --v2 # --v2表示使用ionic2 + angular2的组合方式…

https://github.com/shprink/ionic-native-transitions https://www.npmjs.com/package/ionic-native-transitions 这个是ionic1的, 推荐使用ionic2开发, 或者ionic-native Issue & solution 直接使用ionic的css动画, 页面数据较多的时候简直卡成翔了, 使用分页加载也没有太大的改善. 目前最佳方案是使用[]ionic-native-transitions…

APP升级到Ionic2之后,如何调用自己写的pulgin,一直测试不成功,现记录这一经过. plugin目前可以分为3类,A类是ionic-native自带的,可以直接导入Typescript类,直接使用,比较简单易用,目前插件大部分是这一类. B类是纯js库类,具体的使用方法可以参考这个官方文档,目前还没有遇见这种情况,等遇见了再来记录. C类是我们自己写的cordova plugin,一般都是用在Ionic1版本中的,问题由此产生,在ionic2中是如何应用的呢? 方法步骤: 1.和ion…

1,jdk的安装与环境配置 jdk下载网址 http://www.oracle.com/technetwork/java/javase/downloads/index.html, jdk环境配置  A系统变量→新建 JAVA_HOME 变量 ,变量值填写jdk的安装目录(如 D:\Java\jdk1.7.0) B系统变量→寻找 Path 变量→编辑 在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; (注意原来Path的变量值末尾有没有;号,如果没有,先输…

关于网络环境:ionic开发环境不需要FQ.我这里没有设置FQ,亲测可行.但是angular2的开发环境搭建,则需要FQ网络,否则很多包会安装失败. 建议大家在搭建开发环境的时候,不要参考百度出来的各种博客,太零碎,重要的是时间久,也不一定写的对.强烈建议参考官网引导教程.http://ionicframework.com/getting-started/ ======================================================================…

本文原创版权归 博客园 yan_xiaodi 所有,转载请自觉于篇头位置显示标明原创作者及出处,这是您对作者劳动果实的自觉尊重!! 作者:yan_xiaodi 原文:http://www.cnblogs.com/yanxiaodi/p/6060123.html 电子书:https://www.gitbook.com/book/yanxiaodi/ionic2-guide/details 3.快速上手 完成 Ionic 安装后,你可以创建第一个App了.本章内容将指导你新建一个App,添加一个页面…

ionic2下创建项目后,运行启动页后白屏几秒,解决方案 问题描述 最近在学习过程中发现ionic2项目运行在真机上,启动页后会有3-5秒的白屏时间,用户体验不是太好. 解决过程 查看到了一篇关于这个问题的博客,但是是ionic1版本下的解决方案,有些差异,在查询ionic官方文档后,找到了ionic2版本的解决方案.ionic1版本解决方案原址:http://blog.csdn.net/dounainaicsdn/article/details/50767667 步骤 1.首先我们要先添加这个…

不同于Ionic1中插件的调用,Ionic2提供了Ionic Native.Ionic Native封装了一些常见的插件(如:Camera.Barcode Scanner等),这些插件的使用方式在官方文档中有详细的描述.今天我们所说的第三方插件就是指Ionic Native中没有,但在Ionic1中可以使用的插件. 创建新项目 ionic start JPush --v2 --id dpary.jpush.demo 运行以上命令,创建包名为“dpary.jpush.demo”的Ionic2应用.…

STEP 1 设置cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org   一句话建立cnpm STEP 2 安装nrm cnpm install -g nrm   一句话安装nrm[先用设置cnpm,安装nrm速度飞快] STEP3 转换npm源 nrm ls   获取nrm源列表 nrm use taobao 使用taobao源 STEP 4 安装ionic npm install -g cordova ion…

开始学习ionic2,试验各种方法,感觉以下是紧跟rc版本的最佳方案 STEP1 设置cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org   一句话建立cnpm STEP2 安装ionic cnpm install -g cordova ionic   全局安装ionic STEP3 创建项目 ionic start --v2 myApp tabs 注意一:有在公司用代理的,现在回到家最好要先清理下代理,否则gi…

浅谈angular2+ionic2   前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别.   1. 项目所用:angular2+ionic2+typescript 2. 项目结构 3. Src目录是我们本地开发的目录文件,www我ionic2编译后生成的文件 4. 每个文件夹下面都有三个文件  分别是.Html..scss..ts分别代表结构文件.样式文件.功能文件.也就是HTML+css+js,ionic2+angular2所用的是t…

在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话TypeScript是认不出来的,无法编译通过.下面以百度的ECharts图表为例,演示一下使用第三方库的用法. 1.安装ECharts 首先需要使用npm安装ECharts,输入以下命令: npm install echarts --save 安装完毕后可以看到node_modules目录下多了e…

Ionic2使用了近似原生App的页面导航方式,并不支持Angular2的路由.这种方式在开发本地App的时候比较方便,但如果要用来开发纯Web页面就有点问题了,这种情况下Angular2的router可以提供更灵活的配置.比如在首页是一个Tabs页面的情况下,如何控制用户看到的第一项Tab?默认情况下都是会导航到第一个Tab,而且地址栏的URL并不会跟随页面的切换而变化.好在Ionic2提供了一种类似路由的DeepLinker功能,可以实现以上目的. DeepLinker与NavControl…

最近一直没更新博客,业余时间都在翻译Ionic2的文档.之前本来是想写一个入门,后来觉得干脆把官方文档翻译一下算了,因为官方文档就是最好的入门教程.后来越翻译越觉得这个事情确实比较费精力,不知道什么时候能完成,就先把完成的部分放出来,避免其他人再重复劳动了. 地址:https://www.gitbook.com/book/yanxiaodi/ionic2-guide/details 这个文档不是严格的翻译官方文档,开始几章是自己写的.到组件那章基本上就是翻译了,有时候也会加一点自己踩过的坑.我在…

国庆节前Ionic2发布了RC0版本,已经接近正式版了,前不久Angular2和TypeScript2也已经发布了正式版.详情请参考官方博客: http://blog.ionic.io/announcing-the-ionic-2-release-candidate/ 这次升级提高了一定的性能,引进了Angular2的一些新特性,如@NgModule.支持AoT编译(Ahead of Time)等,项目结构也发生了变化.所以需要花一点时间把beta版本的项目升级到RC0,相对于提升的性能来讲,还…

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5575843.html 时间:6/11/2016     说明: 在本文发表的时候(2016-06-11),Ionic2是beta版本,所有还是会有一些改动比较大的地方: 点击查看 , 比如beta8版本(2016-06-06),相较于前面的版本就有一个特别大的改动的地方: @App and @Page should be replaced with @Component 基于这种情况,大家还是静静…

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5559927.html               Ionic2提供了访问本地设备的方法,但是需要安装Cordova依赖,我们以调用摄像头拍照为例来说明: 进入项目目录:cd MyFirstApp npm install ionic-native –save 增加调用Camera的插件:ionic plugin add cordova-plugin-carmera 在Home.html中,增加如下代…

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5557947.html              Ionic2可以有两种方式来存储数据,Local Storage和SQLite     LocalStorage     因为比较容易访问,所以不适合存比较敏感性的数据 比如可以存储: 用户是否登录的信息. 一些session信息等 具体用法: 进入项目目录:cd MyFirstApp 在主页设置一个按钮,点击按钮,获取LocalStorage的数据…

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5554610.html           我们先来看一个简单的输入用户名和密码点击登录的界面:     进入项目目录:cd MyFirstApp 修改主页代码: app/pages/home/home.html 预览一下效果:ionic serve -l 我们有两种方式来获取输入的数据:     第一种:通过[(ngModel)]来获取参数值,修改home.html的代码为如下形式 在home.t…

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5551535.html           Ionic2中创建一个页面很方便,在页面之间相互切换也很方便,我们在实现如下需求: 在主页面创建一个按钮,点击按钮,跳转到一个新页面,在跳转过程中,我们可以也可以在页面之间传递数据. 进入项目目录:cd MyFirstApp 创建一个新页面: ionic g page SecondPage 将@import "../pages/second-page/se…

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5547646.html             Provider是一种为App提供数据源的方式, 举个例子: 我们从: https://www.reddit.com/r/gifs/top/.json?limit=10&sort=hot 获取Json格式的数据,并在程序启动的时候,在控制台打印获取的数据信息: 进入项目目录:cd MyFirstApp 创建一个Provider:ionic g prov…

服务的采用Asp.net API实现,数据库用的sqlite,具体实现请看:源代码 唯一需要说明的是跨域问题: 跨域代码: <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Header…