Fallstricke bei der mobilen AngularJS-Entwicklung

Relativ gesehen konzentriert sich Jquery auf DOM-Operationen, während sich AngularJS auf Ansichtsmodelle und bidirektionale Bindung konzentriert.

Probleme mit DOM-Operationen

Vermeiden Sie die Verwendung von jQuery zum Betreiben von DOM, einschließlich des Hinzufügens von Elementknoten, des Entfernens von Elementknoten, des Abrufens von Elementinhalten sowie des Ausblendens oder Anzeigens von Elementen. Sie sollten Anweisungen verwenden, um diese Aktionen zu implementieren, und bei Bedarf eigene Anweisungen schreiben.

Wenn Sie bei der Web-Frontend-Entwicklung von Websites Schwierigkeiten haben, Ihre Gewohnheiten zu ändern, sollten Sie darüber nachdenken, jQuery von Ihren Webseiten zu entfernen. Wirklich, der $http-Dienst in AngularJS ist sehr leistungsstark und kann im Grunde die Ajax-Funktion von jQuery ersetzen, und AngularJS ist in jQLite eingebettet. Es handelt sich um eine intern implementierte Teilmenge von jQuery, einschließlich häufig verwendeter jQuery-DOM-Operationsmethoden, Ereignisbindung usw. Warten Sie . Dies bedeutet jedoch nicht, dass Sie jQuery nicht verwenden können, wenn Sie AngularJS verwenden. Wenn auf Ihrer Webseite jQuery geladen ist, verwendet AngularJS zuerst Ihre jQuery, andernfalls greift es auf jQLite zurück.

Wenn es sich um eine mobile App oder mobile Webentwicklung handelt, wird empfohlen, Jquery nicht einzuführen. Wenn Sie einige Funktionen von jquery wirklich benötigen, führen Sie Zepto.js ein. Aber glauben Sie mir, mit AngularJS brauchen Sie Jquery nicht!

Die Situation, in der Sie Ihre eigenen Anweisungen schreiben müssen, ist normalerweise dann gegeben, wenn Sie ein jQuery-Plug-in eines Drittanbieters verwenden. Da das Plug-in den Formularwert außerhalb von AngularJS ändert, kann er nicht sofort im Modell widergespiegelt werden. Wir verwenden beispielsweise häufig das jQueryUI-Datepicker-Plug-in. Wenn Sie ein Datum auswählen, trägt das Plug-in die Datumszeichenfolge in das Eingabefeld ein. Die Ansicht ändert sich, aber das Modell wird nicht aktualisiert, da dieser Code nicht zum Verwaltungsbereich von AngularJS gehört. Wir müssen eine Direktive schreiben, um die DOM-Änderungen am Modell sofort zu aktualisieren.

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

Dann führen Sie diese Direktive

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

in HTML ein. Die Direktive besteht darin, benutzerdefinierte Tag-Attribute in HTML zu schreiben, um die Funktion eines Plug-Ins zu erreichen und die Funktionen von HTML effektiv zu ergänzen. Diese deklarative Syntax erweitert HTML. Es wird empfohlen, allgemeine Funktionen und Seitenkomponenten im Projekt in Richtlinien zu kapseln, um die Verwendung und Codepflege zu erleichtern.

Es ist zu beachten, dass es ein AngularUI-Projekt gibt, das uns eine große Anzahl von Anweisungen zur Verfügung stellt, darunter Plug-Ins im Bootstrap-Framework und andere beliebte UI-Komponenten auf Basis von jQuery. Die Community von AngularJS ist jetzt aktiv und das Ökosystem ist robust. Der Wert

in

ngOption ist eine große Falle. Wenn Sie sich die von ngOption generierten Optionswerte von 5a07473c87748fb1bf73f23d45547ab8 ansehen (den Wertteil von jedem f27989812beae9f6405808e298a46122), ist dies definitiv vergeblich. Denn der Wert hier ist immer der Index des internen Elements von AngularJS und nicht der von Ihnen angegebene Formularoptionswert.

Es ist noch notwendig, das Konzept zu ändern. AngularJS verwendet nicht mehr Formulare für die Dateninteraktion, sondern Modelle. Verwenden Sie $http, um das Modell zu übermitteln, und verwenden Sie in PHP file_get_contents('php://input'), um die vom Frontend übermittelten Daten abzurufen.

Probleme mit Input type='number'

Wenn in einigen Versionen von AngularJS das Eingabefeld auf Input type='number' eingestellt ist, schlägt die ng-change-Methode auf Mobilgeräten fehl .

{{ }} Problem

Wenn die Seite initialisiert wird, sieht der Benutzer möglicherweise {{ }} und blinkt dann eine Weile, bevor der eigentliche Inhalt angezeigt wird.
Lösung:

Verwenden Sie die ng-cloak-Direktive, um sie auszublenden
Verwenden Sie ng-bind anstelle von {{ }}

Trennen Sie die Schnittstelle von der Geschäftslogik

Der Controller sollte nicht direkt auf das DOM verweisen, sondern das Verhalten der Ansicht steuern. Zum Beispiel: „Was soll passieren, wenn der Benutzer Seine Rolle besteht einfach darin, „X zu tun“.

DOM-Operationen sollten in Direktiven platziert werden.

