Ionic学习

【学习笔记】ionic 学习之环境搭建

初学ionic ,后面会把学习的点滴和踩到坑全部记录下来 1.环境安装node.js 官网地址:https://nodejs.org/en/ 下载安装包安装.自己记住自己的安装路径哦安装完成后我们测试一下方法运行-cmd 在命令窗口输入node -v npm -v 这样说明你node安装成功了安装android开发环境下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-18802…

ionic学习教程地址梳理

Ionic是一个新的.可以使用HTML5构建混合移动应用的用户界面框架,它自称为是"本地与HTML5的结合".该框架提供了很多基本的移动用户界面范例,例如像列表(lists).标签页栏(tabbars)和触发开关(toggleswitches)这样的简单条目.它还提供了更加复杂的可视化布局示例,例如在下面显示内容的滑出式菜单. Ionic宣称他们极度强调性能,并且通过限制DOM交互.完全移除jQuery以及使用像translate(z)这种特定的硬件加速的CSS滤镜触发移动设备上GPU…

ionic 学习一

ionic 依赖angular.在学之前,我对angular进行了一下入门. 最近在看ionic,想做一些笔记,所以,写下这个随笔,有什么不对的请多多指教,刚开始学,后面还会学Apache Cordova,先一个一个来! 学ionic的基础 javascript html css angular.js 1.首先 ionic是什么? ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework ). 可以帮助您使用 Web 技术,比如…

Ionic 学习笔记

本文为原创,转载请注明出处: cnzt 文章:cnzt-p http://www.cnblogs.com/zt-blog/p/7831153.html 注: 本篇学习笔记基于Ionic 3.18.0 版本. 官网: http://ionicframework.com/ 正文: 新版的Ionic基于angular(gt 2.X),下面的截图是Ionic tutorial项目的目录结构. index.html -- 为主入口html文件,主要包含<ion-app></ion-ap…

Ionic学习笔记三 Gulp在ionic中的使用

简介 Gulp是一个基于流的自动化构建器. 安装 npm config set registry http://registry.npm.taobao.org ---最好用国内源 npm install -g gulp npm install --save-dev gulp 创建文件 gulpfile.js var gulp = require('gulp'); gulp.task('default', function() { // place code for your default ta…

Ionic学习笔记四一些问题处理

版权声明:本文为博主原创文章,转载请留链接,非常感谢. 目录(?)[+] IONIC actionsheet 的cancel menu在android下不显示的bug 在 _action-sheet.scss 有这个规则: .platform-android .action-sheet-cancel { display: none; } 1 2 3 可以在自定义的scsss文件加上: .platform-android .action-sheet-cancel { display: bl…

ionic学习笔记—常用命令

Ionic CLI介绍 Ionic CLI是开发Ionic应用程序过程中使用的主要工具.它就像一个瑞士军刀:它在一个界面下汇集了大量工具. CLI包含许多对Ionic开发至关重要的命令,例如start,build,serve和run. 它还包含emulate和info等命令,这些命令在某些情况下可以提供一些帮助. 详细请参考官方文档:https://ionicframework.com/docs/cli/ 常用命令创建Ionic3项目使用命令行进入工作目录,执行以下命令: ionic sta…

ionic学习笔记—创建项目

环境搭建: 安装node.js --> npm或cnpm --> 安装jdk --> 安装AndroidSDK --> 安装cordova --> 安装ionic --> 创建项目由于npm的服务器在国外,所以安装依赖的时候速度可能会很慢,这时候可以用cnpm来代替(安装淘宝镜像命令:npm install -g cnpm --registry=https://registry.npm.taobao.org ) 创建ionic项目 1.cd到要放…

Ionic学习笔记5_动态组件指令

1. 模态对话框 : $ionicModal 模态对话框常用来供用户进行选择或编辑,在模态对话框关闭之前,其他的用户交互行为被阻止 .操作模态对象返回结果,模态对象的方法提前定制. 三个步骤 1.声明对话框模板使用ion-modal-view指令声明对话框模板,对话框模板通常置入 script内以构造内联模板: <script id="a.html" type="text/ng-template"> <ion-modal-view> &l…

Ionic学习笔记4_ionic路由(页面切换)

1.1. ionic路由机制: 状态 1.2. ion-nav-view <body ng-controller="firstCtrl"> <a class="button" ui-sref="map">map</a> <a class="button" ui-sref="music">music</a> <a class="b…

Ionic学习笔记3_ionic指令简单布局

1) 添加引用类库(ionic样式和ionic js文件) 2) 标题栏,页脚栏,内容区 3) Js引入ionic类库,添加页面操作方法和对象 4) 数据初始化 5) Html页面绑定方法和对象 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <meta name="viewport"…

