2013-11-27 16 views
8

Có các khả năng khác để tạo kiểu ứng dụng AngularJS theo cách thân thiện với thiết bị di động hơn CSS không?AngularsJS + jQuery Mobile

Tôi đang lên kế hoạch cho một ứng dụng dành cho thiết bị di động và muốn sử dụng AngularJS cho logic và ràng buộc dữ liệu nhưng tôi không muốn tự mình tạo kiểu cho riêng mình bằng CSS.

Các AngularJS FAQ nói rằng nó sử dụng jQuery:

có sử dụng góc thư viện jQuery? Có, Góc có thể sử dụng jQuery nếu nó có trong ứng dụng của bạn khi ứng dụng đang được khởi động. Nếu jQuery không có mặt trong đường dẫn kịch bản của bạn, Angular sẽ quay trở lại việc thực hiện riêng của nó về tập con của jQuery mà chúng ta gọi là jQLite.

Do thay đổi để sử dụng trên()/off() thay vì bind()/unbind(), Angular 1.2 chỉ hoạt động với jQuery 1.7.1 trở lên.

nhưng không có thông tin tôi đã tìm thấy trong Câu hỏi thường gặp về cách nào AngularJS + jQuery có thể được sử dụng.

Như bạn thấy, tôi đã cố gắng lấy thông tin bằng AngularsJS FAQ, nhưng không thể tìm thấy nó.

Bạn đã tìm thấy một số ví dụ về AngularJS với jQuery Mobile để tạo kiểu tóc?

+1

bạn có thể kết hợp cả hai. – Omar

+0

js góc không cung cấp loại kiểu như vậy, lý tưởng bạn không nên kết hợp angularj với điện thoại di động jquery, đề xuất tốt nhất của tôi sẽ sử dụng góc với thiết kế đáp ứng của bootstrap –

+0

truwer - vui lòng không hỏi nhiều câu hỏi trong một bài đăng. Nó sẽ là đủ nếu bạn hỏi về ví dụ về kết hợp làm việc Angular + jQuery Mobile – MikroDel

Trả lời

4

Đã có câu hỏi trên SO để so sánh AngularJSjQuery Mobile.

Và trong số answer bạn có thể tìm thấy một số thông tin - đó là loại đọc thêm cho bạn.

Và arcticle jQuery Mobile and AngularJS Working Together sẽ cho bạn câu trả lời cho câu hỏi của bạn. Nó có một số lời khuyên, ví dụ: libs jQM

tải trước AngularJS

hoặc

Hãy jQM xử lý URL routing

, vv

3

Một ví dụ rất cơ bản:

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

bản demo làm việc: http://jsfiddle.net/eZdNm/

Vấn đề chính với jQuery di động và AngularJS là cả hai đều muốn kiểm soát trang định tuyến. Bạn có thể tìm hiểu thêm bằng cách tìm kiếm jQuery mobile và Angular trong google.

Có, nếu bạn chỉ muốn có giao diện người dùng thân thiện với thiết bị di động.Tôi sẽ đề nghị các khung công tác dựa trên CSS khác như bootstrap.

+0

Tôi đã thử nghiệm mã của bạn và nó hoạt động, nhưng khi tôi đang thêm một mẫu để thêm một chiếc xe mới này không hoạt động (Xem [link] (http://jsfiddle.net/T7WYg/)). Đây có phải là hành vi bình thường không? – sgalenski

+0

Xem cập nhật http://jsfiddle.net/T7WYg/7/ –