The difference between AngularJs and Angular’s ​​commonly used instruction writing methods

This article mainly introduces the difference between AngularJs and Angular commonly used instructions. It has a certain reference value. Now I share it with you. Friends in need can refer to it

1: angularjs Directive

1.ng-bind

Replace the content of an HTML element with the value of a given variable or expression

2.ng-blur

Function that needs to be executed when the HTML element loses focus (, , , </code>supported)</p> <pre class="brush:php;toolbar:false"><input ng-blur="pay()" /></pre> <p><strong>3.ng-checked/ng-disabled</strong></p> <p>ng-checked sets the checked attribute of the checkbox or radio button <br> If the ng-disabled expression returns true, the form field will be disabled (<code><input></code>, <code><select></code>, or <code><textarea></code>)</p> <pre class="brush:php;toolbar:false"><input type="checkbox|radio" ng-checked="flag" ng-disabled="flag"></input> //flag为布尔类型</pre> <p><strong>4.ng-class</strong></p> <p>Give HTML elements dynamic Bind one or more CSS classes. </p> <pre class="brush:php;toolbar:false">//写法一 <p ng-class="home"></p> //写法二 <p ng-class="{'red':flag,'green':'!flag'}"></p> //flag为true则添加red类名，false则添加green类名</pre> <p><strong>5.ng-click</strong></p> <pre class="brush:php;toolbar:false"><button ng-click="addpay($event)">OK</button> //$event为当前元素的多种属性</pre> <p><strong>6.ng-repeat</strong></p> <pre class="brush:php;toolbar:false"><p ng-repeat="(index,item) in list"></p> // 每项值：{{item}} // 下标：{{index}}</pre> <ul class=" list-paddingleft-2"> <li><p>ng -app defines the root element of the application. </p></li> <li><p>ng-bind Binds HTML elements to application data</p></li> <li><p>ng-bind-html Binds innerHTML of HTML elements to application data , and remove dangerous characters in HTML strings </p></li> <li><p>ng-bind-template Specifies the text content to be replaced with a template</p></li> <li><p>ng-blur Specifies the behavior of the blur event</p></li> <li><p>ng-change Specifies the expression to be executed when the content changes</p></li> <li><p>ng-checked Specifies whether the element is selected </p></li> <li><p>ng-class Specifies the CSS class used by HTML elements</p></li> <li><p>ng-class-even Similar to ng-class, but only starts on even lines Function</p></li> <li><p>ng-class-odd Similar to ng-class, but only works in odd rows</p></li> <li><p>ng-click Defines when the element is clicked Behavior</p></li> <li><p>ng-cloak Prevents the application from flickering when it is about to load</p></li> <li> <p>ng-controller Defines the application's controller object</p> </li> <li><p>ng-copy Specifies the behavior of copy events</p></li> <li><p>ng-csp Modifies the security policy of content</p></li> <li><p>ng -cut Specifies the behavior of the cut event</p></li> <li>##ng-dblclick Specifies the behavior of the double-click event<p></p> </li> <li>ng-disabled Specifies whether an element is disabled<p></p> </li> <li>ng-focus Specifies the behavior of focus events<p></p> </li> <li>ng-form Specifies the HTML form to inherit the controller form<p></p> </li> <li>ng-hide Hide or show HTML elements<p></p> </li> <li>ng-href Specify links for the <p><a><code> elements</code></p> </li> <li>ng-if If the condition is false, remove the HTML element<p></p> </li> <li>ng-include Include the HTML file in the application<p></p> </li> <li>ng-init Define the initialization value of the application <p></p> </li> <li>ng-jq Define the library that the application must use, such as: jQuery<p></p> </li>##ng-keydown Specify the key to press Event behavior<li><p></p></li>ng-keypress Specifies the behavior of the key press event<li><p></p></li>ng-keyup Specifies the behavior of the key release event<li> <p></p> </li>ng-list Convert text to list (array)<li> <p></p>##ng-model Bind the value of HTML controller to application data</li> <li> <p></p>ng-model-options Specifies how to update the model</li> <li> <p></p>ng-mousedown Specifies the behavior when the mouse button is pressed</li> <li> <p></p>ng-mouseenter Specifies the behavior when the mouse pointer passes through the element</li> <li> <p></p>ng-mouseleave Specifies the behavior when the mouse pointer leaves the element</li> <li> <p></p>ng- mousemove Specifies the behavior of the mouse pointer when moving within the specified element</li> <li><p>##ng-mouseover Specifies the behavior of the mouse pointer when it is located above the element</p></li> <li><p>ng- mouseup specifies the behavior when the mouse button is released on the element</p></li> <li><p>ng-non-bindable specifies that the element or sub-element cannot bind data</p></li> <li><p>ng-open Specify the open attribute of the element </p></li> <li> <p>ng-options Specify </p><options></li>## in the <li><select><p> list <code></code><code>#ng-paste Specifies the behavior of paste events</code></p> </li> <li>ng-pluralize Displays information according to localization rules<p></p> </li> <li>ng-readonly Specifies the readonly attribute of the element<p></p> </li> <li>ng-repeat Defines the template for each data in the collection<p></p> </li> <li>ng-selected Specifies the element's selected attribute<p></p> </li> <li>ng-show Show or hide the HTML element<p></p> </li> <li>ng-src Specify the src attribute of the <img> element<p></p> </li> <li>ng-srcset Specifies the srcset attribute of the <img> element<p></p> </li> <li><p>ng-style    指定元素的 style 属性</p></li> <li><p>ng-submit    规定 onsubmit 事件发生时执行的表达式</p></li> <li><p>ng-switch    规定显示或隐藏子元素的条件</p></li> <li><p>ng-transclude    规定填充的目标位置</p></li> <li><p>ng-value    规定 input 元素的值</p></li> </ul> <p>详情参考：http://www.runoob.com/angular...</p> <blockquote><strong>二：angular指令</strong></blockquote> <p>imageUrl 属性：</p> <pre class="brush:php;toolbar:false"><img [src]="imageUrl"></pre> <p>[disabled]当组件为 isUnchanged( 未改变 ) 时禁用一个按钮：</p> <pre class="brush:php;toolbar:false"><button [disabled]="isUnchanged">按钮是禁用的</button></pre> <p>设置指令的属性：</p> <pre class="brush:php;toolbar:false"><p [ngClass]="classes">[ngClass]绑定到classes 属性</p></pre> <p>表格的colspan/rowspan</p> <pre class="brush:php;toolbar:false"><table border=1>   <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>   <tr><td>Five</td><td>Six</td></tr> </table></pre> <p>[(NgModel)]</p> <pre class="brush:php;toolbar:false"><input [(ngModel)]="currentUser.firstName"></pre> <p>NgIf</p> <pre class="brush:php;toolbar:false"><p *ngIf="currentUser">Hello,{{currentUser.firstName}}</p></pre> <p>NgFor</p> <pre class="brush:php;toolbar:false"><p *ngFor="let user of users; let i=index">{{i + 1}} - {{user.fullName}}</p></pre> <p>（click）</p> <pre class="brush:php;toolbar:false"><button type="submit" class="btn btn-primary" (click)="hide()">确定</button></pre> <p>[(checked)]</p> <pre class="brush:php;toolbar:false"><input type="checkbox" [(checked)]="checkflag"></pre> <ul class=" list-paddingleft-2"> <li> <p>common</p> <pre class="brush:php;toolbar:false">    NgClass     NgComponentOutlet     NgForOf     NgIf     NgPlural     NgPluralCase     NgStyle     NgSwitch     NgSwitchCase     NgSwitchDefault     NgTemplateOutlet</pre> </li> <li> <p>forms</p> <pre class="brush:php;toolbar:false">    CheckboxControlValueAccessor     CheckboxRequiredValidator     DefaultValueAccessor     EmailValidator     FormArrayName     FormControlDirective     FormControlName     FormGroupDirective     FormGroupName     MaxLengthValidator     MinLengthValidator     NgControlStatus     NgControlStatusGroup     NgForm     NgModel     NgModelGroup     NgSelectOption     PatternValidator     RadioControlValueAccessor     RequiredValidator     SelectControlValueAccessor     SelectMultipleControlValueAccessor</pre> </li> <li> <p>router</p> <pre class="brush:php;toolbar:false">    RouterLink     RouterLinkActive     RouterLinkWithHref     RouterOutlet</pre> </li> </ul> <p>详情参考：https://angular.io/api/</p> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！</p> <p>相关推荐：</p> <p class="comments-box-content"><a title="Jquery以及AngularJS中Get/Post的传参" href="//m.sbmmt.com/js-tutorial-406299.html" target="_blank">Jquery以及AngularJS中Get/Post的传参</a><br></p> <p class="mt20 ad-detail-mm hidden-xs"><a title="AngularJS 前台分页实现" href="//m.sbmmt.com/js-tutorial-406298.html" target="_blank">AngularJS 前台分页实现</a><br></p><p>The above is the detailed content of The difference between AngularJs and Angular’s ​​commonly used instruction writing methods. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">php</a> <a href="javascript:void(0);">jquery</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">angular</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">switch</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">checkbox</a> <a href="javascript:void(0);">include</a> <a href="javascript:void(0);">字符串</a> <a href="javascript:void(0);">指针</a> <a href="javascript:void(0);">继承</a> <a href="javascript:void(0);">class</a> <a href="javascript:void(0);">copy</a> <a href="javascript:void(0);">对象</a> <a href="javascript:void(0);">事件</a> <a href="javascript:void(0);">href</a> <a href="javascript:void(0);">innerHTML</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">http</a> <a href="javascript:void(0);">https</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Parameter passing in Get/Post in Jquery and AngularJS" href="//m.sbmmt.com/m/faq/406299.html">Parameter passing in Get/Post in Jquery and AngularJS</a></span><span>Next article：<a class="dBlack" title="Parameter passing in Get/Post in Jquery and AngularJS" href="//m.sbmmt.com/m/faq/406301.html">Parameter passing in Get/Post in Jquery and AngularJS</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="//m.sbmmt.com/m/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="//m.sbmmt.com/m/faq/347615.html" title="jQuery waterfall absolute positioning layout (2) (delayed AJAX loading of images)" class="aBlack">jQuery waterfall absolute positioning layout (2) (delayed AJAX loading of images)</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/faq/347616.html" title="jQuery waterfall flow floating layout (1) (delayed AJAX loading of images)" class="aBlack">jQuery waterfall flow floating layout (1) (delayed AJAX loading of images)</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/faq/347619.html" title="Learn more about js waterfall flow layout" class="aBlack">Learn more about js waterfall flow layout</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/faq/347665.html" title="Deep copy of objects in JavaScript" class="aBlack">Deep copy of objects in JavaScript</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/faq/347666.html" title="Detailed explanation of shallow copy and deep copy in javascript" class="aBlack">Detailed explanation of shallow copy and deep copy in javascript</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="//m.sbmmt.com/m/"><b class="icon1"></b><p>Home</p></a></li><li><a href="//m.sbmmt.com/m/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="//m.sbmmt.com/m/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="//m.sbmmt.com/m/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="//m.sbmmt.com/m/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="//m.sbmmt.com/m/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="//m.sbmmt.com/m/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="//m.sbmmt.com/m/" >Home</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/course.html" >Course</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/xiazai" >Download</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/game" >Game</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>