Ionic 项目创建

1.安装 nodejs 

  到官网下载 https://nodejs.org/ ,下载完直接安装就好了。 

   以下命令查看是否安装成功：

Administrator@YANL /
$ node -v
v0.12.2

Administrator@YANL /
$ npm -v
2.7.4

 

 

2. 安装git

   到官网下载：http://git-scm.com/download/win

   安装完成后，把安装目录\bin添加到Path环境变量：

    如：Path = %Path%;C:\Program Files (x86)\Git\bin

 3.安装 android sdk tools

   baidu 搜索：Android SDK Tools，下载并安装，安装完成后，在程序菜单中找到"SDK Manager" 启动下载  android sdk.

   需要下载：  Android SDK Platform-tools,Android SDK Build-tools及最新版的Android sdk

   下载完成后自动安装。 

   添加环境变量：ANDROID_HOME :指向Android SDK Tools安装目录

   在Path环境变量中添加：%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

4.安装ANT

    到http://ant.apache.org/ 下载ANT后，解压

    添加环境变量： ANT_HOME=解压目录

    在Path环境变量中添加：%ANT_HOME%\bin

5.安装JAVA 

   到官网下载Java ,安装完成后，添加环境变量 JAVA_HOME=java安装或解压目录

   在Path环境变量中 添加：%JAVA_HOME%\bin

6.安装 ionic 和 cordova 

   

npm install -g cordova ionic

 

   安装完成后，就可以运行npm和cordova命令了：

   

Administrator@YANL /
$ ionic -v
1.3.22

Administrator@YANL /
$ cordova -v
5.0.0

 6.创建工程

   

$ ionic start TestApp blank
Creating Ionic app in folder e:\cordova_workspace\TestApp based on blank proje


Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip
[=============================]  100%  0.0s

Downloading: https://github.com/driftyco/ionic-starter-blank/archive/master.zi
[=============================]  100%  0.0s

Update config.xml
Initializing cordova project
Updated the hooks directory to have execute permissions
running cordova plugin add org.apache.cordova.device
WARNING: org.apache.cordova.device has been renamed to cordova-plugin-device.
u may not be getting the latest version! We suggest you `cordova plugin rm org
pache.cordova.device` and `cordova plugin add cordova-plugin-device`.
Fetching plugin "org.apache.cordova.device" via cordova plugins registry
npm http GET http://registry.cordova.io/org.apache.cordova.device
npm http 304 http://registry.cordova.io/org.apache.cordova.device
Saving plugin to package.json file
Adding since there was no existingPlugin
Updated the hooks directory to have execute permissions
running cordova plugin add org.apache.cordova.console
WARNING: org.apache.cordova.console has been renamed to cordova-plugin-console
You may not be getting the latest version! We suggest you `cordova plugin rm o
.apache.cordova.console` and `cordova plugin add cordova-plugin-console`.
Fetching plugin "org.apache.cordova.console" via cordova plugins registry
npm http GET http://registry.cordova.io/org.apache.cordova.console
npm http GET http://registry.cordova.io/org.apache.cordova.console
npm http GET http://registry.cordova.io/org.apache.cordova.console
Saving plugin to package.json file
Adding since there was no existingPlugin
Updated the hooks directory to have execute permissions
running cordova plugin add com.ionic.keyboard
Fetching plugin "com.ionic.keyboard" via cordova plugins registry
npm http GET http://registry.cordova.io/com.ionic.keyboard
npm http GET http://registry.cordova.io/com.ionic.keyboard
npm http 304 http://registry.cordova.io/com.ionic.keyboard
Saving plugin to package.json file
Adding since there was no existingPlugin

Your Ionic project is ready to go! Some quick tips:

 * cd into your project: $ cd TestApp

 * Setup this project to use Sass: ionic setup sass

 * Develop in the browser with live reload: ionic serve

 * Add a platform (ios or Android): ionic platform add ios [android]
   Note: iOS development requires OS X currently
   See the Android Platform Guide for full Android installation instructions:
   https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.ht


 * Build your app: ionic build <PLATFORM>

 * Simulate your app: ionic emulate <PLATFORM>

 * Run your app on a device: ionic run <PLATFORM>

 * Package an app using Ionic package service: ionic package <MODE> <PLATFORM>

