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>

示例项目

github - IonicDemo

ionic搭建与基础的更多相关文章

  1. 搭建webpack基础配置

    搭建webpack基础步骤: 1.去官方网站下载node.js(根据自己电脑的系统类型选择) 2.安装node.js完成后打开cmd命令提示符: 出现版本号证明安装成功 3.cd到工程目录下 npm ...

  2. 测试那些事儿—Linux搭建环境基础步骤

    Linux搭建环境基础步骤 准备工具:SecureCRT工具(Linux工具,连接服务器)FTP传输工具(上传文件到服务器)MySQL连接工具 安装包(以下文件均为压缩包rpm格式和tar.gz):J ...

  3. 搭建Istio基础环境

    需求 搭建istio基础环境(基于1.5.1版本) 安装步骤 在安装 Istio 之前,需要一个运行着 Kubernetes 的环境,安装步骤可以参考前面的文章 下载istio,然后解压,然后将 is ...

  4. 搭建SSM基础环境>基于idea

    目录 搭建SSM基础环境 创建一个Web项目 导入所需要的jar包 在项目目录下创建一个Resources文件夹并设置为类路径 在src目录下创建项目的初始文件夹目录 在resources文件夹下创建 ...

  5. 买错的电影票，含着泪也得看-LAMP搭建&Linux基础

    hi 没说过,上周五室友过生请客,在龙湖里吃嗨了喝爽了,回去的路上侃侃而谈.说好的这周一起去看年内最后的大片,火星救援的,谁知道老子眼神不好,买错了电影的时间...把周六的约定提前到了今儿个下午,ma ...

  6. 01scala环境搭建和基础

    1.环境搭建 1.下载安装jdk1.7以上版本,并进行环境变量的配置 2.下载scala-2.10.4.msi,安装后进行环境变量的配置 3.下载scala-SDK-4.1.1-vfinal-2.11 ...

  7. SpringCloud笔记二：搭建项目基础框架

    目录 搭建框架 新建父工程 新建子工程api 新建子工程提供者provider 新建消费者consumer 总结 搭建框架 我们的SpringCloud微服务框架是父子工程,有一个父工程,剩下的都是子 ...

  8. Redis学习系列二之.Net开发环境搭建及基础数据结构String字符串

    一.简介 Redis有5种基本数据结构,分别是string.list(列表).hash(字典).set(集合).zset(有序集合),这是必须掌握的5种基本数据结构.注意Redis作为一个键值对缓存系 ...

  9. 【入门教程】kafka环境搭建以及基础教程

    问题导读 1.Kafka独特设计在什么地方?2.Kafka如何搭建及创建topic.发送消息.消费消息?3.如何书写Kafka程序?4.数据传输的事务定义有哪三种?5.Kafka判断一个节点是否活着有 ...

随机推荐

  1. SQLite 之 C#版 System.Data.SQLite 使用

    简介 SQLite简介 SQLite,是一款轻型的关系型数据库.它的设计目标是嵌入式. 它能够支持Windows/Linux/Unix等等主流的操作系统,同时能够跟很多程序语言相结合,比如 C++.C ...

  2. 【JAVAWEB学习笔记】08_MySQL&JDBC回顾

    今天晨读单词: CRUD:增删改查(create/read/update/delete)create:新增项目read:查询update:修改delete:删除 desc 表名:查看表结构drop:删 ...

  3. Neo4j 第二篇：图形数据库

    在深入学习图形数据库之前,首先理解属性图的基本概念.一个属性图是由顶点(Vertex),边(Edge),标签(Lable),关系类型和属性(Property)组成的有向图.顶点也称作节点(Node), ...

  4. 《JAVA与模式》之命令模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述命令(Command)模式的: 命令模式属于对象的行为模式.命令模式又称为行动(Action)模式或交易(Transaction)模式. ...

  5. 第十五章（附）分布式缓存-Memcached

    一.概念 Memcached是danga.com(运营LiveJournal的技术团队)开发的一套分布式内存对象缓存系统,用于在动态系统中减少数据库负载,提升性能. 二.适用场合 1.分布式应用.由于 ...

  6. JQuery版评分控件

    Hi All, 分享一个学习JQuery做的一个评分控件. 需求:当鼠标移动到 ‘☆’ 上时,该字符左边的 ‘☆’ 变成 '★',该字符右边仍然是 ‘☆’, 并显示相应星星数的评价结果:当鼠标推出 ‘ ...

  7. 《算法4》2.1 - 选择排序算法(Selection Sort), Python实现

    选择排序算法(Selection Sort)是排序算法的一种初级算法.虽然比较简单,但是基础,理解了有助于后面学习更高深算法,勿以勿小而不为. 排序算法的语言描述: 给定一组物体,根据他们的某种可量化 ...

  8. R语言的高质量图形渲染库Cairo（转）

    前言 R语言不仅在统计分析,数据挖掘领域,计算能力强大.在数据可视化上,也不逊于昂贵的商业.当然,背后离不开各种开源软件包的支持,Cairo就是这样一个用于矢量图形处理的类库. Cairo可以创建高质 ...

  9. Zepto源码分析-架构

    构造函数 Zepto.js 是专门为智能手机浏览器推出的javascript库, 拥有与和jQuery相似的语法. 它的优点是精简,压缩后5-10K. 不支持IE MIT开源协议 结构   http: ...

  10. 一起学习java

    一.Servlet学习      下面是Servlet一个整体的继承结构       首先说一下Servlet这个接口这个主要包含的有init,service,destroy等方法,这里主要介绍这3个 ...