CODEWITHSUNDEEP
javascriptjquerycssangularjsjquery-mobile
sgalenski
sgalenski

Reputation: 181

AngularJS + jQuery Mobile

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?

Upvotes: 8

Views: 15179

Answers (2)

Mark Ni
Mark Ni

Reputation: 2401

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.

Upvotes: 3

MikroDel
MikroDel

Reputation: 6735

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.

Upvotes: 4

Related Questions