For more help use ionic --help or visit the Ionic docs: http://ionicframework.
m/docs

+---------------------------------------------------------+
+ New Ionic Updates for May 2015
+
+ The View App just landed. Preview your apps on any device
+ http://view.ionic.io
+
+ Invite anyone to preview and test your app
+ ionic share EMAIL
+
+ Generate splash screens and icons with ionic resource
+ http://ionicframework.com/blog/automating-icons-and-splash-screens/
+
+---------------------------------------------------------+

   为项目添加运行平台：

  

$ ionic platform add android
Updated the hooks directory to have execute permissions
Downloading Default Ionic Resources

Downloading: https://github.com/driftyco/ionic-default-resources/archive/master.
zip
[=============================]  100%  0.0s
Done adding default Ionic resources
Adding icons for platform: android
running cordova platform add android
npm http GET https://registry.npmjs.org/cordova-android/4.0.0
npm http GET https://registry.npmjs.org/cordova-android/4.0.0
npm http 200 https://registry.npmjs.org/cordova-android/4.0.0
npm http GET https://registry.npmjs.org/cordova-android/-/cordova-android-4.0.0.
tgz
npm http 200 https://registry.npmjs.org/cordova-android/-/cordova-android-4.0.0.
tgz
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: com.ionicframework.testapp395516
        Name: TestApp
        Activity: MainActivity
        Android target: android-22
Copying template files...
Android project created with cordova-android@4.0.0
Running command: "c:\Program Files\nodejs\node.exe" e:\cordova_workspace\TestApp
\hooks\after_prepare\010_add_platform_class.js e:/cordova_workspace/TestApp
add to body class: platform-android
Installing "com.ionic.keyboard" for android
Installing "org.apache.cordova.console" for android
Installing "org.apache.cordova.device" for android
Saving platform to package.json file

 7.查看项目目录结构

    

 

WWW目录结构：

 
   index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-pane>
  </body>
</html>

 8.安装js模块（可以不安装）

     package.json如下：

      

{
  "name": "testapp",
  "version": "1.0.0",
  "description": "TestApp: An Ionic project",
  "dependencies": {
    "gulp": "^3.5.6",
    "gulp-sass": "^1.3.3",
    "gulp-concat": "^2.2.0",
    "gulp-minify-css": "^0.3.0",
    "gulp-rename": "^1.2.0"
  },
  "devDependencies": {
    "bower": "^1.3.3",
    "gulp-util": "^2.2.14",
    "shelljs": "^0.3.0"
  },
  "cordovaPlugins": [
    "org.apache.cordova.device",
    "org.apache.cordova.console",
    "com.ionic.keyboard"
  ],
  "cordovaPlatforms": [
    "android"
  ]
}

    在项目目录下运行：

    mpm install ，安装package.json中的依赖的js模块

  

$ npm install
npm WARN package.json testapp@1.0.0 No repository field.
npm WARN package.json testapp@1.0.0 No README data
-


> node-sass@2.1.1 install e:\cordova_workspace\TestApp\node_modules\gulp-sass\no
de_modules\node-sass
> node scripts/install.js

/


> node-sass@2.1.1 postinstall e:\cordova_workspace\TestApp\node_modules\gulp-sas
s\node_modules\node-sass
> node scripts/build.js

`win32-x64-node-0.12` exists; testing
Binary is fine; exiting
gulp-rename@1.2.2 node_modules\gulp-rename

shelljs@0.3.0 node_modules\shelljs

