Get start with ionic framework

When I first developed apps using ionic, not many resources over the net will provide good explanation on it. I've found one and it is very easy to understand.

Here is the structure of ionic framework after it successfully execute ionic start command; for example 

ionic start myfirst blank --v2

>> ionic start [your_apps_name] [template] [ionic_framework_version]

the command will create a new folder (myfirst) and construct the following structures

├── hooks // custom cordova hooks to execute on specific commands 

├── platforms // iOS/Android specific builds will reside here 

├── plugins // where your cordova/ionic plugins will be installed 

├── resources // icon and splash screen 

├── scss // scss code, which will output to www/css/

 |── www // application - JS code and libs, CSS, images, etc. 

      |---------css //customs styles 

      |---------img //app images 

      |---------js //angular app and custom JS 

      |---------lib //third party libraries 

      |---------index.html //app master page 

├── bower.json // bower dependencies 

├── config.xml // cordova configuration 

├── gulpfile.js // gulp tasks 

├── ionic.project // ionic configuration 

├── package.json // node dependencies

The structure is shared by Chris Nwamba at https://scotch.io/tutorials/create-your-first-mobile-app-with-angularjs-and-ionic

Following are current potential templates that you can use:

• tabs : a simple 3 tab layout
• sidemenu: a layout with a swipable menu on the side
• blank: a bare starter with a single page
• super: starter project with over 14 ready to use page designs
• tutorial: a guided starter project

Once it is completed, you will get to see the following message appear:
Downloading: https://github.com/driftyco/ionic2-app-base/archive/master.zip
Downloading: https://github.com/driftyco/ionic2-starter-                   sidemenu/archive/master.zip                                                
Installing npm packages (may take a minute or two)...                      
-                                                                          
♬ ♫ ♬ ♫  Your Ionic app is ready to go! ♬ ♫ ♬ ♫                          
                                                                           
Some helpful tips:                                                         
                                                                           
Run your app in the browser (great for initial development):               
  ionic serve                                                              
                                                                           
Run on a device or simulator:                                              
  ionic run ios[android,browser]                                           
                                                                           
Share your app with testers, and test on device easily with the Ionic View companion app:                                                             
  http://view.ionic.io                                                     

Yeah... now you test your apps. Just run ionic serve to view on your browser. It will pop-up your browser and automatically navigate to http://localhost:8100 ... else, you can open your browser and go to the address.

If you want to view in mobile, you may use mobile emulator or deploy on your mobile. Before that, do install mobile platform package first. To do that, run the following command:

                                                                       

ionic platform add ios  // to add ios platform into the package      
                                                                     
ionic platform add android //to add android platform into the package  

                                                                       

Finally, you are ready to run (on emulator or actual device).

                                                                           

ionic run android --prod --release //to run on emulator as production mode 

                                                                           

ionic build android --prod --release //to build as package for installation

                                                                           

For ios, it will require more steps and you can follow it https://ionicframework.com/docs/v2/intro/deploying/.

Lets dance... :)

Read More