AngularJS小结

1.简介
  AngularJS 通过 ng-directives 扩展了 HTML。

2.AngularJS指令
  ng-app 指令定义一个AngularJS 应用程序的根元素。指令在网页加载完毕时会自动引导(自动初始化)应用程序。
  ng-model 指令把元素值(比如输入域的值)绑定到应用程序。绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
      为应用程序数据提供类型验证(number、email、required)。
      为应用程序数据提供状态(invalid、dirty、touched、error)。
      为 HTML 元素提供 CSS 类。
      绑定 HTML 元素到 HTML 表单。
      ng-bind 指令把应用程序数据绑定到 HTML 视图。
      ng-init 指令初始化 AngularJS 应用程序变量。

      ng-controller 指令定义了应用程序控制器。
      .directive 函数来添加自定义的指令。要调用自定义指令,HTMl 元素上需要添加自定义指令名。
      restrict 属性
        restrict 值可以是以下几种:
          E 只限元素名使用
          A 只限属性使用
          C 只限类名使用
          M 只限注释使用
        restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
3.AngularJS 表达式
      AngularJS 表达式写在双大括号内:{{ expression }}。
      AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
      AngularJS 将在表达式书写的位置"输出"数据。
4.AngularJS 应用
      AngularJS 模块(Module) 定义了 AngularJS 应用。
      AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
      ng-app指令定义了应用, ng-controller 定义了控制器。
5.表单验证
      Angular 的表单属性 $valid, $invalid, $pristine, $dirty
          $pristine 表单是否未被动过
          $dirty 表单是否被动过
          $valid 表单是否验证通过
          $invalid 表单是否验证失败
          $error 表单的验证错误


      1. required指令: 相当于html5的required属性,验证不能为空
      2. ng-maxlength属性: 验证内容的长度最大值
      3. ng-minlength属性: 验证内容的长度最小值
      4. ng-disabled属性: 判断按钮是否禁用. 值为true时,禁用该按钮
6.scope(作用域)
    AngularJS 应用组成如下:
      View(视图), 即 HTML。
      Model(模型), 当前视图中可用的数据。
      Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。

    scope 是模型。
    scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
    所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
7.AngularJS 过滤器
    过滤器可以使用一个管道字符(|)添加到表达式和指令中。
    currency 格式化数字为货币格式。
    filter 从数组项中选择一个子集。
    lowercase 格式化字符串为小写。
    orderBy 根据某个表达式排列数组。
    uppercase 格式化字符串为大写。
    输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。
8.AngularJS 服务(Service)
    AngularJS 中你可以创建自己的服务,或使用内建服务。
    $location 服务,它可以返回当前页面的 URL 地址
    $http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求,应用响应服务器传送过来的数据。
    $timeout 服务对应了 JS window.setTimeout 函数。$timeout 访问在规定的毫秒数后执行指定函数
    $interval 服务对应了 JS window.setInterval 函数。$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式
9.AngularJS Select(选择框)
    ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出
      也可以用ng-repeat 指令会重复一个 HTML 元素:可以用于数组的循环

     显示序号 ($index)表格显示序号可以在 <td> 中添加 $index:
10.AngularJS HTML DOM
    AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。
    ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

    ng-show 指令隐藏或显示一个 HTML 元素。默认为false
    ng-hide 指令用于隐藏或显示 HTML 元素。默认为false
11.AngularJS 事件
    ng-click 指令定义了 AngularJS 点击事件。
12.AngularJS 模块
    模块定义了一个应用程序。
    模块是应用程序中不同部分的容器。
    模块是应用控制器的容器。
    控制器通常属于一个模块。

    AngularJS 的 angular.module 函数来创建模块:
    ng-controller 指令来添加应用的控制器:
13.AngularJS 表单
    AngularJS 表单是输入控件的集合。
    HTML 控件:input 元素,select 元素,button 元素,textarea 元素
    novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。
14.AngularJS 全局 API
  AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合

angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串,如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字,如果是返回 true。

原文地址:https://www.cnblogs.com/myhusky/p/5237790.html