ionic: install

ylbtech-ionic:install

 

1.Back to top
1、

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 >
try it"

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、
2.Back to top
 
3.Back to top
 
4.Back to top
 
5.Back to top
1、
2、
 
6.Back to top
 
warn 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.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325081076&siteId=291194637