关于IONIC框架初认识

新进击的菜鸟程序猿

首先就是配置环境咯,下载node.js,安装淘宝镜像

在 cmd命令大全输入cnpm init        cnpm install  gulp --save-dev    cnpm instal gulp-webserver --save-dev

开启本地服务gulp webserve

当然前提是你先把大概的文件都构架好  css  js (controllers  services) view文件夹  lib这个直接放进去用   gulp.js拦截服务请求的

直接利用tabs直接切换页面。

<ion-nav-bar class="bar-dark" >
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>

<ion-tabs class="tabs-icon-top">
<ion-tab title="东风" href="url" icon-on="ion-ios-chatbubble" icon-off="ion-ios-chatbubble-outline">
<ion-nav-view name="">

</ion-nav-view>
</ion-tab>
<ion-tab title="南风" href="url" icon-on="ion-ios-people" icon-off="ion-ios-people-outline">
<ion-nav-view name="">

</ion-nav-view>
</ion-tab>
<ion-tab title="西风" href="url" icon-on="ion-ios-timer" icon-off="ion-ios-timer-outline">
<ion-nav-view name="">

</ion-nav-view>
</ion-tab>
<ion-tab title="北风" href="url" icon-on="ion-ios-person" icon-off="ion-ios-person-outline">
<ion-nav-view name="">

</ion-nav-view>
</ion-tab>
</ion-tabs>

自由切换页面,然后就是没个页面的构造咯

一般老说主页面就是上面是轮播。然后收列标题。上拉加载,下拉刷新,这些都是相对应的API,很方便

时间: 2024-10-13 12:07:57

关于IONIC框架初认识的相关文章

ionic框架对Android返回键的处理

在HybridApp移动跨平台开发中,android平台会遇到一些比较特殊并难以解决的问题,这些问题在原生应用开发中很easy, Android的返回键处理就是问题之一,假如我们要实现一个在很多App中都有的在主页按返回键弹出对话框提示用户退出应用的功能,在原生应用开发中是很容易的,只要在onKeyUp事件里面对返回键事件进行处理就可以了.按2次返回键退出应用的Java代码如下: private long exitTime = 0; @Override public boolean onKeyD

基于AngularJS/Ionic框架开发的性能优化

AngularJS作为强大的前端MVVM框架,虽然已经做了很多的性能优化,但是我们开发过程中的不当使用还是会对性能产生巨大影响. 下面提出几点优化的方法: 1. 使用单次绑定符号{{::value}} AngularJS的性能优化方法之一是减少双向绑定.我们知道AngularJS的双向绑定是通过为每个需要双向绑定的数据对象添加$$watchers,一旦某个scope的数据发生了更新,就触发脏检测($digest),深度优先遍历所有scope对象的$$watchers值的old/new value

ionic框架环境配置

参考文章 Cordova 3.x 基础(1) -- 环境搭建(Windows / Android) http://rensanning.iteye.com/blog/2016364 phoneGap之Android环境搭建 http://haomou.net/2014/08/06/2014_phonegap_android/ ionic框架配置 http://haomou.net/2014/08/07/2014_ionic/ ant的配置 http://www.cnblogs.com/yuzho

基于ionic框架封装一个图片轮播指令的几点

在这里我想在项目中封装一个图片轮播的指令 (本项目使用的是ionic框架) 1)定义指令 define(['app'],function(myapp){ myapp.directive('myslidebanner',['$state',function(s){ return{ templateUrl:'directives/slide-banner/slide-banner.html', scope:{ banimg:'=',//数据的来源 }, link:function(s,el,atr)

软件测试学习笔记week 3 --- 测试框架初体验

测试框架初体验 在这周的软件测试课上,第一次了解了软件测试框架的概念.软件测试框架包含的范围非常广,从自动化测试框架到单元测试框架以及性能测试框架.在上个寒假中,在学习Coursera的在线课程时发现普林斯顿的单元测试做得非常强大,从程序正确性到Time consuming甚至Memory consuming,几乎能发现程序中的每一处错误或者缺陷.因此,在上完了这周的课程后,我查阅了一些资料,做了这篇随笔记录了解到的单元测试的知识. 一.什么是测试框架 要认识测试框架,首先要对所谓框架有概念.框

Angularjs和Ionic框架搭建webApp

本文原创版权归 简书作者 噜啦啦噜啦啦噜啦噜啦噜 所有,转载请联系作者获得授权,并于文章开头标注原创作者及出处,以示尊重! 文/噜啦啦噜啦啦噜啦噜啦噜(简书作者)原文链接:http://www.jianshu.com/p/ea0dcf1d31c9著作权归作者所有,转载请联系作者获得授权,并标注"简书作者". AngularJS简介:AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静

Ionic框架入门(原文翻译)

注: 从未做过翻译,打算学学Ionic框架,从网上未找到中文资料,看到官网上有一个入门资料,所以打算试着用自己半瓶子的英语做个翻译尝试.这是一个有些痛苦与长期的过程.翻译一部分,放一部分吧,一点一点的来.,原文地址:The Ionic Book The Ionic Book Ionic框架入门 Welcome to the official Ionic Book, where we will walk through the process of getting Ionic and all it

AVFoundation 框架初探究(二)

接着第一篇总结 系列第一篇地址:AVFoundation 框架初探究(一) 在第一篇的文章中,我们总结了主要有下面几个点的知识: 1.对AVFoundation框架整体的一个认识 2.AVSpeechSynthesizer这个文字转音频类 3.AVAudioPlayer音频播放类 4.AVAudioRecorder音频录制类 5.AVAudioSession音频会话处理类 上面第一篇说的内容,大致都是关于上面总结的,接着说说我们这第二篇总结什么?其实刚开始的时候,我是想按照<AVFoundati

ionic框架,快速开发webAPP神器。

官网地址 http://www.ionicframework.com/ 这个国外框架已经很火了.会使用插件的话更好,例如支付宝支付插件,调用摄像头拍照,二维码扫描,通讯录,文件上传,推送信息等等. 最主要的是界面的html+css搭建,框架里面的css已经很丰富了,手机上各种样式例子官网上都有,基本齐全. 在该项目目录里面运行命令 命令: 1. ionic start park tabs 创建 2.ionic platform add android 添加安卓平台 3. ionic build