记：AngularJs笔记

小咪咪 2021-12-13 16:45 218阅读 0赞

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

引用angularJs(建议在body元素的底部加载，不会影响到html的加载速度)

<scriptsrc="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

AngularJS 通过 **ng-directives** 扩展了 HTML。

**ng-app**指令指明了应用, **ng-controller** 指明了控制器。

**ng-app** 指令定义一个 AngularJS 应用程序。

**ng-model** 指令把元素值（比如输入域的值）绑定到应用程序。

**ng-bind** 指令把应用程序数据绑定到 HTML 视图。

**ng-init** 指令初始化 AngularJS 应用程序变量。

**ng-repeat**指令定义集合中每项数据的模板

## 1.AngularJS 指令 ##

<table> 
 <tbody> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-app.html" rel="nofollow">ng-app</a></td> 
   <td>定义应用程序的根元素。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-bind.html" rel="nofollow">ng-bind</a></td> 
   <td>绑定 HTML 元素到应用程序数据</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-bind-html.html" rel="nofollow">ng-bind-html</a></td> 
   <td>绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-bind-template.html" rel="nofollow">ng-bind-template</a></td> 
   <td>规定要使用模板替换的文本内容</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-blur.html" rel="nofollow">ng-blur</a></td> 
   <td>规定 blur 事件的行为</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-change.html" rel="nofollow">ng-change</a></td> 
   <td>规定在内容改变时要执行的表达式</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-checked.html" rel="nofollow">ng-checked</a></td> 
   <td>规定元素是否被选中</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-class.html" rel="nofollow">ng-class</a></td> 
   <td>指定 HTML 元素使用的 CSS 类</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-class-even.html" rel="nofollow">ng-class-even</a></td> 
   <td>类似 ng-class，但只在偶数行起作用</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-class-odd.html" rel="nofollow">ng-class-odd</a></td> 
   <td>类似 ng-class，但只在奇数行起作用</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-click.html" rel="nofollow">ng-click</a></td> 
   <td>定义元素被点击时的行为</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-cloak.html" rel="nofollow">ng-cloak</a></td> 
   <td>在应用正要加载时防止其闪烁</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-controller.html" rel="nofollow">ng-controller</a></td> 
   <td>定义应用的控制器对象</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-copy.html" rel="nofollow">ng-copy</a></td> 
   <td>规定拷贝事件的行为</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-csp.html" rel="nofollow">ng-csp</a></td> 
   <td>修改内容的安全策略</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-cut.html" rel="nofollow">ng-cut</a></td> 
   <td>规定剪切事件的行为</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-dblclick.html" rel="nofollow">ng-dblclick</a></td> 
   <td>规定双击事件的行为</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-disabled.html" rel="nofollow">ng-disabled</a></td> 
   <td>规定一个元素是否被禁用</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-focus.html" rel="nofollow">ng-focus</a></td> 
   <td>规定聚焦事件的行为</td> 
  </tr> 
  <tr> 
   <td>ng-form</td> 
   <td>指定 HTML 表单继承控制器表单</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-hide.html" rel="nofollow">ng-hide</a></td> 
   <td>隐藏或显示 HTML 元素</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-href.html" rel="nofollow">ng-href</a></td> 
   <td>为 the &lt;a&gt; 元素指定链接</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-if.html" rel="nofollow">ng-if</a></td> 
   <td>如果条件为 false 移除 HTML 元素</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-include.html" rel="nofollow">ng-include</a></td> 
   <td>在应用中包含 HTML 文件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-init.html" rel="nofollow">ng-init</a></td> 
   <td>定义应用的初始化值</td> 
  </tr> 
  <tr> 
   <td>ng-jq</td> 
   <td>定义应用必须使用到的库，如：jQuery</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-keydown.html" rel="nofollow">ng-keydown</a></td> 
   <td>规定按下按键事件的行为</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-keypress.html" rel="nofollow">ng-keypress</a></td> 
   <td>规定按下按键事件的行为</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-keyup.html" rel="nofollow">ng-keyup</a></td> 
   <td>规定松开按键事件的行为</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-list.html" rel="nofollow">ng-list</a></td> 
   <td>将文本转换为列表 (数组)</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-model.html" rel="nofollow">ng-model</a></td> 
   <td>绑定 HTML 控制器的值到应用数据</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-model-options.html" rel="nofollow">ng-model-options</a></td> 
   <td>规定如何更新模型</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-mousedown.html" rel="nofollow">ng-mousedown</a></td> 
   <td>规定按下鼠标按键时的行为</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-mouseenter.html" rel="nofollow">ng-mouseenter</a></td> 
   <td>规定鼠标指针穿过元素时的行为</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-mouseleave.html" rel="nofollow">ng-mouseleave</a></td> 
   <td>规定鼠标指针离开元素时的行为</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-mousemove.html" rel="nofollow">ng-mousemove</a></td> 
   <td>规定鼠标指针在指定的元素中移动时的行为</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-mouseover.html" rel="nofollow">ng-mouseover</a></td> 
   <td>规定鼠标指针位于元素上方时的行为</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-mouseup.html" rel="nofollow">ng-mouseup</a></td> 
   <td>规定当在元素上松开鼠标按钮时的行为</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-non-bindable.html" rel="nofollow">ng-non-bindable</a></td> 
   <td>规定元素或子元素不能绑定数据</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-open.html" rel="nofollow">ng-open</a></td> 
   <td>指定元素的 open 属性</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-options.html" rel="nofollow">ng-options</a></td> 
   <td>在 &lt;select&gt; 列表中指定 &lt;options&gt;</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-paste.html" rel="nofollow">ng-paste</a></td> 
   <td>规定粘贴事件的行为</td> 
  </tr> 
  <tr> 
   <td>ng-pluralize</td> 
   <td>根据本地化规则显示信息</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-readonly.html" rel="nofollow">ng-readonly</a></td> 
   <td>指定元素的 readonly 属性</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-repeat.html" rel="nofollow">ng-repeat</a></td> 
   <td>定义集合中每项数据的模板</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-selected.html" rel="nofollow">ng-selected</a></td> 
   <td>指定元素的 selected 属性</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-show.html" rel="nofollow">ng-show</a></td> 
   <td>显示或隐藏 HTML 元素</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-src.html" rel="nofollow">ng-src</a></td> 
   <td>指定 &lt;img&gt; 元素的 src 属性</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-srcset.html" rel="nofollow">ng-srcset</a></td> 
   <td>指定 &lt;img&gt; 元素的 srcset 属性</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-style.html" rel="nofollow">ng-style</a></td> 
   <td>指定元素的 style 属性</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-submit.html" rel="nofollow">ng-submit</a></td> 
   <td>规定 onsubmit 事件发生时执行的表达式</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-switch.html" rel="nofollow">ng-switch</a></td> 
   <td>规定显示或隐藏子元素的条件</td> 
  </tr> 
  <tr> 
   <td>ng-transclude</td> 
   <td>规定填充的目标位置</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/angularjs/ng-ng-value.html" rel="nofollow">ng-value</a></td> 
   <td>规定 input 元素的值</td> 
  </tr> 
 </tbody> 