Ionic学习笔记1_基本布局

<body>  bar里嵌入子元素:title,button,button-bar和 input <div class="bar bar-header bar-dark item-input-inset"> <h1 class="title">Header</h1> 布局? item…

Ionic学习记录（一）：ionic及cordova安装、创建第一个应用、项目结构

目录: 一.ionic的安装二.创建第一个应用程序三.浏览器中预览应用四.项目结构五.添加页面一.ionic的安装使用Ionic创建和开发应用程序主要通过Ionic命令行实用程序(“CLI”),并使用Cordova构建和部署为本机应用程序. CLI:command-line interface的缩写,命令行界面,是指可在用户提示符下键入可执行指令的界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行. Cordova:是从PhoneGap中抽出的核心代码,是贡献…

ionic学习使用笔记（二） slide 组件的使用

开始做的时候,遇到了个要用ionic实现有一系列的序列需要展示,但是当前页面上只能展示一小部分,剩余的在没有出现时是隐藏的,还得能滑动出现,但是又不能有滚动条. 之前使用jQuery来实现的话,其实就是一个向左滑动的图片切换. 想着这个功能其实还是蛮常见的,ionic的framework应该能实现.然后就查看了一下文档,发现slides是可以实现的. 一开始直接粘贴了文档里面的代码,想着能自己直接修改样式来实现,设置slide宽度为20%,每次可展示5个序列.但是这样修改的话,使用this.s…

ionic学习使用笔记（一）版本更新及创建项目时遇到的问题解决

最近开始用ionic开发项目,虽然去年的时候用ionic 2.0 开发过公司的项目,不过现在的ionic已经升级到了ionic framework 3.0 了.而且还有个 ionic-cli . 使用 ionic start myapp tabs --v2 创建项目的时候,www文件里面没有index.html文件,使用ionic serve启动服务,浏览器里面打开也始终是 can't found index.html文件的错. 查了https://forum.ionicframework.co…

Ionic学习记录

1.跨域问题浏览器中的运行当你运行 ionic serve 时发生了什么呢? 启动了一个本地 web 服务器你的浏览器打开并定位到本地服务器地址这让你看着你的应用加载到你电脑上一个浏览器里,地址是:http://localhost:8100(如果你选择了 localhost的话). 你的 origin 就是 localhost:8100. 任何的发送到其他不是 localhost:8100 主机上的 AJAX 请求都会把localhost:8100作为他的 origin,这就会导致必须要…

