Step 1: Setting up your local ionic framework environment.<\/h2>\n
I\u2019m a command line guy, let me emphasis that and I don\u2019t see any reason why you wouldn\u2019t consider that. Using the actual cli commands will give you more control over anything you do to your application.<\/p>\n
Download the node package manager and install ionic framework cli<\/h3>\n\n- To download and install npm cli, click here<\/a><\/li>\n
- Now after the installation, go to your project folder (create one if you don\u2019t have it yet) and run the following command.
npm install -g cordova ionic<\/code>This will install the ionic framework cli.<\/li>\n- After the installation, you can now use the ionicframework cli to create, build and test projects. For more examples, go the ionic site<\/a><\/li>\n<\/ul>\n
Step 2: IDE. Brackets? Sublime? NotePad++?<\/h2>\n
I personally use Brackets most of the time as it\u2019s simple and easy to use. It\u2019s an Open source adobe projects and has a lot of plugins and extension available. It also compliments the adobe products such as adobe photoshop if you need to get the details of your slices and graphics within your code.<\/p>\n
![\"screenshot-at-may-10-19-51-28\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/screenshot-at-may-10-19-51-28.png\")
<\/a><\/p>\nI use a mint green themed IDE, autocompletion for css, javascript. And if you look at my screen, I use coffee app as well.<\/p>\n
Step 3: Try out an example project<\/h2>\n
Go to your project directory. I\u2019m assuming you already have your ionic cli install so let\u2019s go step by step<\/p>\n
\n- cd dir<\/i><\/li>\n
ionic start myApp\u00a0tabs<\/code><\/li>\n<\/ol>\nThe steps above will create a scaffolding ionic project.<\/p>\n
![\"screenshot-at-may-10-20-30-39\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/screenshot-at-may-10-20-30-39.png\")
<\/a><\/p>\nOpen your source in your IDE<\/h3>\n
In my case, I am using brackets. I can launch it using Live Preview button<\/p>\n
![\"screenshot-at-may-10-20-38-43\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/screenshot-at-may-10-20-38-43.png\")
<\/a><\/p>\nThe scaffolding app looks good. It has tabs, list, and basic page that you can use as your guideline.<\/p>\n
Step 4: Let\u2019s dig in deeper<\/h2>\n
If you look at the scaffolding app, it already has the app.js along with the services and controller js source. Let\u2019s look in closer.<\/p>\n
app.js<\/h3>\n
![\"screenshot-at-may-10-21-07-19\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/screenshot-at-may-10-21-07-19.png\")
<\/a><\/p>\n\n- app.js \u2013 this is the global source code for angularjs framework. AngularJS will basically manipulate the DOM as soon as it receives the HTML object. It\u2019s usually being used to house the modules, routes and service definitions, although this can be in a separated source code but basically runs on the same DOM interpreter.<\/li>\n
- Line 8: create the module name \u2018starter\u2019 importing the following modules:\n
\n- ionic \u2013 this basically the ionic library module<\/li>\n
- starter.controllers \u2013 the controllers we defined. The main module needs access to this
\nso that it can dictate the controller scope that it will be used for each route.<\/li>\n - starter.services \u2013 the services we defined. We need this so that we can access services
\nwithin the module.<\/li>\n<\/ul>\n<\/li>\n - Line 11 \u2013 22: This executed upon running the module, this basically means that the native mobile service needs to know that we are using the cordova keyboard plugin and status bar.<\/li>\n
- Line 24: the .config is a module function that sets any configuration needed upon running the module. In this case, we use the stateProvider and urlRouterProvider module to route to different pages and views.<\/li>\n<\/ul>\n
services.js<\/h3>\n
![\"screenshot-at-may-10-21-19-58\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/screenshot-at-may-10-21-19-58.png\")
<\/a><\/p>\n\n- Line 1: Definition of the starter.service module.<\/li>\n
- Line 6: Definition of factory Object \u2018Friends\u2019<\/i> which we will used eventually in the controller.<\/li>\n<\/ul>\n
controller.js<\/h3>\n
![\"screenshot-at-may-10-21-20-34\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/screenshot-at-may-10-21-20-34.png\")
<\/a><\/p>\n\n- Line 1: Definition of module starter.controllers \u2013 which we imported from app.js. We really don\u2019t need any new modules inside this so no imports necessary.<\/li>\n
- Line 3 \u2013 16: Defined the controller. The controller is basically the main source that is directly bound to the ui. If you observe carefully, you can see that on the FriendsCtrl, we imported the \u2018Friends\u2019 factory from the starter.services module.<\/li>\n<\/ul>\n
The scaffolding is almost complete with the most basic UI controls. There are tons of examples in CodePen<\/a> for this, from panel directives, sliders, to tinder cards. The key however is trying to consolidate them all to your needs. Most of the UI components available are made through directives which is the perfect way of creating components, not just in an angularjs web app, but also in ionic framework for mobile.<\/p>\nStep 5: Build and Test in your mobile<\/h2>\n
Ionic is based on cordova, so you can compile the source in any platform supported by this. Here are some of the code you need to build for android or ios platform.<\/p>\n
ionic platform add android
\nionic ionic build android
\nionic ionic emulate android --device
\n<\/code>This means that you will emulate on your device.<\/p>\nExtra: Our Wedding App.<\/h2>\n
I somehow use our wedding as an opportunity to practice, so here are some screenshots of the app.<\/p>\n
![\"wedding_screenshot_1\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/wedding_screenshot_11.png\")
<\/a><\/p>\n![\"wedding_screenshot_2\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/wedding_screenshot_2.png\")
<\/a><\/p>\n![\"wedding_screenshot_3\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/wedding_screenshot_3.png\")
<\/a><\/p>\n![\"wedding_screenshot_4\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/wedding_screenshot_4.png\")
<\/a><\/p>\nI did this in just a week after learning the ropes!<\/p>\n
Download the APK here<\/a>.<\/p>\nEnjoy!<\/p>\n
\n
npm install -g cordova ionic<\/code>This will install the ionic framework cli.<\/li>\n- After the installation, you can now use the ionicframework cli to create, build and test projects. For more examples, go the ionic site<\/a><\/li>\n<\/ul>\n
Step 2: IDE. Brackets? Sublime? NotePad++?<\/h2>\n
I personally use Brackets most of the time as it\u2019s simple and easy to use. It\u2019s an Open source adobe projects and has a lot of plugins and extension available. It also compliments the adobe products such as adobe photoshop if you need to get the details of your slices and graphics within your code.<\/p>\n
<\/a><\/p>\nI use a mint green themed IDE, autocompletion for css, javascript. And if you look at my screen, I use coffee app as well.<\/p>\n
Step 3: Try out an example project<\/h2>\n
Go to your project directory. I\u2019m assuming you already have your ionic cli install so let\u2019s go step by step<\/p>\n
\n- cd dir<\/i><\/li>\n
ionic start myApp\u00a0tabs<\/code><\/li>\n<\/ol>\nThe steps above will create a scaffolding ionic project.<\/p>\n
<\/a><\/p>\nOpen your source in your IDE<\/h3>\n
In my case, I am using brackets. I can launch it using Live Preview button<\/p>\n
<\/a><\/p>\nThe scaffolding app looks good. It has tabs, list, and basic page that you can use as your guideline.<\/p>\n
Step 4: Let\u2019s dig in deeper<\/h2>\n
If you look at the scaffolding app, it already has the app.js along with the services and controller js source. Let\u2019s look in closer.<\/p>\n
app.js<\/h3>\n
<\/a><\/p>\n\n- app.js \u2013 this is the global source code for angularjs framework. AngularJS will basically manipulate the DOM as soon as it receives the HTML object. It\u2019s usually being used to house the modules, routes and service definitions, although this can be in a separated source code but basically runs on the same DOM interpreter.<\/li>\n
- Line 8: create the module name \u2018starter\u2019 importing the following modules:\n
\n- ionic \u2013 this basically the ionic library module<\/li>\n
- starter.controllers \u2013 the controllers we defined. The main module needs access to this
\nso that it can dictate the controller scope that it will be used for each route.<\/li>\n - starter.services \u2013 the services we defined. We need this so that we can access services
\nwithin the module.<\/li>\n<\/ul>\n<\/li>\n - Line 11 \u2013 22: This executed upon running the module, this basically means that the native mobile service needs to know that we are using the cordova keyboard plugin and status bar.<\/li>\n
- Line 24: the .config is a module function that sets any configuration needed upon running the module. In this case, we use the stateProvider and urlRouterProvider module to route to different pages and views.<\/li>\n<\/ul>\n
services.js<\/h3>\n
<\/a><\/p>\n\n- Line 1: Definition of the starter.service module.<\/li>\n
- Line 6: Definition of factory Object \u2018Friends\u2019<\/i> which we will used eventually in the controller.<\/li>\n<\/ul>\n
controller.js<\/h3>\n
<\/a><\/p>\n\n- Line 1: Definition of module starter.controllers \u2013 which we imported from app.js. We really don\u2019t need any new modules inside this so no imports necessary.<\/li>\n
- Line 3 \u2013 16: Defined the controller. The controller is basically the main source that is directly bound to the ui. If you observe carefully, you can see that on the FriendsCtrl, we imported the \u2018Friends\u2019 factory from the starter.services module.<\/li>\n<\/ul>\n
The scaffolding is almost complete with the most basic UI controls. There are tons of examples in CodePen<\/a> for this, from panel directives, sliders, to tinder cards. The key however is trying to consolidate them all to your needs. Most of the UI components available are made through directives which is the perfect way of creating components, not just in an angularjs web app, but also in ionic framework for mobile.<\/p>\nStep 5: Build and Test in your mobile<\/h2>\n
Ionic is based on cordova, so you can compile the source in any platform supported by this. Here are some of the code you need to build for android or ios platform.<\/p>\n
ionic platform add android
\nionic ionic build android
\nionic ionic emulate android --device
\n<\/code>This means that you will emulate on your device.<\/p>\nExtra: Our Wedding App.<\/h2>\n
I somehow use our wedding as an opportunity to practice, so here are some screenshots of the app.<\/p>\n
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\nI did this in just a week after learning the ropes!<\/p>\n
Download the APK here<\/a>.<\/p>\nEnjoy!<\/p>\n
\n