2013-11-27 12 views
8

Gibt es andere Möglichkeiten, eine AngularJS Anwendung in einer mobilen freundlichen Art als CSS zu stylen?AngularsJS + jQuery Mobile

Ich plane eine mobile App und möchte AngularJS für die Logik und Datenbindung verwenden, aber ich möchte nicht alles selbst mit CSS stylen.

Die AngularJS FAQ sagt, dass es jQuery verwendet:

Does Angular Verwendung der jQuery-Bibliothek? Ja, Angular kann jQuery verwenden, wenn es in Ihrer App vorhanden ist, wenn die Anwendung gebootet wird. Wenn jQuery in Ihrem Skriptpfad nicht vorhanden ist, greift Angular auf seine eigene Implementierung der Teilmenge von jQuery zurück, die wir jQLite nennen.

Aufgrund einer Änderung der Verwendung von()/off() statt bind()/unbind(), funktioniert Angular 1.2 nur mit jQuery 1.7.1 oder höher.

aber es gibt keine Informationen, die ich in der FAQ gefunden habe, auf welche Weise AngularJS + jQuery verwendet werden kann.

Wie Sie sehen können, habe ich versucht, die Informationen mit AngularsJS FAQ zu bekommen, konnte aber nicht gefunden werden.

Haben Sie einige Beispiele von AngularJS mit jQuery Mobile zum Stylen gefunden?

+1

können Sie beide kombinieren. – Omar

+0

eckig js bietet keine solche Art von Stilen, idealerweise sollten Sie angularjs nicht mit jquery mobile kombinieren, meine beste Empfehlung wäre Winkel mit responsive Design Bootstrap –

+0

Truwer verwenden - bitte nicht viele Fragen in einem Beitrag. Es wird genug sein, wenn Sie nach Beispielen der Arbeitskombination Angular + jQuery Mobile fragen – MikroDel

Antwort

4

Es gab bereits die Frage SOAngularJS und jQuery Mobile zu vergleichen.

Und in der answer können Sie einige Informationen finden - es ist eine Art weiterführende Lektüre für Sie.

Und die arcticle jQuery Mobile and AngularJS Working Together sollte Sie answe auf Ihre Frage geben. Es hat einige Ratschläge, zum Beispiel:

Last JQM Libs vor AngularJS

oder

Lassen JQM die URL behandeln Routing

usw.

3

Ein sehr einfaches Beispiel:

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' 
    ]; 
}); 

Arbeits Demo: http://jsfiddle.net/eZdNm/

Das Hauptproblem mit jQuery Mobile und AngularJS ist sie beide Seite Routing steuern möchten. Sie können herausfinden, mehr von searchng jQuery mobile und Angular in Google.

Ja, wenn Sie nur eine bereit/mobil freundliche UI wollen.Ich würde andere CSS-basierte Frameworks wie Bootstrap vorschlagen.

+0

Ich habe Ihren Code getestet und es funktioniert, aber wenn ich Ich füge ein Formular hinzu, um ein neues Auto hinzuzufügen, das funktioniert nicht (Siehe [link] (http://jsfiddle.net/T7WYg/)). Ist das das normale Verhalten? – sgalenski

+0

Siehe aktualisiert http://jsfiddle.net/T7WYg/7/ –