1. 原来Http不能直接加在普通类里,下面的报错 import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Http } from '@angular/http'; @Component({ selector: 'page-about', templateUrl: 'about.html' }) export class AboutPage { const…

Ionic学习资源

http://www.qianduan.net/use-ionic-develop-hybrid-app/…

HTML5学习总结-番外03 Angular Ionic

一 Angular Angular使用了MVVC设计模式,MVVC在概念上是真正将页面与数据逻辑分离的模式,它把数据绑定工作放到一个JS里去实现,而这个JS文件的主要功能是完成数据的绑定,即把model绑定到UI的元素上. 1 下载地址 http://angularjs.org 2 学习教程开发工具: HBuilder 学习教程: http://www.runoob.com/angularjs/angularjs-tutorial.html 二 IONIC安装 1 安装环境 ionic 最新…

基于ionic+angulajs的混合开发实现地铁APP

基于ionic+angulajs的混合开发实现地铁APP 注:本博文为博主原创,转载时请注明出处. 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一.项目简介在该项目中的地铁app是基于ionic+angularjs开发的一款软件,其中使用了高德地图的开放接口(地铁JS API)网址为:http://lbs.amap.com/api/subway-api/subway-summary/.在该app中主要实现了,地铁线路图的整体展示,起点终点设置…

分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面

此篇文章主要整理了最近在使用 Ionic 开发 Hybrid App 过程中遇到的一些疑难点以及后期发布生成 iOS 和 Android 版本过程中的种种问题. 文章目录 Ionic 简介和项目需求介绍 View 缓存的处理键盘的不同模式的支持设备网络状况的检查 iOS 设备和 Android 设备的图标以及启动画面图片的批量生成下拉刷新反馈『意见及建议』调用邮件客户端的方法给 App 评分不同平台的办法集成极光推送打包 iOS .Android 平台的种种问题项目开源和下载 1…

ionic-native-transitions调用原生页面切换实现ionic路由切换

废话不多说:ionic-native-transitions调用原生页面切换实现ionic路由切换,从而大大提升ionic应用的性能. ionic-native-transitions是一个ionic的的页面切换插件,主要功能是可以让我们在不改变ionic路由的情况下,实现调用原生的页面切换,从而提升App性能.还可以让原生页面切换和ionic页面切换同时存在. ionic-native-transitions演示图片: ionic-native-transitions github地址 :…

Ionic之顺带APP

1:Ionic简介官方:我们设计ionic来帮助 web 开发人员能够像开发网站一样开发出强大的移动APP应用. ionic是一个html5开发APP的框架,在开发运行效率可以说是最好的H5框架,把传统的JS开发变成面向对象开发,可控性比较好(个人实在是驾驭不了代码量较大的JS). 2:Ionic版“顺带”APP项目项目地址:https://github.com/DaLeiGe/Ionic-shundai 结合这十来天对ionic的学习,使用ionic重新开发了一个我参加计算机作品赛时的项目…

ionic+angulajs

基于ionic+angulajs的混合开发实现地铁APP 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一.项目简介在该项目中的地铁app是基于ionic+angularjs开发的一款软件,其中使用了高德地图的开放接口(地铁JS API)网址为:http://lbs.amap.com/api/subway-api/subway-summary/.在该app中主要实现了,地铁线路图的整体展示,起点终点设置,界面清空,线路查询,出发地与目的地线路查…

ionic + angular + cordova, 打造专属自己的App！

ionic 学习地址:http://ionicframework.com/ ionic 好处: ionic serve --lab 预览平台间的差异化 sass 提供app的样式配置 consolelogs 方便终端的日志跟踪我的第一款专属App,<我的豆瓣> 1.0 发布了,用了将近2天的时间做出来了. apk 链接下载地址:http://pan.baidu.com/s/1jGBZzG6 截图如下:…

Web前端开发推荐阅读书籍、学习课程下载

转自http://www.xuanfengge.com/fe-books.html 前言学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学习和跟着有经验的同事学习,读书也是必不可少的.书中有着相对完整的知识体系,每读一本好书都会带来一次全面的提高. 而如果深一脚浅一脚的学习,写出代码的质量会参差不齐.初学者的首要任务是成为靠谱的熟练开发者,能够稳定的输出有一定质量的代码. 前端技术发展速度特别快,总是涌现出很多新的东西,需要不断的学习…

Ionic开发Hybrid App问题总结

http://ionichina.com/topic/5641b891b903cba630e25f10 http://www.cnblogs.com/parry/p/issues_about_build_hybrid_app_with_ionic.html 作者:Parry 出处:http://www.cnblogs.com/parry/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 此篇文章主要整理了最近在…

ionic slide组件使用

ionic学习使用笔记 slide 组件的使用开始做的时候,遇到了个要用ionic实现有一系列的序列需要展示,但是当前页面上只能展示一小部分,剩余的在没有出现时是隐藏的,还得能滑动出现,但是又不能有滚动条. 之前使用jQuery来实现的话,其实就是一个向左滑动的图片切换. 想着这个功能其实还是蛮常见的,ionic的framework应该能实现.然后就查看了一下文档,发现slides是可以实现的. 一开始直接粘贴了文档里面的代码,想着能自己直接修改样式来实现,设置slide宽度为20%,每…

170多个Ionic Framework学习资源（转载）

在Ionic官网找到的学习资源:http://blog.ionic.io/learning-ionic-in-your-living-room/ 网上的文章比较多,但是很多时候我们很难找到自己需要的.下面这些资源覆盖面很广,看一下有没有你需要的: PS:嫌麻烦的可以直接在这里找:http://thompsonemerson.github.io/ionic-collection/ 太多了,就不一一翻译了,哪些英文不懂的就百度或留言 Ionic Basics Hello World: Your Fi…

Ionic 入门与实战之第一章：Ionic 介绍与相关学习资源

原文发表于我的技术博客本文是「Ionic 入门与实战」系列连载的第一章,主要对 Ionic 的概念.发展历程.适配的移动平台等知识进行了介绍,并分享了 Ionic 相关的学习资源. 原文发表于我的技术博客 1. Ionic 简介在前端技术发展越来越快的今天,Hybrid App 开发技术也受到了很大的影响.Ionic 在 2013 年发布第一个版本,目前已经发布到了 2.0 Beta 6 (2016/04/25),是一个比较成熟,也是发展比较快的一个 Hybrid App 开发框架. 1.1…

【Ionic学习】的更多相关文章