Ionic 是一個用HTML, CSS 跟JS 開發的一個用于移動裝置的web app 開發架構,采用 Sass與AngularJS 開發。
windows環境配置：
1.安裝nodejs，上篇文章有介紹。
2.安裝cordova和ionic
cmd： npm install -g cordova ionic
3：建立項目：ionic start testapp blank
ionic start testapp blank
ionic start testapp tabs
ionic start testapp sidemenu
上面3個指令是并行的，執行一個就可以。Inoic提供了幾個不同的模闆為項目初始化用，你可以根據需求選擇，它會在目前指令目錄下建立testApp檔案，并将對應代碼Download到檔案夾中。
:
官網上介紹的：就可以直接運作了
但是如果要在虛拟機上看到效果還需要一些配置一個android開發環境或者Xcode。
是以為了友善，直接在浏覽中浏覽。因為是web項目，是以浏覽器更能了解。
我們通過gulp來配置web項目。
安裝：gulp也是基于nodejs的，是以
cd demoapp
npm install -g gulp
npm install 如果想要在編輯項目的工程中，同步自動重新整理頁面，我們還需要npm install gulp-connect.現在我們看到demoapp項目中，有一個gulpfile.js檔案，這是gulp的配置檔案，我們現在隻要對它進行一下配置就可以運作項目了，代碼如下
:
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']);
配置完之後運作：
gulp
就能看到以下截圖
ionic---手機移動Webapp架構，環境配置 這就代表你已經成功運作起來了。
在浏覽器中輸入：http://localhost:8080就能看到效果了！
貌似IE浏覽器支援不是很好，是以建議火狐或者Google浏覽器更合适。
借鑒出處：http://my.oschina.net/blogshi/blog/261012
http://www.zhouwenbin.com/