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. Ionic targets iPhone and Android devices (currently). We support iOS 7+, and Android 4.1+. However, since there are a lot of different Android devices, it’s possible certain ones might not work. As always, we are looking for help testing and improving our device compatibility and would love help from the community on our GitHub project.
You can develop Ionic apps on any operating system you prefer. In fact, Ionic has been developed at various times on Mac OS X, Linux, and Windows. However, right now you’ll need to use the command line in order to follow this guide and you must have OS X in order to develop and deploy iPhone apps, so OS X is recommended if possible.
If you are on Windows, make sure to download and install Git for Windows and optionally Console2. You will be executing any commands in this guide in the Git Bash or Console2 windows.
First, we will go and install the most recent version of Apache Cordova, which will take our app and bundle it into a native wrapper to turn it into a traditional native app.
sudo apt-get install npm
To install Cordova, make sure you have Node.js installed, then run
$ sudo npm install -g cordova
Drop sudo from the above command if running on Windows. Depending on the platforms you wish to develop for, you’ll need to install platform-specific tools. Follow the Cordova platform guides for Android and iOS to make sure you have everything needed for development on those platforms. Luckily, you’ll only need to do this once.
Install Ionic
Ionic comes with a convenient command line utility to start, build, and package Ionic apps.
To install it, simply run:
$ sudo npm install -g ionic
Create the project
Now, we need to create a new Cordova project somewhere on the computer for the code for our app:
$ ionic start todo blank
That will create a folder called todo in the directory the command was run. Next, we will go into that directory and list the contents. Here is what the outer structure of your Ionic project will look like:
$ cd todo && ls
├── bower.json // bower dependencies
├── config.xml // cordova configuration
├── gulpfile.js // gulp tasks
├── hooks // custom cordova hooks to execute on specific commands
├── ionic.project // ionic configuration
├── package.json // node dependencies
├── platforms // iOS/Android specific builds will reside here
├── plugins // where your cordova/ionic plugins will be installed
├── scss // scss code, which will output to www/css/
└── www // application - JS code and libs, CSS, images, etc.
If you are planning on using any version control system, you can go ahead and set it up in this new folder.
Configure Platforms
Now, we need to tell ionic that we want to enable the iOS and Android platforms. Note: unless you are on MacOS, leave out the iOS platform:
Install a font is not difficult! After you have downloaded the font, extract it in a folder (the fonts are generally in a zip archive) then open a terminal in the folder where is your font then in this folder, type in the terminal (of course you must be root for this):
# mkdir -v /usr/share/fonts/myfonts (of course you can give another name than "myfonts") # mv nameofyourfont.ttf /usr/share/fonts/myfonts/ # cd /usr/share/fonts/myfonts/ # mkfontdir # mkfontscale # fc-cache -f -v
And hop, your fonts are incorporated to the system. After the last command, verify if you see the line:
K.I.S.S. ===> "Keep It Simple, Stupid" "Simplicity is the ultimate sophistication." (Leonardo da Vinci) "Everything should be made as simple as possible, but no simpler." (Albert Einstein)