ionic笔记

ionic教程网站:http://www.ionic.wang/ 1.ui-router路由简介 https://blog.csdn.net/mcpang/article/details/55101566 2.内联模版 1.<div ng-include="'a.html'"></div> 2.var partial = $templateCache.get("a.html"); 3.使用$http 服务 $http.get("a.…

ionic button笔记

源码文件:_button.scss 和 _button-bar.scss,以及_variables.scss(66行-163行). 按钮是手机app不可或缺的一部分,不同风格的app,需要的按钮多种多样,按钮的设置涉及按钮的大小.颜色.状态等.下面将对ionic的按钮样式做一一笔记. ionic button样式 ionic默认提供9种颜色风格: $light: #fff !default; $stable: #f8f8f8 !default; $positive: #4a87ee !defau…

Ionic开发笔记

Ionic 开发笔记记录开发中遇到的一些问题 ion-side-menu,使所有顶部导航标题居中  <ion-side-menu-content> <ion-nav-bar class="bar-stable" align-title="center"> <ion-nav-back-button> </ion-…

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 开发笔记

1.AngularJS 外部的控制器(DOM 事件.外部的回调函数如 jQuery UI 空间等)调用了 AngularJS 函数之后,必须调用$apply.在这种情况下,你需要命令 AngularJS 刷新自已(模型.视图等), $apply 就是用来做这件事情的.代码举例: var app = angular.module("myApp", []); app.controller('firstController',function($scope){ $scope.name = '…

【学习笔记】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学习笔记三 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 做微站,项目中难免遇到一些问题.总结如下: 1. 改了Slidebox 动态绑定图片时,页面会显示一片空白,改变窗口大小的时候,图片就出来了,说明动态绑定图片时,需要手动去重绘页面,即调用$ionicSlideBoxDelegate.Update()方法. 动态绑定之后图片不会循环播放,需要在控制器中写行代码:$ionicSlideBoxDelegate.$getByHandle("slideboximgs").loop(true); slideb…

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…

观《phonegap第三季 angularjs+ionic视频教程实时发布》学习笔记（三）

十五.ionic路由 1.ionic中内联模板介绍使用内联模板内联模板的使用,常见的有几种情况.(1) 使用ng-include指令可以利用ng-include指令在HTML中直接使用内联模板,例如: <div ng-include="'a.html'"></div> 注意:其中a.html是一个字符串常量,需要使用单引号包裹起来.(2)使用$templateCache服务也可以直接使用$templateCache服务的方法get()从模板缓存中读出其内容:…

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…

ios ionic 装平台笔记

1.安装cnpm : npm install -g cnpm --registry=https://registry.npm.taobao.org 2.An error occurred when I was running ” ionic cordova platform add ios “.It noticed me with the information : Using cordova-fetch for cordova-ios@^4.4.0This problem had been r…

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命令笔记

Ionic命令:ionic serve 开启服务调试ionic cordova prepare android 生成android原生项目 ionic cordova run browser 打包成混合app项目ionic build 打包成单页面ionic build android 编译项目apkionic build android -–prod –-release 用--prod编译项目apk并签名ionic emulate android 运行项目apk 手机连接在手机运行模拟器连接…

3.2 配置构建Angular应用——简单的笔记存储应用

本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记展示.创建.修改和删除笔记在笔记中使用Markdown格式同步编辑和预览Markdown 本应用已经包含了基础的HTML和CSS代码,还有一个用Node写的简单的RESTful服务器,用于管理笔记,这样我们就可以专注于Angular而不是API.我们学习的重点是如何把Angular加入其中并学习它的重要特性. 3.2.1 获取项目文件…

Ionic2学习笔记（10）：扫描二维码

作者: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 基于这种情况,大家还是静静…

Ionic2学习笔记（9）：访问本地设备

作者: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中,增加如下代…

Ionic2学习笔记（8）：Local Storage& SQLite

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

Ionic2学习笔记（7）：Input

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

Ionic2学习笔记（6）：Navigation

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

Ionic2学习笔记（5）：Provider

作者: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…

Ionic2学习笔记（0）：HelloWorld

作者:Grey 原文地址:http://www.cnblogs.com/greyzeng/p/5529153.html 操作系统: Windows 10 环境配置: Node.js Java SE Development Kit Android SDK Visual Studio Emulator for Android(可采用其他模拟器,真机,或者Chrome浏览器模拟) Visual Studio Code(官方推荐三款IDE) 安装命令: npm install -g ionic@beta…

Ionic2学习笔记（3）：Pipe

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5538630.html Pipe类似过滤器,比如,在一个字符串要展现在页面之前, 我们需要对这个字符串进行一些操作,比如:将字符串转化为大写,加一个前缀/后缀…… Pipe的作用就是来实现类似的需求: 模型如下: 假设一个字符串: "hello", 我们在展示这个字符串的时候,需要先转换为大写, 然后加一个后缀 " WORLD", 最后字符串展示的效果是HELLO WO…

Ionic2学习笔记（2）：自定义Component

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5536298.html 上一篇提到,Ionic2提供了很多Component供使用,例如: <ion-title></ion-title> <ion-icon></ion-icon> 等我们可以创建自定义Component, 如: <new-component></new-component> 我…

【ionic笔记】的更多相关文章