</table>

## 2.AngularJS 事件 ##

*  ng-click
 *  ng-dbl-click
 *  ng-mousedown
 *  ng-mouseenter
 *  ng-mouseleave
 *  ng-mousemove
 *  ng-keydown
 *  ng-keyup
 *  ng-keypress
 *  ng-change

## 3.AngularJS 验证属性 ##

*  $dirty
 *  $invalid
 *  $error

## 4.AngularJS 全局 API ##

<table> 
 <tbody> 
  <tr> 
   <td>angular.lowercase()</td> 
   <td>将字符串转换为小写</td> 
  </tr> 
  <tr> 
   <td>angular.uppercase()</td> 
   <td style="text-align:left;">将字符串转换为大写</td> 
  </tr> 
  <tr> 
   <td>angular.copy()</td> 
   <td>数组或对象深度拷贝</td> 
  </tr> 
  <tr> 
   <td>angular.forEach()</td> 
   <td>对象或数组的迭代函数</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>angular.isArray()</td> 
   <td>如果引用的是数组返回 true</td> 
  </tr> 
  <tr> 
   <td>angular.isDate()</td> 
   <td>如果引用的是日期返回 true</td> 
  </tr> 
  <tr> 
   <td>angular.isDefined()</td> 
   <td>如果引用的已定义返回 true</td> 
  </tr> 
  <tr> 
   <td>angular.isElement()</td> 
   <td>如果引用的是 DOM 元素返回 true</td> 
  </tr> 
  <tr> 
   <td>angular.isFunction()</td> 
   <td>如果引用的是函数返回 true</td> 
  </tr> 
  <tr> 
   <td>angular.isNumber()</td> 
   <td>如果引用的是数字返回 true</td> 
  </tr> 
  <tr> 
   <td>angular.isObject()</td> 
   <td>如果引用的是对象返回 true</td> 
  </tr> 
  <tr> 
   <td>angular.isString()</td> 
   <td>如果引用的是字符串返回 true</td> 
  </tr> 
  <tr> 
   <td>angular.isUndefined()</td> 
   <td>如果引用的未定义返回 true</td> 
  </tr> 
  <tr> 
   <td>angular.equals()</td> 
   <td>如果两个对象相等返回 true</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>angular.fromJson()</td> 
   <td>反序列化 JSON 字符串</td> 
  </tr> 
  <tr> 
   <td>angular.toJson()</td> 
   <td>序列化 JSON 字符串</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>angular.bootstrap()</td> 
   <td>手动启动 AngularJS</td> 
  </tr> 
  <tr> 
   <td>angular.element()</td> 
   <td>包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。</td> 
  </tr> 
  <tr> 
   <td>angular.module()</td> 
   <td>创建，注册或检索 AngularJS 模块</td> 
  </tr> 
 </tbody> 
</table>

信息来源：https://www.runoob.com

转载于:https://www.cnblogs.com/leonchan/p/11063067.html