gulp-minify-css@0.3.13 node_modules\gulp-minify-css
├── memory-cache@0.0.5
├── bufferstreams@0.0.2 (readable-stream@1.0.33)
├── through2@0.6.5 (xtend@4.0.0, readable-stream@1.0.33)
├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
├── clean-css@3.0.10 (commander@2.5.1, source-map@0.1.43)
└── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, object-assign@2.0.0, a
rray-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, lodash._reint
erpolate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, lodash.template@3.5.1, chalk@
1.0.0, vinyl@0.4.6, dateformat@1.0.11, multipipe@0.1.2)

gulp-concat@2.5.2 node_modules\gulp-concat
├── through2@0.6.5 (xtend@4.0.0, readable-stream@1.0.33)
├── concat-with-sourcemaps@1.0.2 (source-map@0.4.2)
└── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, object-assign@2.0.0, a
rray-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, lodash._reint
erpolate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, lodash.template@3.5.1, chalk@
1.0.0, vinyl@0.4.6, dateformat@1.0.11, multipipe@0.1.2)

gulp-util@2.2.20 node_modules\gulp-util
├── lodash._reinterpolate@2.4.1
├── minimist@0.2.0
├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-colo
r@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
├── vinyl@0.2.3 (clone-stats@0.0.1)
├── dateformat@1.0.11 (get-stdin@4.0.1, meow@3.1.0)
├── through2@0.5.1 (xtend@3.0.0, readable-stream@1.0.33)
├── multipipe@0.1.2 (duplexer2@0.0.2)
└── lodash.template@2.4.1 (lodash.values@2.4.1, lodash.templatesettings@2.4.1
, lodash._escapestringchar@2.4.1, lodash.defaults@2.4.1, lodash.keys@2.4.1, loda
sh.escape@2.4.1)

gulp@3.8.11 node_modules\gulp
├── pretty-hrtime@0.2.2
├── interpret@0.3.10
├── deprecated@0.0.1
├── archy@1.0.0
├── tildify@1.0.0 (user-home@1.1.1)
├── v8flags@2.0.5 (user-home@1.1.1)
├── minimist@1.1.1
├── semver@4.3.4
├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-colo
r@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream
@0.1.5)
├── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, object-assign@2.0.0, a
rray-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, lodash._reint
erpolate@3.0.0, replace-ext@0.0.1, vinyl@0.4.6, through2@0.6.5, multipipe@0.1.2,
 dateformat@1.0.11, chalk@1.0.0, lodash.template@3.5.1)
├── vinyl-fs@0.3.13 (graceful-fs@3.0.6, mkdirp@0.5.0, strip-bom@1.0.0, vinyl@
0.4.6, defaults@1.0.2, through2@0.6.5, glob-watcher@0.0.6, glob-stream@3.1.18)
└── liftoff@2.0.3 (extend@2.0.1, flagged-respawn@0.3.1, resolve@1.1.6, findup
-sync@0.2.1)

gulp-sass@1.3.3 node_modules\gulp-sass
├── map-stream@0.1.0
├── clone@0.1.19
├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
├── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, object-assign@2.0.0, a
rray-uniq@1.0.2, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, lodash._re
evaluate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, lodash.template@3.5.1, chalk@
1.0.0, vinyl@0.4.6, dateformat@1.0.11, through2@0.6.5, multipipe@0.1.2)
└── node-sass@2.1.1 (get-stdin@4.0.1, object-assign@2.0.0, replace-ext@0.0.1,
 nan@1.8.4, semver@4.3.4, mkdirp@0.5.0, meow@3.1.0, cross-spawn@0.2.9, chalk@0.5
.1, npmconf@2.1.1, gaze@0.5.1, mocha@2.2.4, pangyp@2.2.0, sass-graph@1.3.0, requ
est@2.55.0)