Vorhandene Funktionen so weit wie möglich wiederverwenden

Die von Ihnen geschriebene Funktion wurde wahrscheinlich in AngularJS implementiert. Einige Codes können abstrahiert und auf eine Angular-Art wiederverwendet werden. Kurz gesagt, ein Großteil des mühsamen Codes von jQuery kann ersetzt werden.

1. ng-repeat

ng-repeat ist sehr nützlich. Nachdem Ajax Daten vom Server abgerufen hat, verwenden wir häufig jQuery (wie im oben genannten Beispiel), um einigen HTML-Containerknoten weitere Elemente hinzuzufügen, was in AngularJS eine schlechte Praxis ist. Mit ng-repeat wird alles ganz einfach. Definieren Sie ein Array (Modell) in Ihrem $scope, um die vom Server abgerufenen Daten zu speichern, und binden Sie sie dann mit ng-repeat an das DOM. Das folgende Beispiel initialisiert und definiert das Friends-Modell

<div ng-init="friends = [{name:&#39;John&#39;, age:25}, {name:&#39;Mary&#39;, age:28}]">
    I have {{friends.length}} friends. They are:
    <ul>
        <li ng-repeat="friend in friends">
            [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
        </li>
    </ul>
</div>

2. ng-show

 

ng-show 也很有用。使用 jQuery 来根据条件控制界面元素的显示隐藏，这很常见。但是 Angular 有更好的方式来做到这一点。ng-show （以及 ng-hide） 可以根据布尔表达式来决定隐藏和显示。

对于数组或字符串，可以用strXXXX.length控制显示，否则在移动设备上会不正常。

类似的内置 directives 还有 ng-disabled， ng-switch 等等，用于条件控制，语法简洁，都很强大。

3. ng-class

ng-class 用于条件性地给元素添加 class，以前我们也经常用 jQuery 来实现。Angular 中的 ng-class 当然更好用了，例子：

1d7c26ea023fee7ffae44d3aac1b7375...16b28748ea4df4d9c2150843fecfba68

在这里 ng-class 接受一个 object 对象，key 为 CSS class 名，值为 $scope 变量控制的条件表达式，其他类似的内置 directives 还有 ng-class-even 和 ng-class-odd，很实用。

ng-show和ng-if的使用场景问题

使用ng-show和ng-if都实现控制页面元素显示的功能，但2者是不同的，ng-if会动态创建DOM，ng-show只是切换已有DOM的显示，相当于设置style="display:none"，如果使用before和after等css伪类控制显示效果，可能会出现问题，需要根据情况合理使用ng-show和ng-if。

$watch 和 $apply

AngularJS 的双向数据绑定是最令人兴奋的特性了，然而它也不是全能的魔法，在某些情况下你需要做一些小小的修正。

当你使用 ng-model， ng-repeat 等等来绑定一个元素的值时， AngularJS 为那个值创建了一个 $watch，只要这个值在 AngularJS 的范围内有任何改变，所有的地方都会同步更新。而你在写自定义的 directive 时，你需要定义你自己的 $watch 来实现这种自动同步。

有时候你在代码中改变了 model 的值，view 却没有更新，这在自定义事件绑定中经常遇到。这时你就需要手动调用 scope.$apply() 来触发界面更新。上面 datepicker 的例子已经说明了这一点。第三方插件可能会有 call back，我们也可以把回调函数写成匿名函数作为参数传入$apply()中。

将 ng-repeat 和其他 directives 结合起来

ng-repeat 很有用，不过它和 DOM 绑定了，很难在同一个元素上使用其他 directives （比如 ng-show， ng-controller 等等）。

如果你想对整个循环使用某个 directive，你可以在 repeat 外再包一层父元素把 directive 写在那儿；如果你想对循环内部的每一个元素使用某个 directive，那么把它放到 ng-repeat 的一个子节点上即可。

Scope的问题

Scope 在 templates 模板中应该是 read-only 的，而在 controller 里应该是 write-only 的。Scope 的目的是引用 model，而不是成为 model。model 就是我们定义的 JavaScript 对象。

$rootScope 是可以用的，不过很可能被滥用

Scopes 在 AngularJS 中形成一定的层级关系，树状结构必然有一个根节点。通常我们用不到它，因为几乎每个 view 都有一个 controller 以及相对应的自己的 scope。

但偶尔有一些数据我们希望全局应用在整个 app 中，这时我们可以将数据注入 $rootScope。因为其他 scope 都会继承 root scope，所以那些注入的数据对于 ng-show 这类 directive 都是可用的，就像是在本地 $scope 中的变量一样。

当然，全局变量是邪恶的，你必须很小心地使用 $rootScope。特别是不要用于代码，而仅仅用于注入数据。如果你非常希望在 $rootScope 写一个函数，那最好把它写到 service 里，这样只有用到的时候它才会被注入，测试起来也方便些。

相反，如果一个函数的功能仅仅是存储和返回一些数据，就不要把它创建成一个 service。

子作用域的原型继承问题

       辛酸泪，这个也是个大坑。作用域变量的继承是基于javascript原型继承机制的，在使用涉及到作用域的指令如ng-template，ion-modal等时需要特别注意，相关的查找顺序这里就不细说了。