Previous: All About Ionic. Chapter 2: Installation. In this chapter, we are going to walk through the process of downloading Ionic and installing all necessary dependencies for development. Platform notes. First, we need to start with a note about minimum requirements for building your app with the current release of Ionic. Jun 26, 2020. Ionic is a shining example of a high-quality framework that takes advantage of Angular's power and flexibility, enabling developers to build production-ready mobile apps and Progressive Web Apps, in a fraction of the time. The more I look at Ionic, the more I love what they are doing.
PhoneGap, Apache Cordova, and Ionic are frameworks for developing mobile application with single HTML, CSS, and JavaScript/TypeScript code base and targeting various mobile platforms, including Android.
Ionic Framework Installation. Npm install -g ionic. Execute the above command in Git Bash to install Ionic Framework. If everything is successfully installed, you are set to develop a hybrid mobile application. To get installed version of ionic use below command. So far, you have set up Ionic Framework.
Before you start
- Install and enable the PhoneGap/Cordova plugin on the Settings/Preferences | Plugins page as described in Installing plugins from JetBrains repository.
- Make sure you have Node.js on your computer.
- Download and install an emulator tool depending on the target platform and the operating system you use. Learn more from the Cordova official website.
- To emulate the iOS platform, install the ios-sim and ios-deploy command-line tools globally.Open the embedded Terminal (Alt+F12) and type:
npm install -g ios-sim
npm install -g ios-deploy
Installing PhoneGap, Cordova, and Ionic
In the embedded Terminal (Alt+F12) , type one of the following commands:
npm install -g phonegap@latest
Learn more from the PhoneGap official website.npm install -g cordova
Learn more from the Cordova official website.npm install -g @ionic/cli
Learn more from the Ionic CLI official website.
You can also install your package on the Node.js and NPM page as described in npm, pnpm, and Yarn.
Creating a new PhoneGap, Cordova, or Ionic application
If you have no application yet, you can generate a IntelliJ IDEA project with PhoneGap, Cordova, or Ionic-specific structure from a boilerplate template. Alternatively, create an empty IntelliJ IDEA project and configure PhoneGap, Cordova, or Ionic support in it.
Create an application from a template
![Ionic framework bluetooth Ionic framework bluetooth](/uploads/1/2/6/7/126779867/956456804.png)
- Select File | New | Project from the main menu or click the New Project button on the Welcome screen.
- In the New Project dialog, select JavaScript in the left-hand pane.
- In the right-hand pane, choose Cordova App and click Next.
- On the second page of the wizard, specify the project name and the folder to create it in. Specify the location of the executable file. Depending on your operating system and target platform, this can be phonegap, phonegap.cmd, cordova, cordova.cmd, ionic, or ionic.cmd.
- When you click Finish, IntelliJ IDEA generates a skeleton of an application with the framework-specific structure.
Starting with an existing PhoneGap, Cordova, or Ionic application
To continue developing an existing application, open it in IntelliJ IDEA, download the required dependencies, and configure PhoneGap, Cordova, or Ionic support in your project.
Configure PhoneGap, Cordova, or Ionic in your project
- Open the Settings/Preferences dialog Ctrl+Alt+S and go to Languages and Frameworks | JavaScript | Cordova.
- Check the location of the executable file or specify the path to it if IntelliJ IDEA has not detected the executable automatically. This can be phonegap, phonegap.cmd, cordova , cordova.cmd, ionic, or ionic.cmd, depending on your operating system and the selected framework.IntelliJ IDEA detects the installed version and displays it in the Cordova version read-only field.
- In the Cordova working directory field, specify the folder where the application files to run are stored.
- By default, IntelliJ IDEA automatically treats the platforms or www directory as excluded and ignores it during indexing, parsing, and code completion, see Configuring folders in a content root.To preserve this default behavior, make sure the Automatically exclude working directories ('platforms', 'www' for ionic) checkbox is selected.
Download Ionic Framework For Mac Iso
Running PhoneGap, Cordova, and Ionic applications
PhoneGap, Cordova, and Ionic applications are executed according to a dedicated run/debug configuration.
Create a run configuration
- From the main menu, choose Run | Edit Configurations. In the Edit Configuration dialog that opens, click on the toolbar and choose Cordova from the context menu.
- In the Run/Debug Configuration: Cordova dialog that opens, specify the following:
- The name of the configuration.
- In the Cordova executable field, specify the location of the executable file phonegap, phonegap.cmd, cordova , cordova.cmd, ionic, or ionic.cmd, depending on your operating system and the selected framework.
- In the Cordova working directory field, specify the folder where the application files to run are stored.
- From the Command list, choose the command to run. The contents of the list, depend on the actually used framework, namely, on the executable file specified in the Cordova executable field. The available options are:
- For PhoneGap:
- emulate
- run
- prepare
- serve
- remote build
- remote run
See PhoneGap CLI for a list of PhoneGap-specific commands with descriptions. - For Cordova:
- emulate
- run
- prepare
- serve
See Cordova CLI for a list of Cordova-specific commands with descriptions. - For Ionic:
- emulate
- run
- prepare
- serve
See Ionic CLI for a list of Ionic-specific commands with descriptions.
- From the Platform list, choose the platform for which the application is intended.The available options are:
- Android
- iOS
To emulate this platform, install the ios-sim and ios-deploy command-line tools globally.Open the embedded Terminal (Alt+F12) and type:npm install -g ios-sim
npm install -g ios-deploy
- browser
- amazon-fireos
- firefoxos
- blackberry10
- ubuntu
- wp8
- windows
- windows8
Learn more about targeted platforms from the Platform Guides. - For Cordova and Ionic, specify the targeted virtual or physical Android device to run the application on: select the Specify Target checkbox and select the required device from the list.The list shows all the virtual and physical devices that are currently configured on your machine. Learn more about setting up emulators from the Cordova official website.If IntelliJ IDEA displays the following error message: Cannot detect ios-sim in path, make sure you have installed the
ios-sim
, see Before you start.
![Framework Framework](https://tudip.com/wp-content/uploads/2019/04/How-to-publish-an-ionic-app-for-android.png)
Run an application
Download Ionic Framework For Mac Operating System
- Select the newly created run configuration from the list on the main toolbar and click next to the list.
Ionic is a framework for developing mobile applications with HTML, CSS, and JavaScript. Ionic applications run as native applications and have a native 'look and feel'.
Ionic Framework Tutorial
Ionic is built on the AngularJS framework and provides a complete solution to design, build, and package mobile applications. Design is accomplished with a collection of template tools and a custom icon library. Ionic provides custom CSS/SASS components as well as Javascript UI Extensions. Ionic apps can be built, emulated, and packaged with their Command Line Interface (CLI).
Ionic templates are dynamic and responsive and adapt to their environment to provide a native 'look and feel'. This adaptation includes layout, style, and icons. Ionic makes independent platform customization available as well. Because Ionic apps use front end web technology, they can also be viewed in a browser for faster development.
Download Ionic Framework For Mac 64-bit
Ionic apps are built on top of Apache Cordova by default. They have access to all Cordova Plugins which let you use native functionality, such as push notifications, camera, accelerometer, etc. Cordova apps work on multiple platforms and devices (phones, tablets, etc.) with very little extra effort. Cordova may be switched out with other cross-platform technologies such as trigger.io.