Summary of pits in ANGULARJS mobile development

Using ANGUALRJS to develop mobile app has been nearly half a year, and gradually accumulated a lot of angularjs problems, especially for the use of jquery developers, go to angularjs or need to overcome a lot of problems. Unlike jquery's side-heavy DOM operations, Angularjs is centered on the view model and two-way bindings.

If you already know the concept of front-end MVC and have some experience with AngularJS, people who have just started learning may be obscures. The summary of this article will cover some of the problems that are specific to mobile devices.

problems with DOM operations

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

        in site Web front-end development, suppose you feel very difficult to change habits, Then consider removing jQuery from your Web page. True,   in the AngularJS; $http Span style= "line-height:24.3099994659424px" >  service is very powerful, basically can replace jQuery Ajax function, and AngularJS embedded jqlite--its internal implementation of a Jque A subset of RY, including frequently used jquery dom operations methods, event bindings, and so on. But this is not to say that using ANGULARJS can not use JQuery. Assuming that your page has a load of jquery then AngularJS will prioritize your jquery, otherwise it will fall back to Jqlite.

Assuming it's mobile app or mobile Web development, it is recommended that you do not introduce jquery, assuming that some of the features of jquery are needed to introduce zepto.js. Just please believe me, with ANGULARJS, you will not need jquery!

The situation where you need to write your own directives is typically when you use a third-party jQuery plugin. Because the plug-in changes the form value outside of AngularJS, it does not immediately react to the Model. For example, we use a lot more jQueryUI DatePicker plugin, when you select a date, the plugin will fill the date string into the input box. View changed, but did not update the Model, because $(‘.datepicker‘).datepicker(); this code does not belong to the AngularJS management scope. We need to write a directive to get the DOM changes to be updated in 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 ();});}   );

and introduce this directive in HTML.

<input type= "text" DatePicker ng-model= "Myobject.mydatevalue"/>

       Directive is in the HTML to write their own definition of tag attributes, to achieve the role of plug-ins, effectively supplementing the function of HTML. This declarative syntax extends the HTML. It is recommended that the common features and page components in the project are packaged into directive, easy to use and code maintained.

It is important to note that there is a Angularui project that provides a lot of directive for us to use, including plugins in the Bootstrap framework and other very popular UI components based on jQuery. The AngularJS community is now very active and the ecosystem is sound.

Value in the Ngoption

        It's a big hole. Suppose you go to see Ngoption generated  <SELECT>  <OPTION> option values for   (each  <option value=" XXX,   's value section), that's definitely vain. Since the value here will always be the index of the inner element of the AngularJS, it is not the form option value you specified.

Or to change the concept, AngularJS is no longer using forms to interact with the data, but with Model. Use the $http to submit the Model, which is used in PHP file_get_contents(‘php://input‘) to get the data submitted by the front end.

Question of Input type= ' number '

AngularJS some version numbers, and the Ng-change method on a mobile device fails when the input box is set to type= ' number '.

Problem with {{}}

When the page is initialized, the user may see {{}} and then flash before the real content appears.
The workaround:

1. Use ng-cloak directive to hide it
2. Replace {{}} with Ng-bind

Separating the interface from the business logic

The controller should not refer directly to the DOM, but should control the behavior of the view. For example, "Suppose the user operates X, what should happen", "where can I get x?" ”

The Service should not refer directly to the DOM in most cases, it should be a singleton (singletons), independent of the interface, regardless of the view's logic. Its role is simply to "do X operations".

DOM operations should be placed inside the directives.

Reuse existing functions as much as possible

The features you write are probably AngularJS already implemented, and there are some code that can be abstracted out and reused in a more Angular way. In short, a lot of JQuery's cumbersome code can be replaced.

1. ng-repeat

Ng-repeat is very practical. When Ajax obtains data from the server, we often use jQuery (like the example above) to add many other elements to some of the HTML container nodes, which is bad practice in AngularJS. With the ng-repeat everything becomes very easy. Define an array (model) in your $scope to hold the data pulled from the server, and then use Ng-repeat to bind it to the DOM. The following sample initialization defines the model of the Friends

<div ng-init= "Friends = [{name: ' John ', age:25}, {name: ' Mary ', age:28}]" >    I have {{friends.length}} friends. They be:    <ul>        <li ng-repeat= "friend in Friends" >            [{{$index + 1}}] {{friend.name}} Friend.age}} years old.        </li>    </ul></div>

