Menu
Are there other possibilities to style an AngularJS application in a mobile friendly way than CSS?
I am planning a mobile app and want to use AngularJS for the logic and data binding but I don't want to style everything on my own with CSS.
The AngularJS FAQ says that it uses jQuery:
Does Angular use the jQuery library? Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.
Due to a change to use on()/off() rather than bind()/unbind(), Angular 1.2 only operates with jQuery 1.7.1 or above.
but there is no information I have found in the FAQ on which way AngularJS + jQuery can be used.
As you can see I have tried to get the information using AngularsJS FAQ, but could not found it.
Have you found some example(s) of AngularJS with jQuery Mobile for styling?
442
jQuery Mobile is no longer supported.
When Angular JS was introduced, it was not designed to focus on mobile browsers and did not have in-built support for mobile applications, due to which it is not mobile-friendly. On the other hand, Angular was built such that it could support the development of native mobile, native desktop, web and mobile web.
Yes, AngularJS can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, AngularJS falls back to its own implementation of the subset of jQuery that we call jQLite.
There was already the question on SO to compare AngularJS and jQuery Mobile.
And in the answer you can find some information - it is kind of further reading for you.
And the arcticle jQuery Mobile and AngularJS Working Together should give you answe to your question. It has some advices, for example:
Load jQM libs before AngularJS
or
Let jQM handle the URL routing
etc.
102
A very basic example:
html:
<body ng-app='myApp'>
<div data-role="page" ng-controller='myCtrl'>
<ul data-role="listview">
<li ng-repeat='car in cars'><a href="{{car}}.html">{{car}}</a>
</li>
</ul>
</div>
</body>
js:
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.cars = [
'acura', 'audi', 'BMW'
];
});
working demo: http://jsfiddle.net/eZdNm/
The main problem with jQuery mobile and AngularJS is they both want to control page routing. You can find out more by searchng jQuery mobile and Angular in google.
Yes, if you only want a ready to go / mobile friendly UI. I would suggest other more CSS based frameworks such as bootstrap.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
