YouTip LogoYouTip

Ionic Install

The examples on this site use Ionic v1.3.2, with the following CDN library addresses: The latest version of Ionic can be downloaded from: [http://ionicframework.com/docs/overview/#download](http://ionicframework.com/docs/overview/#download). After downloading and extracting the archive, it contains the following directories: css/ => Style files fonts/ => Font files js/ => Javascript files version.json => Version update notes You can also download the following resource files from Github: [https://github.com/driftyco/ionic](https://github.com/driftyco/ionic) (in the release directory). Next, we only need to include the css/ionic.min.css and js/ionic.bundle.min.js files from the above directories in our project to create an Ionic application. ## Example

Hello World!

My first Ionic app.

[Try it Β»](#) Click the "Try it" button to see the online example. This tutorial focuses on the application of the Ionic framework. Most examples run in the browser. For running on mobile devices, you can find detailed information in the following command-line installation tutorial. **Note:** In mobile applications like PhoneGap, we only need to add the corresponding js and css files to the asset library. * * * ## Command Line Installation First, you need to install [Node.js](#). We will use its NPM tool in the following installation. For more information about NPM, you can check our (#). Then, install the latest versions of Cordova and Ionic through the (https://npmjs.org/package/ionic). Refer to the official documentation for (http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html) and (http://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html) for installation. On Windows and Linux, open the command line tool and execute the following command: $ npm install -g cordova ionic On Mac systems, use the following command: sudo npm install -g cordova ionic _Tip: iOS requires installation and use under Mac OS X and Xcode environment._ If you have already 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 ### Creating an Application Use Ionic's official ready-made application templates or a blank project to create an Ionic application: $ ionic start myApp tabs ### Running the Ionic Project We Just Created Use the Ionic tool to create, test, and run your apps (or create directly via Cordova). ### Creating an Android Application $ cd myApp $ ionic cordova platform add android $ ionic cordova build android $ ionic cordova emulate android If everything is normal, the emulator will pop up, and the interface will look like this: !(#) ### Creating an iOS Application $ cd myApp $ ionic cordova platform add ios $ ionic cordova build ios $ ionic cordova emulate ios > If you encounter the error "ios-sim was not found.", you can execute the following command: > > npm install -g ios-sim If everything is normal, the emulator will pop up, and the interface will look like this: !(#) * * * ## Ionic Lab > Ionic Lab has currently stopped updating. Ionic Lab is a desktop development environment. If you don't like using the command line, Ionic Lab will meet your needs. Ionic Lab provides developers with a simpler way to start, compile, run, and simulate Ionic applications. Ionic Lab supports the following platforms: Windows, Mac OS X, Linux. The download address is: [http://lab.ionic.io/](http://lab.ionic.io/). After downloading, install it directly. The entire operation interface is as follows: !(#) Through the above interface, you can complete the following operations: * Create an application * Preview an application * Compile an application * Run an application * Upload an application * View run logs …… > It is recommended to use Sublime Text as the editor for Ionic projects. We can open the project directly in Sublime Text through Ionic Lab, as shown in the following figure: > > !(#) ### Gif Operation Demo !(#)
← C Exercise Example22Ionic Ion Radio β†’