释义如下：
├── bower.json // bower dependencies
├── config.xml // cordova configuration
├── gulpfile.js // gulp tasks
├── hooks // custom cordova hooks to execute on specific commands
├── ionic.project // ionic configuration
├── package.json // node dependencies
├── platforms // iOS/Android specific builds will reside here
├── plugins // where your cordova/ionic plugins will be installed
├── scss // scss code, which will output to www/css/
└── www // application - JS code and libs, CSS, images, etc.
一：安装。
注意:如果要在ios simulator或ios device中运行ionic应用，还需要通过npm安装ios-sim和ios-deploy
➜ ~ $ npm install -g ionic cordova ios-sim ios-deploy
➜ ~ $ ionic info
Your system information:
Cordova CLI: 5.3.3
Ionic CLI Version: 1.7.7
Ionic App Lib Version: 0.6.3
ios-deploy version: 1.8.2
ios-sim version: 5.0.3
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.1 Build version 7B91b
➜ github $ ionic start HelloIonic tabs
Creating Ionic app in folder /Users/cyper/github/HelloIonic based on tabs project
Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip
[=============================] 100% 0.0s
Downloading: https://github.com/driftyco/ionic-starter-tabs/archive/master.zip
[=============================] 100% 0.0s
Updated the hooks directory to have execute permissions
Update Config.xml
Initializing cordova project
Adding in iOS application by default
Added ios platform
Your Ionic project is ready to go! Some quick tips:
* cd into your project: $ cd HelloIonic
* 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.html
* 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 ionic docs
Visit the Ionic docs: http://ionicframework.com/docs
Create an ionic.io account to send Push Notifications and use the Ionic View app?
(Y/n): y
+---------------------------------------------------------+
+ New Ionic Updates for October 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/
+
+---------------------------------------------------------+
➜ github $ cd HelloIonic
total 64
-rw-r--r-- 1 cyper staff 29B Oct 31 11:07 .bowerrc
-rw-r--r-- 1 cyper staff 242B Oct 31 11:07 .editorconfig
-rw-r--r-- 1 cyper staff 138B Oct 31 11:07 .gitignore
-rw-r--r-- 1 cyper staff 118B Oct 31 11:07 bower.json
-rw-r--r-- 1 cyper staff 864B Oct 31 11:12 config.xml
-rw-r--r-- 1 cyper staff 1.4K Oct 31 11:07 gulpfile.js
drwxr-xr-x 4 cyper staff 136B Oct 31 11:07 hooks/
-rw-r--r-- 1 cyper staff 43B Oct 31 11:12 ionic.project
-rw-r--r-- 1 cyper staff 616B Oct 31 11:12 package.json
drwxr-xr-x 4 cyper staff 136B Oct 31 11:12 platforms/
drwxr-xr-x 10 cyper staff 340B Oct 31 11:12 plugins/
drwxr-xr-x 3 cyper staff 102B Oct 31 11:07 scss/
drwxr-xr-x 8 cyper staff 272B Oct 31 11:12 www/
➜ HelloIonic $ ionic serve
Multiple addresses available.
Please select which address to use by entering its number from the list below:
1) 192.168.1.103 (en0)
2) 9.112.118.60 (wc4)
3) 10.80.8.6 (ppp0)
4) localhost
Address Selection: 4
Selected address: localhost
Running live reload server: http://localhost:35729
Watching: 0=www/**/*, 1=!www/lib/**/*
Running dev server: http://localhost:8100
Ionic server commands, enter:
restart or r to restart the client app from the root
goto or g and a url to have the app navigate to the given url
consolelogs or c to enable/disable console log output
serverlogs or s to enable/disable server log output
quit or q to shutdown the server and exit
ionic $在执行ionic serve命令后，会在chrome browser中打开应用的首界面。
新建项目时可选的模块工程有：
➜ HelloIonic $ ionic start --list
Downloading Starter Templates - http://code.ionicframework.com/content/starter-templates.json
Ionic Starter templates
blank ................ A blank starter project for Ionic
complex-list ......... A complex list starter template
maps ................. An Ionic starter project using Google Maps and a side menu
salesforce ........... A starter project for Ionic and Salesforce
sidemenu ............. A starting project for Ionic using a side menu with navigation in the content area
tabs ................. A starting project for Ionic using a simple tabbed interface
tests ................ A test of different kinds of page navigation
➜ HelloIonic $二、添加android支持
q退出，然后ionic platform add android (和cordova命令一样）
会打印出：
add to body class: platform-android
Installing "cordova-plugin-console" for android
Installing "cordova-plugin-device" for android
Installing "cordova-plugin-splashscreen" for android
Installing "cordova-plugin-statusbar" for android
Installing "cordova-plugin-whitelist" for android
Installing "ionic-plugin-keyboard" for android
Saving platform to package.json file |
然后
ionic build android
打印出：
Total time: 16.007 secs
Built the following apk(s):
/Users/cyper/github/HelloIonic/platforms/android/build/outputs/apk/android-debug.apk|
在android模拟器上跑
android avd //如果是第一次开发android，通过此命令能打开AVD Manager
android list avd // 这是android命令，可以列出你在AVD Manager中创建的所有模拟器,
ionic emulate android --target=Nexus5API19 //这里我使用先前通过AVD Manager创建好的Nexus5API19
在我的Android Nexus5手机上跑：(图略）
ionic run android
三、添加ios支持
ionic platform add ios(提示ios平台默认已经添加）ionic build ios
在iOS simulator中跑。
ionic emulate ios
在我的iphone6 plus中跑（图略）
ionic run ios
如何debug?
http://stackoverflow.com/questions/28678851/how-to-debug-ionic-webapp
http://stackoverflow.com/questions/31486645/intellij-idea-webstorm-and-angularjs-ionic
参考： http://ionicframework.com/docs/guide/installation.html
扫一扫
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
