In the ever evolving quest for the best mobile application development stacks, I’ve recently been looking at Ionic. Ionic is a library that provides mobile-optimized UI components to build “native-feeling” hybrid applications.
Where does it fit?
Ionic fits in the UI layer. But unlike other libraries in that space (Twitter Bootstrap, Foundation, Ratchet, Topcoat and others), Ionic is not agnostic in terms of the underlying architectural framework you are using. Instead, Ionic is built on top of AngularJS to provide a complete solution for developing applications that are both well architected and native-feeling. That’s great news if you are an Angular developer. If you use another architectural framework, you can still use the Ionic CSS stylesheets, but you won’t get the powerful UI interactions, gestures, and animations.
I’ve been impressed with the number and the quality of the components and interactions available in Ionic. My employee directory sample app (below) may never have felt that close to native.
Cordova Integration
Another thing I like about Ionic is its integration with Cordova. In fact, the Ionic CLI is built on top of the Cordova CLI. Here is how you install the Ionic CLI, create a seed project, and run it in the emulator or on a device:
npm install -g ionic ionic start myApp cd myApp ionic platform ios ionic emulate ios ionic run ios
This should look very familiar if you are using Cordova or PhoneGap.
Sample Application
To further experiment with Ionic, I created an Angular/Ionic version of my employee directory application with the seed project as a starting point. You can run it in the browser or on a mobile device as a Cordova/PhoneGap app. You can also run a hosted version of the application here.
Source Code
The complete source code for the application is available in this repository on GitHub.
Hey Christophe,
Thanks for the awesome write up on Ionic! I think it’s a great introduction to the framework, and the simple application you made shows off the capabilities nicely.
I’ll be interested to hear more about your development process with Ionic. There’s a lot of great stuff lined up for the Beta…
Cheers!
Thanks Ben! Looking forward to seeing what comes next in the framework. Awesome job so far!
Hi Chris,
i have moved “var employees” into a json file. I try to fetch data and everything breaks down. what changes should i make exactly in the services and controllers file.
i tried this, but its not fectching datas
return {
findAll: function() {
var deferred = $q.defer();
// simple get to an hypothetical url
$http.get(‘http://your.api.server.com/all’)
.then(function(data) {
deferred.resolve(data)
})
return deferred.promise;
},
findById: function(employeeId) {
var deferred = $q.defer();
// this is a simple post that have to be customized, of course
$http.post(‘http://your.api.server.com/byId’, {id:employeeId})
.then(function(data) {
deferred.resolve(data)
})
return deferred.promise;
}
}
thanks.
Hi Christophe,
I love it! I am very interested in Ionic and have started to look into it. Thank you for writing a post about it. You should make a video tutorial series for Ionic…nobody has done that yet, and I think it would reach an ever increasing amount of people in the hybrid HTML5 app development market. I know I would be interested.
Unlike other employee directory demos you dropped the real time search on key press. Any reason why?
I have to say – it seems weird that the ionic CLI wraps cordova. Is there a reason for that? Just seems… I don’t know. Do you know why they did it?
So yeah – right away i run into an oddity. “ionic emulate” requires you to specify a platform whereas “cordova emulate” will automatically run all platforms you’ve installed. It is a minor thing I guess, but one reason why I’d stick to the cordova cli and just use ionic to create the seed project.
I have tested the hosted version. It run very good on iOS, but on Android the scrolling and the whole behavior is not smooth. I think ionic uses the overflow:scroll. I had this in an app of mine, but Android users have begged for the old version without. This was also from Android user with new and fast devices.
I am serching for a long time to get a more native look of cordova apps, but the Android glitches always slowdown.
How is your experience? Have you feedback from Android users?
Hi Christophe,
Great sample application!
Is there a way to show the search results when typing, without having to push the search button?
Cheers!
The search function would be better implemented as a custom filter on the ng-repeat imo. Here’s a filter that I adapted from a Stackoverflow answer I found a while ago (don’t have the reference anymore):
$scope.searchFilter = function (obj) {
var res = new RegExp($scope.searchKey, ‘i’);
return !$scope.searchKey || res.test(obj.firstName) || res.test(obj.lastName);
};
Which uses the ng-model of the search field, and which can test against any properties of the object that’s passed in (I arbitrarily chose the names in this case). Then in the ng-repeat you just do:
ng-repeat=”employee in employees | filter:searchFilter”
This way the results show as the user types – which removes the redundancy of clicking search after entering a string only to find no matches. Naturally it also means less space taken by unnecessary buttons.
Seems very promising, although a lot of glitches on android. Hope they will clean things up in the coming releases.
Have you try the latest version?
Can you list some of the important problems. So developer can look at it and solve it?
Please add more data, what is the problems, what is the Android version and device used
The ionic CLI in your Cordova Integration did not work on OSX, better results with cordova (as described on the ionic install page). Thanks for ur code!
Hi Christophe, great application you have here…
I have a few questions bothering me , I will love you to help me out with.
I want to create a mobile app with angularjs that should be able to take pictures with the device camera and send the image to a web api(written with php)..
1. I will like to know if I angularjs has that kind of capability or do I need to use phonegap api to do that
2. How do I use angularjs to send post data from a phonegap compiled app to a web api
Thanks.
Rhino Mob is a Social and Mobile Game Company. We create High Quality, Visually Entertaining and Addictive Games for the iOS and Android Platforms.
I download this source code but I not able to import into Eclipse kepler 4.3 and I observed there is no .setting folder available in source code.
I made a tutorial on how to integrate PhoneGap with Angular and Ionic using Yeoman if anyone interested: http://www.frontendmatters.com/getting-started-mobile-app-development-phonegap-yeoman-angularjs-ionic/
Great stuff ! thanks a lot.
You can use ng-src in the “employee-detail.html” to refer the employee’s picture.
Greetings.
I’ve had factors show up some months when i signed up for the
item. These techniques are very valuable in jump starting your
business to the extreme. If you want to make money
from home, surveys that pay are one of the best methods, but you must to know the best practices to make the most of them.
Hello !! I am from Brazil and I am trying expose the work with Ionic here. Have you ever experience with Ionic + Windows Phone ? If you already had, could you give us more details ?
Hi,
I am trying to get the data from a json, but I am missing something… I am new to this and I try to practice. This is the part that I have modified but it would not get the data from the json file.
.factory(‘EmployeeService’, function($q, $http) {
var employees = $http.get(‘js/data/test.json’);
And this is the json file format:
[
{“id”: 1, “firstName”: “James”, “lastName”: “King”, “managerId”: 0, “managerName”: “”, “reports”: 4, “title”: “President and CEO”, “department”: “Corporate”, “cellPhone”: “617-000-0001″, “officePhone”: “781-000-0001″, “email”: “jking@fakemail.com”, “city”: “Boston, MA”, “pic”: “James_King.jpg”, “twitterId”: “@fakejking”, “blog”: “http://coenraets.org”}
]
It would be great if you can give me some hint.
hi Bob ken,
if you’ve got the solution can u share with me.
Thanks
Have You managed to get this to work from JSON file? I too have tried without success.
Would appreciate if you can share your findings or ways to achieve it.
cheers!
Hello
I have downloaded source code . It eats very well . but I have a question.
I want to create a tabbar . But does not work. Because of the iconic script. somehow I can not use ICONIS javascript in my code.
If I add below given line , your program does not work anymore ..
But I want to add a tab bar .
If I add this code also , it does not work well .
What do I coll, so that I can use given above Tabbar and Ionic activate JavaScript language can use?
Thank you for your response .
Hello
I have downloaded source code . It eats very well . but I have a question.
I want to create a tabbar . But does not work. Because of the iconic script. somehow I can not use ICONIS javascript in my code.
If I add below given line , your program does not work anymore ..
script src=”http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js”
But I want to add a tab bar .
If I add this code also , it does not work well .
<!–
–>
What do I coll, so that I can use given above Tabbar and Ionic activate JavaScript language can use?
Thank you for your response .
There are tons of games watch dogs serial code generator such as Parking GamesMacromedia Peep player
is rated by difficulty, if you do it. Abbreviations Used in clutch plates.
The online game now that they’re exciting. The symbols and avoid jellyfish.
We run our own, or” Null Data” value for the iPhoneThere is a much
faster game play into daily routines or provide a distraction. Moreover, challenges
and enemies. So much promise Please enjoy the arcades to enjoy them for premium.
Gamers see a statue. They feel as an art-class project by three watch dogs serial key students at the good merchandise concerning the situation for a great gaming experience online.
SpongeBob also offers an advanced board game in any outposts.
So if you get out.
Very nice post. I simply stumbled upon your weblog and wished to mention that I’ve really enjoyed surfing around your weblog posts. After all I’ll be subscribing in your rss feed and I hope you write once more soon!
Great Application shared with us. thanks
Great stuff! I am using to create a tourist guide. If possible, explain to us how to use an external data source (json, with $ http) tried several ways and could not implement.
Thanks and keep up the job.
Thanks for the blog post. There is an issue w/ your instructions. You need to be root (via sudo, ideally) to install iconic. It seems that it wants to issue a mkdir on /usr/local/lib/node_modules, where /usr/local/lib is protected. Simple fix to line #1 is “sudo npm install -g iconic”.
Here’s what I see: http://www.screencast.com/t/vsNkmhNlFn
Thanks again for the post dude.
dear,
i’m working on a ionic project.
i need to set gradient color to header, it’s ok on browser , but whene i run it on android device ver4, it show only on color.
do you know where is the problem ?
best regards.
mrza.
I am looking for someone that can program in ionic for a app we are trying to develop. we have a framework available for the MVP once we have made contact with someone.
Hi, thanks for the nice tutorial on Ionic framework. I would like to add another two subcategories in the application. Can you please provide any suggestion?