1. 环境配置
http://www.zhouwenbin.com/ionic%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/
这篇文章主要讲讲ionic的安装和新建项目，gulp自动化环境和服务器的搭建，安卓的打包和模拟。
安装node.js，打开命令行，安装cordova和ionic
$ npm install -g cordova ionic
新建项目，在命令行输入
$ ionic start myApp tabs
新建一个带底部标签的页面
也可以输入
$ ionic start myApp blank
新建一个空白页面
还可以输入
$ ionic start myApp sidemenu
新建一个带侧边栏的页面
项目用到gulp来做自动化项目构建，在nodejs命令行输入
cd myApp npm install -g gulp npm install gulp
这样就安装了gulp和一些模块
如果需要配置一个web服务器，并且配置自动刷新livereload，在命令行输入
npm install gulp-connect
修改gulpfile.js文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
var gulp = require(‘gulp‘);var concat = require(‘gulp-concat‘);var sass = require(‘gulp-sass‘);var minifyCss = require(‘gulp-minify-css‘);var rename = require(‘gulp-rename‘);var connect = require(‘gulp-connect‘); var paths = { sass: [‘./scss/**/*.scss‘]}; gulp.task(‘sass‘, function(done) { gulp.src(‘./scss/ionic.app.scss‘) .pipe(sass()) .pipe(gulp.dest(‘./www/css/‘)) .pipe(minifyCss({ keepSpecialComments: 0 })) .pipe(rename({ extname: ‘.min.css‘ })) .pipe(gulp.dest(‘./www/css/‘)) .on(‘end‘, done);}); gulp.task(‘watch‘, function() { gulp.watch(paths.sass, [‘sass‘]); gulp.watch([‘./www/*.html‘], [‘html‘]);}); gulp.task(‘connect‘, function() { connect.server({ root: ‘www‘, livereload: true });});gulp.task(‘html‘, function () { gulp.src(‘./www/*.html‘) .pipe(connect.reload());});gulp.task(‘default‘, [‘connect‘,‘sass‘,‘watch‘]); |
修改index.html文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<ion-side-menus> <!-- Center content --> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <h1 class="title">Todo</h1> </ion-header-bar> <ion-content> </ion-content> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">Projects</h1> </ion-header-bar> </ion-side-menu> </ion-side-menus> |
在浏览器输入http://localhost:8080/www/，就可以看到效果了。
| 变量名 | 变量值 |
| ANT_HOME | C:\apache-ant |
| JAVA_HOME | C:\Program Files\Java\jdk1.7.0_55 |
| PATH | ;C:\adt-bundle\sdk\platform-tools;C:\adt-bundle\sdk\tools;%JAVA_HOME%\bin;%ANT_HOME%\bin |
$ cd myApp $ ionic platform add android $ ionic build android $ ionic emulate android
如果仿真出现错误，输入如下命令
d:\zwb\ionic\myApp>android.bat list targets
Available Android targets:
----------
id: 1 or "android-19"
Name: Android 4.4.2
Type: Platform
API level: 19
Revision: 3
Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (def
XGA720, WXGA800, WXGA800-7in
Tag/ABIs : default/armeabi-v7a
d:\zwb\ionic\myApp>android create avd --name myApp --target 1
就能看到android模拟器的运行了,点击“HelloCordova”，就能在模拟器里面看到项目了。
$ sudo npm install -g cordova ionic $ sudo npm install -g ios-sim $ sudo xcodebulid -license //一路回车最后输入agree $ ionic start myapp tabs $ cd myApp $ ionic platform add ios $ ionic build ios $ ionic emulate ios
这篇文章主要讲讲开发环境的配置，这个还是配了挺久的，接下来的文章会讲讲组件的使用，还有怎么配合angularjs来实现交互。
原文：http://www.cnblogs.com/vinsonliudk/p/3987435.html