ylbtech-ionic:install |
1.Back to top |
ionic install
The instance of this site uses the ionic v1.3.2 version, and the CDN library address used:
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
The latest version of ionic download address: http://ionicframework.com/docs/overview/#download .
After downloading, unzip the compressed package, which contains the following directories:
css / => style file fonts / => font file js / => Javascript file version.json = > version update instructions
You can also download the following resource files on Github: https://github.com/driftyco/ionic (in the release directory).
Next, we only need to import the css/ionic.min.css and js/ionic.bundle.min.js files in the above directory into the project to create an ionic application.
example
<ion-header-bar class="bar-positive"> <h1 class="title">Hello World!</h1> </ion-header-bar> < ion-content > < p > My first ionic app. </ p > </ ion-content >
Click the "Try It Out" button to see an online example.
This tutorial focuses on the application of the ionic framework. Most of the examples run in the browser. Running on mobile devices can be learned in detail in the following command-line installation tutorial.
Note: In mobile applications such as phonegap, we only need to add the corresponding js and css files to the resource library.
command line installation
First of all, you need to install Node.js , and we need to use its NPM tool in the next installation. For more NPM introduction, you can check our NPM introduction .
Then install the latest versions of cordova and ionic via command line tools . Install by referring to the official Android and iOS documentation.
Open the command line tool on Windows and Linux and execute the following command:
$ npm install -g cordova ionic
Use the following commands on Mac systems:
sudo npm install -g cordova ionic
Tip: IOS needs to be installed and used under Mac Os X. and Xcode environment.
If you have installed the above environment, you can execute the following command to update the version:
npm update -g cordova ionic
or
sudo npm update -g cordova ionic
Create an app
Create an ionic application using the ready-made application templates provided by ionic official, or a blank project:
$ ionic start myApp tabs
Run the ionic project we just created
Create, test, and run your apps with the ionic tool (or directly via Cordova).
Create an Android app
$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android
If everything goes well, the emulator will pop up, and the interface will look like this:
Create an iOS app
$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
If you get the "ios-sim was not found." error, you can execute the following command:
npm install -g ios-sim
If everything goes well, the emulator will pop up, and the interface will look like this:
Ionic Lab
Ionic Lab is a desktop development environment, if you don't like to use the command line, Ionic Lab will meet your needs.
Ionic Lab provides developers with an easier way to start, compile, run, and simulate running Ionic applications.
The platforms supported by Ionic Lab are: Window, Mac OS X, Linux. The download address is: http://lab.ionic.io/ , and you can install it directly after downloading. The entire operation interface is as follows:
Through the above interface you can complete the following operations:
- Create an app
- Preview the app
- Compile the application
- run the app
- Upload app
- Run log view ……
It is recommended to use Sublime Text as the editor of the Ionic project. We can directly open the project on Sublime Text through Ionic Lab, as shown below:
Gif operation demonstration
2.Back to top |
3.Back to top |
4.Back to top |
5.Back to top |
6.Back to top |
Author: ylbtech Source: http://ylbtech.cnblogs.com/ The copyright of this article belongs to the author and the blog garden. Reprints are welcome, but this statement must be retained without the author's consent, and a link to the original text is given in an obvious position on the article page, otherwise Reserve the right to pursue legal responsibility. |