Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home Web Front-end JS Tutorial Pitfalls in AngularJS mobile development

Pitfalls in AngularJS mobile development

高洛峰
高洛峰
Nov 18, 2016 am 11:52 AM
angularjs

Relatively speaking, Jquery focuses on DOM operations, while AngularJS is centered on view models and two-way binding.

DOM operation issues

Avoid using jQuery to operate DOM, including adding element nodes, removing element nodes, getting element content, hiding or showing elements. You should use directives to implement these actions, and write your own directives if necessary.

In website web front-end development, if you find it difficult to change your habits, then consider removing jQuery from your web pages. Really, the $http service in AngularJS is very powerful and can basically replace jQuery's ajax function, and AngularJS is embedded with jQLite?? It is a subset of jQuery implemented internally, including commonly used jQuery DOM operation methods, event binding, etc. wait. But this does not mean that you cannot use jQuery when using AngularJS. If your web page has jQuery loaded, AngularJS will use your jQuery first, otherwise it will fall back to jQLite.

If it is mobile App or mobile Web development, it is recommended not to introduce Jquery. If you really need some functions of jquery, introduce Zepto.js. But trust me, with AngularJS, you won’t need Jquery!

The situation where you need to write your own directives is usually when you use a third-party jQuery plug-in. Because the plug-in changes the form value outside of AngularJS, it cannot be reflected in the Model immediately. For example, we use the jQueryUI datepicker plug-in a lot. When you select a date, the plug-in will fill in the date string into the input input box. The View changes, but the Model is not updated, because $('.datepicker').datepicker(); this code does not belong to the management scope of AngularJS. We need to write a directive to update the DOM changes to the Model immediately. 

var directives = angular.module('directives', []);
 
directives.directive('datepicker', function() {
   return function(scope, element, attrs) {
       element.datepicker({
           inline: true,
           dateFormat: 'dd.mm.yy',
           onSelect: function(dateText) {
               var modelPath = $(this).attr('ng-model');
               putObject(modelPath, scope, dateText);
               scope.$apply();
           }
       });
   }
});
Copy after login

Then introduce this directive in HTML

<input type="text" datepicker ng-model="myObject.myDateValue" />
Copy after login

Directive is to write custom tag attributes in HTML to achieve the function of plug-in and effectively supplement the functions of HTML. This declarative syntax extends HTML. It is recommended that common functions and page components in the project be encapsulated into Directives to facilitate use and code maintenance.

It should be noted that there is an AngularUI project that provides a large number of directives for us to use, including plug-ins in the Bootstrap framework and other popular UI components based on jQuery. The community of AngularJS is now active and the ecosystem is robust. The value in

ngOption

is a big pitfall. If you look at the option values ​​of