Starting With Ionic3

Posted by Anoop Nair on September 19, 2017 Tags: Angular Ionic

What are we starting today ?

Today we will be starting with ionic framework which helps us to build hybrid apps i.e. with the same code base we can create apps for Android, IOS, and Windows. Ionic is a complete open source SDK for hybrid app development. It is built on top of Angular and Apache Cordova. If you know Angular 2/4 the working with ionic will be easy.

If you don't know angular 2/4 then don't worry we will learn it on the way.

In this blog I am not going to debate on which is better Native app or hybrid app. In my view both have their own best use cases. But I suggest you to google it so that you have an idea what you are getting into.

Let's Start

Before creating the project file we have to install Ionic and cordova in our machine, we will do it via Git Bash but you can also use terminal / command prompt.

So to install ionic and cordova globally run the following command from your command line. A quick note the "$" sign is just to show that it's a terminal command, and help you to know that it's a new line.

    
      $ npm install -g ionic cordova
    
  

Now once its installed we can create our project and for that we will use the Ionic-Cli because its really easy to use and speed up the workflow. Run the following command in command line and it will clone some github repositories and create our project folder.

    
      $ ionic start projectName sidemenu
    
  

Here "sidemenu" is an ionic template and you have a couple more prebuilt templates that you can choose. The sidemenu template create an app with a hamburger sliding sidemenu. Some other template are:-

    
      $ ionic start projectName blank    // it creates a blank template
      $ ionic start projectName tabs     // creates an app with three tabs at the bottom like instagram app.
      $ ionic start projectName super    // it's a starter template with 14 sample pages
      $ ionic start projectName tutorial // it's a guided ionic template

      // the default template is the tabs template.
    
  

After running the command you will get a project folder with the following tree structure. The src folder is the place where we will be playing around for the majority of time.

output


This blog will be the starting point of mostly all the blogs on ionic so I will end this blog here and I will explain more about the files and ionic in other blogs where we will be code something.



COMMENTS