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