Home > Developer > JavaScript
Both are good JS programming frameworks, but their respective uses are different.
1. jQuery Mobile provides a good graphic space and relies on jQuery itself, providing APIs for a lot of space operations
2. Angular does not have any controls, but it is a good js mvc Framework and provides the space data binding function.
As a result, some open-source projects integrate the two, such
Https://github.com/opitzconsulting/jquery-mobile-angular-adapter
But with this adapter, can the two work well? NO. There are some problems. For example, the loading method of the two pages is different. For each page, Angular uses route to load the page fragments to the browser as needed. The URL is similar. Then jQuery Mobile needs to load all pages to the client at one time. In this case, if you define an angular controller for each page in jQuery Mobile, the page is not displayed when you initialize your angular controller.
We need a design implementation to define an Angular controller for each jQuery Mobile Page. Each controller binds the data of the corresponding page. How can we achieve this?
1. jQuery Mobile is used for page development. We define a root angular controller for the root body, for example, <body ng-controller = "AppCtrl">
2. Navigation problem: the navigation uses $. Mobile. changePage of jQuery mobile instead of angular route, because the page is written by jQuery Mobile. In addition to page switching, the most important thing in page navigation is to initialize page data, because under jQuery mobile, All controllers in the page loading phase are initialized, you can only refresh the bound data of the displayed page in the root controller when navigating. This requires that the binding data of all pages be defined in the root controller according to angular rules, all sub-controllers inherit the data definitions. It is best to use the structure instead of the primary type when defining it, so that the controller can directly consume it, such as defining the data structure of a shop.
- $scope.shop = {};
- $scope.shop.catelogs = null;
- $scope.shop.advices = [];
- $scope.shop.child = [];
- $scope.shop.products = [];
3. I often define a separate controller in a navigation bar and use it to initialize the page controller, such
- angular
- .module(
- 'ngPageNav',
- [],
- [
- '$provide',
- function($provide) {
- $provide
- .factory(
- 'ngPageNavigator',
- [
- '$http',
- function($http) {
- function nav($scope,
- $http, action,
- data,
- ignoreStack) {
- .....
- }
- return {
- nav : nav,
- back : back
- };
-
- }
- } ]);
}]). Value ('name', 'ngpagenav ');
3. When you call $. mobile. changePage, the page Binding data changes, but the page does not refresh the page. The simplest way is to send a dummy request to the background.
4. If you need to directly switch to a page when opening your jQuery Mobile, listen to jqmInit in your root controller.
- $scope.$on("jqmInit",function() {
- }
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
