The difference between Jquerymobile and Angularjs

(1) jquery is a JS function library that simplifies DOM operations.

(2) jQueryUI is an HTML UI component library for PC applications.

(3) Twitterbootstrap is a CSS framework that provides a base-style +htmlui component library that simplifies the development of responsive web pages.

(4) Googleangularjs is a JS framework that simplifies the operation of data on the page.

(5) Jquerymobile is a library of HTML UI components for mobile applications.

Jquery+jqueryui = DOM-based PC application

Jquery+bootstrap = Responsive application based on DOM operations

Jquery+angular = X

JQUERY+JQM = dom-based mobile apps

Jqueryui+bootstrap = X

Jqueryui+angular = PC application based on data manipulation

JQUERYUI+JQM = X

Bootstrap+angular = Responsive application based on data manipulation

BOOTSTRAP+JQM = X

ANGULAR+JQM = Mobile applications based on data manipulation

2. Review: The MVC model in ANGULARJS

(1) Each controller instance needs to be created with the Ngcontroller directive, and the element that creates it is the scope of the Controller object-one $scope

(2) If you want to share data in all controllers, you can declare the model data in the $rootscope range.

(3) If you want to share data only in a limited number of controllers, you can declare these controllers inside the same parent controller

The meaning of extract parent controller : Declare shared, duplicate model data and model functions in multiple child controllers in the parent controller.

3. Add: Events in touch-screen devices

The jquerymobile extends the standard event:

Orientationchange: Navigating the device's direction change

PAGEBEFORELOAD:JQM using AJAX to asynchronously load a page before

PAGELOAD:JQM asynchronously loads a page using Ajax

Before PAGEBEFORECREATE:JQM page was created--before hanging to the DOM tree

PAGECREATE:JQM page is created--hangs to the DOM tree

PAGEINIT:JQM page begins initialization--starts initialization after hanging to the DOM tree

PAGECHANGE:JQM the current page has changed, and after the transition animation is complete

Swipe: Swipe your finger on the screen

Swipeleft: Finger swipe left on screen

Swiperight: Finger swipe to the right of the screen

Tap: Tap on your finger on the screen

Taphold: Finger is tapped on the screen for a short period of time

Hint: The binding of the above event listener function cannot be written directly in HTML, only with the event binding function provided by jquery:

$(...). On (' Swipeleft ', FN);

Interview questions: Several page-related event firing sequences provided in JQM: Pagecreate->pageinit, Pagebeforecreate, Pageload, Pagebeforeload, Pagechange

ANGULARJS extends the standard events based on JQM:

Note: For custom modules to declare dependent Ngtouch modules, you can use touch-related instructions:

(1) Ngclick

(2) Ngswipeleft

(3) Ngswiperight

4. Integrating JQM and Angularjs

Integration goal: Use JQM to simplify the writing of interface UI (processing interface) + ANGULARJS to implement two-way binding of data (processing data).

(1) Select the page switching scheme:

If ngroute do the routing page switching, there will be a lot of problems;

$routeProvider.

When ('/main ', {

Templateurl: ' tpl/main.html ',

Controller: ' Mainctrl '

})

We recommend the use of page transitions and transitions in JQM:

<a href= "x.html" data-transition= "animation" >

$.mobile.changepage (' x.html ', {transition: ' animation '});

(2) each page corresponds to a proprietary controller object

<div data-role= "page" ng-controller= "Xxctrl" >

(3) Use JQM page jump (hyperlink/js), load the specified page (declared Ngcontroller), by default is not to be angular instantiated controller object-because angular own think has been retrieved the entire DOM tree, All the Ngcontroller instructions have been processed, and the page declared by the Ngcontroller will not be ignored by angular! --Must try to notify the angular current DOM tree of the element that loaded the new declaration ngcontroller Directive! --Let ANGULARJS recompile the loaded DOM element.

Specific implementation process:

1) Use the page event listener mechanism provided by JQM to listen for the Pageinit event (indicating that the new page has been mounted to the DOM tree to begin initialization processing)

$ (' body '). On (' Pageinit ', function (event) {

Console.log (' New page is mounted to DOM tree ... ');

Console.log (event);

Event.target is the DOM fragment that was just mounted.

Enable the angular compilation mechanism, compile the DOM fragment again

var Newpagescope = $ (event.target). scope (); Gets the scope object corresponding to the new code fragment

$ (event.target). Injector (). /* GET angular injector */

Invoke (function ($compile) {

$compile ($ (event.target)) (Newpagescope); Recompile the DOM fragment and link to the model data it needs

Newpagescope. $digest (); Start polling for the $digest queue

});

})

Angularjs Start-up process analysis--understanding (1) Before Start--page introduced Angular.js, this file provides some angular.xx () function (2) Start frame--look for the ngapp instruction on the static DOM tree to start booting the angular framework (3) Creating an injector ($injector)--responsible for creating and injecting those objects on which all components depend $ (document). Data (' $injector ', angular.injector ([...]) ) (4) Create a $rootscope object (5) Compiling ($compile) DOM subtree-converting DOM nodes according to instructions, assigning event listener functions, and monitoring data bindings

The difference between Jquerymobile and Angularjs