zoukankan      html  css  js  c++  java
  • 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。

  • 相关阅读:
    Golang 实现简单的 Web 服务器
    Aliyun linux repo文件
    云服务器查看登录ip和本机出口ip
    10个高效Linux技巧及Vim命令对比
    使用mkfs.ext4格式化大容量磁盘
    LINUX SHELL 多个命令一起执行的几种方法
    GPT分区
    3种方法更改Linux系统的主机名(hostname)
    Nginx代理访问RDS
    Centos7安装Docker
  • 原文地址:https://www.cnblogs.com/myhusky/p/5237790.html
Copyright © 2011-2022 走看看