AngularJS + jQuery Mobile

Question

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?

angular js does not provide such sort of styles , ideally you should not combine angularjs with jquery mobile, my best recommendation would be using angular with responsive design of bootstrap — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Nov 27, 2013 at 10:51
truwer - please dont aks many questions in one post. It will be enough if you ask about examples of working combination Angular + jQuery Mobile — MikroDel
– MikroDel, Commented Nov 28, 2013 at 7:27
the question about disadvantages you can ask you a new post. Such a question can be easy closed with "opinon-based", but if you show your research in the area you have done before asking it - it is ok as for me — MikroDel
– MikroDel, Commented Nov 28, 2013 at 7:29
@Omar - you comment "you can combine both" - can you give truwer some examples or links? And also vote to reopen - cause now the questions shows effort to find the answer — MikroDel
– MikroDel, Commented Nov 28, 2013 at 8:33

Community · Accepted Answer · 2017-05-23 12:06:50Z

4

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.

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Nov 28, 2013 at 9:22

MikroDel

6,7297 gold badges44 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Ni · Accepted Answer · 2013-11-28 09:29:38Z

3

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.

edited Nov 28, 2013 at 9:29

answered Nov 28, 2013 at 9:24

Mark Ni

2,4011 gold badge28 silver badges34 bronze badges

1 Comment

sgalenski Over a year ago

I have tested your code and it works, but when i am adding a form to add a new car this doesn't work (See link ). Is this the normal behavior?

Collectives™ on Stack Overflow

AngularJS + jQuery Mobile

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related