bower@1.4.1 node_modules\bower
├── is-root@1.0.0
├── junk@1.0.1
├── stringify-object@1.0.1
├── abbrev@1.0.5
├── chmodr@0.1.0
├── user-home@1.1.1
├── rimraf@2.3.3
├── archy@1.0.0
├── bower-logger@0.2.2
├── bower-endpoint-parser@0.2.2
├── graceful-fs@3.0.6
├── opn@1.0.2
├── lockfile@1.0.0
├── lru-cache@2.6.2
├── retry@0.6.1
├── nopt@3.0.1
├── tmp@0.0.24
├── q@1.4.0
├── semver@2.3.2
├── fstream@1.0.6 (inherits@2.0.1)
├── mout@0.11.0
├── mkdirp@0.5.0 (minimist@0.0.8)
├── p-throttler@0.1.1 (q@0.9.7)
├── request-progress@0.3.1 (throttleit@0.0.2)
├── promptly@0.2.0 (read@1.0.5)
├── bower-json@0.4.0 (intersect@0.0.3, deep-extend@0.2.11, graceful-fs@2.0.3)

├── chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-colo
r@1.3.1, strip-ansi@2.0.1, has-ansi@1.0.3)
├── github@0.2.4 (mime@1.3.4)
├── shell-quote@1.4.3 (array-map@0.0.0, array-reduce@0.0.0, array-filter@0.0.
1, jsonify@0.0.0)
├── which@1.1.1 (is-absolute@0.1.7)
├── handlebars@2.0.0 (uglify-js@2.3.6, optimist@0.3.7)
├── cardinal@0.4.4 (ansicolors@0.2.1, redeyed@0.4.4)
├── bower-config@0.6.1 (osenv@0.0.3, graceful-fs@2.0.3, mout@0.9.1, optimist@
0.6.1)
├── tar-fs@1.5.0 (pump@1.0.0, tar-stream@1.1.4)
├── decompress-zip@0.1.0 (mkpath@0.1.0, touch@0.0.3, binary@0.3.0, readable-s
tream@1.1.13)
├── insight@0.5.3 (object-assign@2.0.0, async@0.9.0, lodash.debounce@3.0.3, o
s-name@1.0.3, tough-cookie@0.12.1)
├── bower-registry-client@0.3.0 (graceful-fs@2.0.3, request-replay@0.2.0, rim
raf@2.2.8, lru-cache@2.3.1, mkdirp@0.3.5, async@0.2.10, request@2.51.0)
├── request@2.53.0 (caseless@0.9.0, json-stringify-safe@5.0.0, aws-sign2@0.5.
0, forever-agent@0.5.2, stringstream@0.0.4, oauth-sign@0.6.0, tunnel-agent@0.4.0
, isstream@0.1.2, node-uuid@1.4.3, qs@2.3.3, combined-stream@0.0.7, form-data@0.
2.0, mime-types@2.0.11, tough-cookie@1.1.0, http-signature@0.10.1, bl@0.9.4, haw
k@2.3.1)
├── configstore@0.3.2 (object-assign@2.0.0, xdg-basedir@1.0.1, osenv@0.1.0, u
uid@2.0.1, js-yaml@3.3.1)
├── inquirer@0.8.0 (figures@1.3.5, ansi-regex@1.1.1, mute-stream@0.0.4, throu
gh@2.3.7, readline2@0.1.1, chalk@0.5.1, lodash@2.4.2, rx@2.5.2, cli-color@0.3.3)

├── fstream-ignore@1.0.2 (inherits@2.0.1, minimatch@2.0.7)
├── glob@4.5.3 (inherits@2.0.1, once@1.3.2, inflight@1.0.4, minimatch@2.0.7)
└── update-notifier@0.3.2 (is-npm@1.0.0, string-length@1.0.0, semver-diff@2.0
.0, latest-version@1.0.0)

    安装browser-sync js模块：(用于与gulp结合使用，开启web服务，供浏览器访问页面)

$ npm install browser-sync --save-dev
npm WARN package.json testapp@1.0.0 No repository field.
npm WARN package.json testapp@1.0.0 No README data
npm WARN optional dep failed, continuing fsevents@0.3.6
\


> ws@0.5.0 install e:\cordova_workspace\TestApp\node_modules\browser-sync\node_m
odules\socket.io\node_modules\engine.io\node_modules\ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

