This is a simple app to implement CRUD (Create Read Update Delete) functionality using IONIC Framework on the top of Phonegap/Cordova. This application is designed for Iphone, Android and Windows Phone but can also be deployed as Blackberry Application. I name it as AppCRUD targetting User Management. I have also added some extra perks like visualizing the User Data using Charts.js and Angular Charts.
In this application I have implemented an additional functionality which is Directive. Directives are the part of AngularJS Framework which helps developer to extend the standard functionality. In this application, use of directive is applied to the "Add/Edit User Template" to focus the first Input Element in our View. You can have a look in the "/www/js/directives.js" and yes we have to add this directives.js file to our base html file that is "index.html" as well as to our Module as a Dependency in "app.js" file.
In this application I have implemented an additional functionality which is Directive. Directives are the part of AngularJS Framework which helps developer to extend the standard functionality. In this application, use of directive is applied to the "Add/Edit User Template" to focus the first Input Element in our View. You can have a look in the "
Setting Up the Project
Installation Required:- Node JS for NPM Packages
- Cordova
- IONIC Framework
- Android SDK (for the deployment to the Device/Emulator)
- IOS (you need a MAC for the deployment to the Device/Emulator)
Create Project Directory
Here's a link to the Github Repository IonicAppCRUD. You can either download a zip or simply clone it with Git Bash.
git clone https://github.com/DynamicRemo/IonicAppCRUD.git
Platform, Build and Deploy
cd IonicAppCRUD
After the navigation to the Project Directory, we can run our project with ionic serve command and the output will be displayed in the Browser.
ionic serve
Or we can have the App View just like the Mock Ups for IOS and Android, its a new cool feature by IONIC.
ionic serve --lab
Moreover, we can add IOS and Android Platform to our Project and can directly deploy to our Device.
ionic platform add android ionic platform add ios
ionic run android ionic run ios
Application Overview
Followings are the different views of Application: User Listing, User Add/Edit, User Delete, Reordering of User Listing and the Visualization of data using Angular Charts.
For feedbacks and discussion, please leave a comment. Thank You!
