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();
}
});
}
});Then introduce this directive in HTML
<input type="text" datepicker ng-model="myObject.myDateValue" />
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
It is still necessary to change the concept. AngularJS no longer uses forms for data interaction, but uses Models. Use $http to submit the Model, and in php, use file_get_contents('php://input') to obtain the data submitted by the front end.
Input type='number' problem
In some versions of AngularJS, when the input box is set to Input type='number', the ng-change method will fail on mobile devices.
{{ }} problem
When the page is initialized, the user may see {{ }}, and then it will flash for a while before the real content appears.
Solution:
Use ng-cloak directive to hide it
Use ng-bind instead of {{ }}
Separate the interface from business logic
Controller should not directly reference the DOM, but should control the behavior of the view. For example, "If the user operates X, what should happen?", "Where can I get The interface has nothing to do with the logic of the view. Its role is simply to "do X."
DOM operations should be placed inside directives.
Reuse existing functions as much as possible
The functions you write are likely to have been implemented in AngularJS. Some codes can be abstracted and reused in a more Angular way. In short, a lot of jQuery's tedious code can be replaced.
1. ng-repeat
ng-repeat is very useful. After Ajax gets data from the server, we often use jQuery (such as the example mentioned above) to add more elements to some HTML container nodes, which is a bad practice 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 use ng-repeat to bind it to the DOM. The following example initializes and defines the friends model
<div ng-init="friends = [{name:'John', age:25}, {name:'Mary', 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 当然更好用了，例子：
在这里 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等时需要特别注意，相关的查找顺序这里就不细说了。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
