Pitfalls in AngularJS mobile development

Jquery focuses on DOM operations. AngularJS focuses on view models and bidirectional binding. Jquery focuses on DOM operations. AngularJS focuses on view models and bidirectional binding.

DOM Operation Problems

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

In front-end development of websites, if it is difficult for you to change your habits, consider removing jQuery from your webpage. Really, the $ http service in AngularJS is very powerful and can basically replace jQuery's ajax functions, and AngularJS is embedded with jQLite ?? It implements a subset of jQuery internally, including common jQuery DOM operation methods and event binding. However, this does not mean that jQuery cannot be used when AngularJS is used. If your webpage loads jQuery, AngularJS will first use your jQuery, otherwise it will fall back to jQLite.

For mobile App or Web development, we recommend that you do not introduce Jquery. If you need some jquery functions, introduce Zepto. js. But believe me, AngularJS is used, and you don't need Jquery!

You need to write directives by yourself. This is usually when you use a third-party jQuery plug-in. Because the plug-in changes the form value outside AngularJS, it cannot be immediately reflected in the Model. For example, we use a lot of jQueryUI datepicker plug-ins. When you select a date, the plug-in will fill in the date string in the input box. The View changes, but the Model is not updated, because $ ('. datepicker'). datepicker (); this code is not within the management scope of AngularJS. We need to write a direve ve to update DOM changes to the Model in real time.

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();           }       });   }});

Then introduce this ve ctive in HTML.

Directive is used to write custom tag attributes in HTML to provide plug-ins and effectively supplement HTML functions. This declarative syntax extends HTML. It is recommended that all common functions and page components in the project be encapsulated into direve VE for convenient use and code maintenance.

It should be noted that there is an AngularUI project that provides a lot of direve VE for us to use, including the plug-ins in the Bootstrap framework and other very popular UI components based on jQuery. The AngularJS community is very active and the ecosystem is sound.

Value in ngOption

This is a big pitfall. If you want to viewInOption value (each), It is definitely a waste of effort. Because the value here will always be the index of AngularJS internal elements, and it is not the form option value you specified.We still need to change our mindset. AngularJS no longer uses forms for data interaction, but uses models. Use $ http to submit the Model. In php, use file_get_contents ('php: // input') to obtain the data submitted by the front end.Input type = 'number'In some versions of AngularJS, when the Input box is set to Input type = 'number', the ng-change method on the mobile device fails.{}During page initialization, the user may see {}, and then the real content appears after a flash.Solution:Use ng-cloak directive to hide itReplace {} with ng-bind {{}}Separate the interface from the business logicThe Controller should not directly reference the DOM, but should control the view behavior. For example, "what should happen if the user operates on X?", "Where can I get X ?"In most cases, the Service should not directly reference the DOM. It should be a singletons (singletons), independent of the interface and irrelevant to the view logic. Its role is only "perform X operations ".DOM operations should be placed in directives.Reuse existing functions whenever possibleThe functions you have written are probably implemented by AngularJS. Some code can be abstracted and reused in a more Angular way. In short, many complex jQuery code can be replaced.1. ng-repeatNg-repeat is useful. When Ajax obtains data from the server, we often use jQuery (for example, the example above) to add more elements to some HTML container nodes, which is not good in AngularJS. With ng-repeat, everything becomes very simple. Define an array (model) in your $ scope to save the data pulled from the server, and then bind it to the DOM using ng-repeat. The following example initializes and defines the friends model.I have {friends. length} friends. They are: [{$ Index + 1}] {friend. name} who is {friend. age} years old. 2. ng-show Ng-show is also useful. JQuery is used to control the display and hiding of interface elements based on conditions. This is common. But Angular has a better way to do this. Ng-show (and ng-hide) can be hidden and displayed based on boolean expressions.You can use strXXXX. length to control the display of arrays or strings. Otherwise, the display will fail on mobile devices.Similar built-in directives include ng-disabled, ng-switch, and so on. They are used for Conditional Control and have simple syntax and are powerful.3. ng-classNg-class is used to add a class to an element conditionally. jQuery is often used in the past. Ng-class in Angular is certainly better. Example:...Ng-class accepts an object. The key is the CSS class name and the value is the conditional expression controlled by the $ scope variable, other similar built-in directives include ng-class-even and ng-class-odd, which are very useful.Use Cases of ng-show and ng-ifBoth ng-show and ng-if are used to control the display of page elements, but they are different. ng-if dynamically creates DOM, ng-show only switches the display of existing DOM, which is equivalent to setting style = "display: none". If you use css pseudo classes such as before and after to control the display effect, problems may occur, use ng-show and ng-if properly as needed.$ Watch and $ applyAngularJS's two-way data binding is the most exciting feature, but it is not an all-powerful magic. In some cases, you need to make some minor corrections.When you use ng-model, ng-repeat, and so on to bind an element value, AngularJS creates a $ watch for that value, as long as the value changes within the range of AngularJS, all parts are updated synchronously. When writing custom directive, you need to define your own $ watch to implement this automatic synchronization.Sometimes you change the model value in the code, but the view is not updated, which is often encountered in Custom Event binding. In this case, you need to manually call scope. $ apply () to trigger the interface update. The preceding datepicker example illustrates this point. Third-party plug-ins may have call back. We can also write the callback function as an anonymous function as a parameter and pass it into $ apply.Combine ng-repeat with other direves vesNg-repeat is useful, but it is bound to the DOM and it is difficult to use other direves VES (such as ng-show and ng-controller) on the same element ).If you want to use a directive for the entire loop, you can include a parent element outside repeat to write directive there. If you want to use a directive for each element inside the loop, put it on a child node of ng-repeat.Scope ProblemsScope should be read-only in the templates template, and write-only in the controller. The purpose of Scope is to reference a model rather than to become a model. Model is the JavaScript Object we define.$ RootScope can be used, but it is likely to be abused.Scopes forms a hierarchical relationship in AngularJS, and the tree structure must have a root node. We usually cannot use it because almost every view has a controller and its own scope.But occasionally there is some data we want to apply globally in the entire app, then we can inject the data into $ rootScope. Because other scopes inherit the root scope, the injected data is available for direve ve such as ng-show, just like variables in the local $ scope.Of course, global variables are evil and you must use $ rootScope very carefully. In particular, it is not used for code, but only for data injection. If you really want to write a function in $ rootScope, you 'd better write it into the service so that it will be injected only when used, and it is easier to test.On the contrary, if a function only stores and returns some data, do not create it as a service.Prototype inheritance of sub-scopesThis is also a big pitfall. The inheritance of scope variables is based on the javascript prototype Inheritance Mechanism. Pay special attention to the use of commands involving scope, such as ng-template and ion-modal, the search sequence is not detailed here.