ionic搭建与基础
ionic搭建与基础
一.环境搭建
安装
npm install -g cordova
npm install -g ionic
创建 项目
ionic start MyProject blank
ionic start myApp sidemenu
ionic start myApp tabs
平台创建
ionic platform add ios
ionic platform add android
项目刷新，build
cordova prepare ios
ionic build ios
ionic emulate ios
项目测试
ionic serve
二.项目构成
|-index.html
引用各种js,
定义程序主模块 <body ng-app="module-name">，
主界面（一般于body内只定义一个 <ion-nav-view></ion-nav-view> ,达到局部切换templates的效果）
|-app.js
定义程序主 module,
配置入口方法run,
视图配置config（使用ui-router进行跳转）
|-AppCtrl.js
根Controller,其他Controller继承AppCtrl，可以调用AppCtrl的方法
三.明细
1.定义module
angular.module('app.controllers', [])
2.定义controllers
// 定义 root controller (该controller绑定到menu 抽象 view ,可以作为menu 下的所有模块的父controller)
angular.module('app.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $stateParams,$ionicActionSheet) {
});
//定义Sub Controller（此处为在其他模块的js中定义Controller的方法）
angular.module('app.controllers')
.controller('SubCtrl', function($scope, $state, $ionicPopup) {
});
3.service
//定义一个全局Service模块
angular.module('app.services', [])
//定义一个service
.service('AppService', ['$state',function ($state) {
this.initAppInfo = function(){
console.log('init my app');
};
}]);
4.SideMenu
<ion-side-menus>
<!-- 中间部分 -->
<ion-side-menu-content>
</ion-side-menu-content>
<!-- 左边部分 -->
<ion-side-menu side="left">
</ion-side-menu>
<!-- 右边部分 -->
<ion-side-menu side="right">
</ion-side-menu>
</ion-side-menus>
每个小模块的结构
<ion-view title="模块标题">
<!--主要内容-->
<ion-content >
<div>content</div>
</ion-content>
</ion-view>
示例项目
ionic搭建与基础的更多相关文章
- 搭建webpack基础配置
搭建webpack基础步骤: 1.去官方网站下载node.js(根据自己电脑的系统类型选择) 2.安装node.js完成后打开cmd命令提示符: 出现版本号证明安装成功 3.cd到工程目录下 npm ...
- 测试那些事儿—Linux搭建环境基础步骤
Linux搭建环境基础步骤 准备工具:SecureCRT工具(Linux工具,连接服务器)FTP传输工具(上传文件到服务器)MySQL连接工具 安装包(以下文件均为压缩包rpm格式和tar.gz):J ...
- 搭建Istio基础环境
需求 搭建istio基础环境(基于1.5.1版本) 安装步骤 在安装 Istio 之前,需要一个运行着 Kubernetes 的环境,安装步骤可以参考前面的文章 下载istio,然后解压,然后将 is ...
- 搭建SSM基础环境>基于idea
目录 搭建SSM基础环境 创建一个Web项目 导入所需要的jar包 在项目目录下创建一个Resources文件夹并设置为类路径 在src目录下创建项目的初始文件夹目录 在resources文件夹下创建 ...
- 买错的电影票，含着泪也得看-LAMP搭建&Linux基础
hi 没说过,上周五室友过生请客,在龙湖里吃嗨了喝爽了,回去的路上侃侃而谈.说好的这周一起去看年内最后的大片,火星救援的,谁知道老子眼神不好,买错了电影的时间...把周六的约定提前到了今儿个下午,ma ...
- 01scala环境搭建和基础
1.环境搭建 1.下载安装jdk1.7以上版本,并进行环境变量的配置 2.下载scala-2.10.4.msi,安装后进行环境变量的配置 3.下载scala-SDK-4.1.1-vfinal-2.11 ...
- SpringCloud笔记二：搭建项目基础框架
目录 搭建框架 新建父工程 新建子工程api 新建子工程提供者provider 新建消费者consumer 总结 搭建框架 我们的SpringCloud微服务框架是父子工程,有一个父工程,剩下的都是子 ...
- Redis学习系列二之.Net开发环境搭建及基础数据结构String字符串
一.简介 Redis有5种基本数据结构,分别是string.list(列表).hash(字典).set(集合).zset(有序集合),这是必须掌握的5种基本数据结构.注意Redis作为一个键值对缓存系 ...
- 【入门教程】kafka环境搭建以及基础教程
问题导读 1.Kafka独特设计在什么地方?2.Kafka如何搭建及创建topic.发送消息.消费消息?3.如何书写Kafka程序?4.数据传输的事务定义有哪三种?5.Kafka判断一个节点是否活着有 ...
随机推荐
- 分享一个完整的Mybatis分页解决方案
Mybatis 的物理分页是应用中的一个难点,特别是配合检索和排序功能叠加时更是如此. 我在最近的项目中开发了这个通用分页器,过程中参考了站内不少好文章,阅读源码帮助更大minglisoft.cn/t ...
- python之配置logging的几种方式
作为开发者,我们可以通过以下3中方式来配置logging: 1)使用Python代码显式的创建loggers, handlers和formatters并分别调用它们的配置函数: 2)创建一个日志配置文 ...
- SpringMVC中的java.lang.ClassNotFoundException: org.aspectj.weaver.BCException 调试过程记录
报错原因 上文本描述 java.lang.NoClassDefFoundError: org/aspectj/weaver/BCException at java.lang.Class.getDecl ...
- JBoss快速入门知识
1.下载地址: http://www.jboss.org/jbossas/downloads
- 四、 添加模型Model（ASP.NET MVC5 系列）
在这一章节中我们将添加一些classes类来管理数据库中的movies.这些classes类就是ASP.NET MVC应用程序中的"model". 我们将用.NET框架中的数据访问 ...
- 详解Centos默认磁盘分区
对于有经验的Linux系统管理员,在安装系统之前都会对系统的分区进行规划:针对这一需求,下面就通过默认的Centos分区与大家分享一些关于Linux系统的知识.Linux系统的磁盘命名规范:硬盘类型标 ...
- Windows、Office系列产品精华部分集锦
提示 有了这个帖子麻麻再也不用担心我因为四处找Microsoft家的软件和系统而四处劳累所烦恼了! 首先,你们最爱的老XP同志,XP同志虽然退休了,但是依然坚持在岗位上,向他致敬!! Windows ...
- Python可视化：Seaborn库热力图使用进阶
前言 在日常工作中,经常可以见到各种各种精美的热力图,热力图的应用非常广泛,下面一起来学习下Python的Seaborn库中热力图(heatmap)如何来进行使用. 本次运行的环境为: windows ...
- Python教程(2.2)——数据类型与变量
和C/C++.Java一样,Python也有数据类型和变量两个概念. 数据类型 Python中的几个基本数据类型为整数(integer/int).浮点数(float/float).布尔值(boolea ...
- 通过wireshark学习Traceroute命令(UDP,ICMP协议)
traceroute: 通过TTL限定的ICMP/UDP/TCP侦测包来发现从本地主机到远端目标主机之间的第三层转发路径.用来调试网络连接性和路由问题. mtr: traceroute的一个变种,能根 ...