Shulou(Shulou.com)06/03 Report--

Integration of jQueryMobile+AngularJs example analysis, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

Both are good JS programming frameworks, but they have different uses.

1. JQuery Mobile provides a good graphics space, as well as API which depends on jQuery itself and provides a lot of space operation.

2. Angular does not have any controls, but it is a good MVC framework for JS and provides spatial data binding capabilities.

As a result, there are some open source projects that integrate the two, such as

Https://github.com/opitzconsulting/jquery-mobile-angular-adapter

But with this adapter, both can work well, NO. There are some problems, such as the two page loading methods are different, for each page, Angular is navigated using route to load page fragments into the browser when needed. URL is similar to http://angular.github.io/angular-phonecat/step-7/app/#/phones/motorola-xoom-with-wi-fi, note that the real resource address is followed by #, and then initialize the controller corresponding to the resource, so you can initialize the display data. Then jQuery Mobile needs to load all the page into the client at once. In that case, if you define a controller of angular for each page in jQuery Mobile, the page does not display when you initialize your angular controller

We need a design implementation that defines an Angular controller for each jQuery Mobile Page, and each controller completes the data binding of the corresponding page. How to implement

1. Page development uses jQuery Mobile, and we define an angular controller of root for root body, such as

two。 Navigation problem: navigation uses jQuery Mobile's $.mobile.changePage instead of angular's route, because the page is written using jQuery Mobile. Page navigation in addition to switching page, the most important point is to initialize the page data, and because under the jQuery mobile, in the page load phase all the controller are initialized, you can only navigate in the root controller to refresh the display page binding data, which requires that all page binding data needs to be defined in root controller, according to angular rules, all sub-controller will inherit these data definitions. Use structure instead of primary type when defining, so that controller can be drunk directly, such as defining a shop data structure.

$scope.shop = {}; $scope.shop.catelogs = null; $scope.shop.advices = []; $scope.shop.child = []; $scope.shop.products = []

3. I tend to define a separate controller for navigation and use it to initialize page controller, such as

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 often changes, but the page does not refresh the page page. The easiest way to handle it is to send a dummy request to the background.

4. If you need to switch directly to a page when opening your jQuery Mobile, please listen to jqmInit in your root controller

$scope.$on ("jqmInit", function () {} is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.