Ionic requires node. JS Environment, official website Download: Http://nodejs.org/,node command is installed to/usr/local/bin by default
I. Installation Ionic
Mac OS X:
1. Install the Cordova and Ionic command-line tools:
sudo npm install-g Cordova Ionic
2. If you want to use the Ionic client iOS emulator to install the Ios-sim NPM package, command:
sudo npm-g install Ios-sim
#模块与命令的对应关系:
/usr/local/bin/ionic-/usr/local/lib/node_modules/ionic/bin/ionic
/usr/local/bin/cordova-/usr/local/lib/node_modules/cordova/bin/cordova
Two. New Project
Create a new project on the command line using an existing app template or a blank page:
Ionic start app_name blank #新建空白页
Ionic Start app_name Tabs #使用自带tab模板
Ionic start App_name Sidemenu #使用自带侧边菜单模板
< ({
Note: If you create a project under your home directory, you may encounter a problem that prompts mkdir:/home/myionic:operation not supported
Command before adding sudo also does not solve the problem, at this time need to do some file changes, as follows:
sudo vim/etc/
# # Automounter Master map#+auto_master # Use directory service/net -hosts -Nobrowse, hidefromfinder,nosuid#/Home auto_home -nobrowse,hidefromfinder/network/servers - fstab/- -static
Weichendemacbook-pro:home weichen$ sudo automount # does not reboot in case the setting takes effect
The above just comments off this line:/home Auto_home-nobrowse,hidefromfinder
}) >
Three. Configure the platform, run
Ionic's application is based on Cordova, so you can use Cordova's capabilities to create, test, and deploy apps, but the Ionic feature provides an easy way to do the same thing.
CD app_name/&& LS # Enter the project directory and display the file
(Ionic Platform add iOS) # make Ionic support iOS
Ionic Platform Add Android # makes Ionic support Android
(Ionic build iOS) # Create an iOS app
Ionic build Android # create Android App
(Ionic emulate iOS) # analog run, default with a set of running template programs
Run the Ionic build Android report with the following error resolution:
[error:please install Android target: " android-21 " . Hint:open the SDK Manager by running: /users/weichen/library/android/sdk/tools/ 1 . " sdk Platform " for android-21 2 . Android SDK platform-tools (latest) 3 . " android SDK build-tools " (latest)]
1. Ant Download: http://ant.apache.org/bindownload.cgi into/usr/local
2. Android SDK Download: http://developer.android.com/sdk/index.html into/usr/local
If you can't open it, you can go somewhere else. Download: http://my.oschina.net/58685474/blog/303825
3. Vim ~/.bash_profile Configuration Environment variables:
Export ant_home=/usr/local/apache-ant-1.9. 6 export Path=${path}:${ant_home}/binexport path=${path}:/usr/local/android-sdk-macosx/ Toolsexport PATH=${PATH}:/USR/LOCAL/ANDROID-SDK-MACOSX/SDKMake immediate effect, source ~/.bash_profile
4. Run on the command line:/usr/local/android-sdk-macosx/tools/android automatically into the management interface, the hint of things to check the optional.
①android SDK platform-tools (latest version)
②android SDK build-tools (latest version)
③android5.1.1 (API 21)
5. Ionic platform Add Android, ionic build Android complete.
Note: What Android system environment is installed by Platforms/android/project.properties and
platforms/android/cordovalib/project.properties inside the decision, but still with the default to install the environment, otherwise create a new project and reload the SDK environment again.
Four. Create your own app
Home Template index.html
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <title>Todo</title> <Metaname= "Viewport"content= "initial-scale=1, maximum-scale=1, User-scalable=no, Width=device-width"> <Linkhref= "Lib/ionic/css/ionic.css"rel= "stylesheet"> <Scriptsrc= "Lib/ionic/js/ionic.bundle.js"></Script> <!--Needed for Cordova/phonegap (would be a 404 during development)-
<script src= "Js/app.js" ></script><Scriptsrc= "Cordova.js"></Script> </Head> <body ng-app= "Todo"> </Body></HTML>
Ionic.bundle.js is a ionic AngularJS extension file that binds nganimate and ngsanitize, but if additional angular modules are needed, they need to be introduced from the lib/js/angular. The cordova.js must be the last script file that is not visible in the development file and is only introduced automatically when the app is run and simulated.
Menu case, add in body:
<Body> <Ion-side-menus> <!--menu Controller -- <ion-side-menu-content> <!--middle content area -- </ion-side-menu-content> <Ion-side-menuside= "Left"> <!--left, initially hidden menu-- </Ion-side-menu> </Ion-side-menus></Body>
Initialize the app and add it to our own js/app.js:
Angular.module (' Todo ', [' Ionic '])
This is the way to create an app with angular, which introduces the Ionic module used to handle the above label, now running or no content, the complete content is:
<BodyNg-app= "Todo"> <Ion-side-menus> <!--Center Content - <ion-side-menu-content> <Ion-header-barclass= "Bar-dark"> <H1class= "title">Todo</H1> </Ion-header-bar> <ion-content> </ion-content> </ion-side-menu-content> <!--Left Menu - <Ion-side-menuside= "Left"> <Ion-header-barclass= "Bar-dark"> <H1class= "title">Projects</H1> </Ion-header-bar> </Ion-side-menu> </Ion-side-menus></Body>
You can now run to see the content.
Five. Test your App
Test on the Desktop browser:
$ Ionic Build iOS
Ionic serve
Simulator test:
$ ionic Build ios$ Ionic emulate iOS
Run as native app:
$ Ionic Run Android
Six. Build
Https://ionicframework.com/docs
This article was written in 2014-12-26, it was Angular in the domestic rise, but until today released.
Now look at the development of hybrid app for the front-end library selection, if now using Angular, then choose Ionic is very easy to get started;
If you are using Vue or React, it is a good choice to choose Quasar Framework, FRAMEWORK7, and so on.
Link:https://www.cnblogs.com/farwish/p/4186601.html
[Ionic] Started with Ionic Framework (MACOSX)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