|
e:\cordova_workspace\TestApp\node_modules\browser-sync\node_modules\socket.io\no
de_modules\engine.io\node_modules\ws>if not defined npm_config_node_gyp (node "c
:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\nod
e-gyp\bin\node-gyp.js" rebuild )  else (rebuild)
/


> ws@0.4.31 install e:\cordova_workspace\TestApp\node_modules\browser-sync\node_
modules\socket.io\node_modules\socket.io-client\node_modules\engine.io-client\no
de_modules\ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)


e:\cordova_workspace\TestApp\node_modules\browser-sync\node_modules\socket.io\no
de_modules\socket.io-client\node_modules\engine.io-client\node_modules\ws>if not
 defined npm_config_node_gyp (node "c:\Program Files\nodejs\node_modules\npm\bin
\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (reb
uild)
browser-sync@2.7.1 node_modules\browser-sync
├── async-each-series@0.1.1
├── query-string@1.0.1
├── emitter-steward@0.0.1
├── opn@1.0.2
├── dev-ip@1.0.1
├── ua-parser-js@0.7.7
├── browser-sync-client@2.0.2
├── immutable@3.7.2
├── portscanner@1.0.0 (async@0.1.15)
├── easy-extender@2.3.1 (lodash@2.4.2)
├── connect@3.3.5 (utils-merge@1.0.0, parseurl@1.3.0, debug@2.1.3, finalhandl
er@0.3.4)
├── lodash@3.8.0
├── serve-index@1.6.4 (escape-html@1.0.1, parseurl@1.3.0, batch@0.5.2, debug@
2.2.0, mime-types@2.0.11, http-errors@1.3.1, accepts@1.2.7)
├── resp-modifier@2.0.1 (minimatch@2.0.7)
├── serve-static@1.9.2 (utils-merge@1.0.0, escape-html@1.0.1, parseurl@1.3.0,
 send@0.12.2)
├── chokidar@1.0.1 (is-glob@1.1.3, arrify@1.0.0, glob-parent@1.2.0, async-eac
h@0.1.6, is-binary-path@1.0.0, readdirp@1.3.0)
├── localtunnel@1.5.0 (debug@0.7.4, request@2.11.4, optimist@0.3.4)
├── anymatch@1.3.0 (arrify@1.0.0, micromatch@2.1.6)
├── foxy@10.1.2 (cookie@0.1.2, http-proxy@1.11.1)
├── eazy-logger@2.1.2 (opt-merger@1.1.0, tfunk@3.0.1)
├── meow@3.1.0 (object-assign@2.0.0, minimist@1.1.1, camelcase-keys@1.0.0, in
dent-string@1.2.1)
├── browser-sync-ui@0.5.8 (connect-history-api-fallback@0.0.5, angular-saniti
ze@1.3.15, angular-route@1.3.15, angular-touch@1.3.15, angular@1.3.15, stream-th
rottle@0.1.3, weinre@2.0.0-pre-I0Z7U9OV)
└── socket.io@1.3.5 (debug@2.1.0, has-binary-data@0.1.3, socket.io-parser@2.2
.4, socket.io-adapter@0.3.1, engine.io@1.5.1, socket.io-client@1.3.5)

   在项目目录下有gulpfile.js，是gulp运行时的配置文件，打开该文件添加：

   

var browserSync = require('browser-sync');

// Start the server
gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: "./www" //web服务的根
    },
    port:3000 //web服务的端口
  });
});
// Reload all Browsers
gulp.task('bs-reload', function () {
  browserSync.reload();
});
var files = [
  './www/*.html',
  './www/img/**/*.*',
  './www/views/**/*.html',
  './www/js/**/*.js',
  './www/css/**/*.css'
];
// Watch scss AND html files, doing different things with each.
gulp.task('server', ['browser-sync'], function () {
  gulp.watch(files, ['bs-reload']);//检测文件，如有变化自动更新浏览器的显示
});