2. ng-show

Ng-show is also very useful. Using JQuery to control the display concealment of interface elements based on conditions is not uncommon. But Angular has a better way to do it. Ng-show (and Ng-hide) can decide to hide and display based on Boolean expressions.

For arrays or strings, you can control the display with Strxxxx.length, otherwise it will not work on the mobile device.

Similar built-in directives and ng-disabled, Ng-switch, etc., are used for conditional control, simple syntax, and are very powerful.

3. ng-class

Ng-class is used to conditionally add classes to elements, and we used to use jQuery often. The ng-class of Angular is of course better used, example:

<div ng-class= "{errorclass:iserror, warningclass:iswarning, Okclass:!iserror &&!iswarning}" >...</ Div>

Here Ng-class accepts an object, key is the CSS class name, the value is $scope variable control conditional expression, other similar built-in directives also have Ng-class-even and ng-class-odd, very useful 。

Ng-show and Ng-if use scenario issues

Using ng-show and ng-if to control the display of page elements, but 2 are different, Ng-if will dynamically create dom,ng-show is simply to toggle the display of the existing DOM, equivalent to set style= "Display:none", It is assumed that using CSS pseudo-classes such as before and after to control the display results may fail and require reasonable use of ng-show and ng-if.

$watch and $apply

AngularJS's two-way data binding is the most exciting feature, but it's not all-powerful magic, and in some cases you need to make some minor corrections.

When you use Ng-model, Ng-repeat, and so on to bind the value of an element, AngularJS creates a $watch for that value, just to have the value change in the range of AngularJS, and all the places will be updated synchronously. While you are writing your own definition of directive, you need to define your own $watch to achieve such self-active synchronization.

Sometimes you change the value of the model in your code, and the view is not updated, which is often encountered in your own definition of event bindings. You will then need to manually invoke scope. $apply () to trigger an interface update. This is illustrated by a sample of the above DatePicker. Third-party plug-ins may have call back, and we can also write the callback function as an anonymous function as an argument to the $apply ().

Combine the ng-repeat with other directives.

Ng-repeat is very practical, but it is bound to the DOM, it is very difficult to use other directives on the same element (for example, Ng-show, Ng-controller, etc.).

Assuming you want to use a directive for the entire loop, you can wrap a layer of parent elements outside the repeat and write directive there, assuming you want to use a directive for each element inside the loop, then put it on a sub-node of Ng-repeat.

Issues with Scope

Scope should be read-only in the templates template, and it should be write-only in the controller. The purpose of Scope is to refer to model, not to be model. Model is the JavaScript object we define.

$rootScope can be used, but it's very likely to be abused.

Scopes form a certain hierarchical relationship in AngularJS, the tree structure must have a root node. Usually we can't use it, because almost every view has a controller and corresponding scope.

But occasionally there is some data we want to apply globally to the entire app, when we can inject the data into $rootScope. Since all other scopes inherit the root scope, the injected data is available for ng-show such as directive in the local $scope.

Of course, global variables are evil and you have to use $rootScope very carefully. In particular, do not use it for code, but only for injecting data. Suppose you really want to write a function in the $rootScope, it's best to write it into the service so that it will be injected only when it is practical, and it's easier to test.

Instead, assume that a function does not create a service if it stores and returns some data.

the problem of prototype inheritance for sub-scopes

For those who have just started learning, this is a big hole. The inheritance of scope variables is based on the JavaScript prototype inheritance mechanism, which requires special attention when using directives involving scopes, such as Ng-template,ion-modal, and the related lookup order is not discussed here.

Summary of pits in ANGULARJS mobile development