• AngularJS初识


     AngularJS 简介

    AngularJS是一个javaScript框架,是一个用JavaScript编写的库,通过指令扩展了HTML,且通过表达式绑定数据到HTML中。

    AngularJS使开发现代的单页面应用程序(Single Page Applications)变得更加容易。

    AngularJS指令:是以ng为前缀的HTML属性。

    AngularJS表达式:通过双写大括号{{}} 或者通过ng-bind指令指定。

    AngularJS模块(Module)定义了AngularJS应用。

    AngularJS控制器(controller)用于控制AngularJS应用。

    ng-app指令定义了应用,ng-controller定义了控制器。

    AngularJS 表达式

    AngularJS表达式写在大括号内:{{表达式}}

    AngularJS表达式把数据绑定到HTML中,与ng-bind指令的功能一致。

    AngularJS将在表达式的书写位置输出数据

    AngularJS表达式的功能和javaScript的表达式功能的异同:

    相同:

    可以包含字母、数字、操作符、变量。

    不同:

    AngularJS可以写在HTML中

    AngularJS表达式不支持条件判断和循环

    表达式支持过滤器

    AngularJS的指令 

    指令

    描述

    ng-app

    定义应用程序的根元素

    ng-bind

    绑定html元素到应用程序数据

    ng-bind-html

    绑定html元素的innerHTML到应用程序数据,并移除HTML字符串中危险字符。

    ng-bind-template

    要使用模板替换的文本内容

    ng-blur

    元素失去焦点事件行为

    ng-change

    在内容改变时要执行的表达式

    ng-checked

    元素是否被选中

    ng-class

    指定HTML元素使用的css类

    ng-class-even

    类似ng-class,但只在偶数行起作用

    ng-class-odd

    类似ng-class,但在在奇数行起作用

    ng-click

    元素被点击时的行为

    ng-cloak

    在应用要加载时防止其闪烁

    ng-controller

    应用程序的控制器对象

    ng-copy

    拷贝事件的行为

    ng-csp

    修改内容的安全策略

    ng-cut

    剪切事件

    ng-dblclick

    双击事件

    ng-disabled

    一个元素是否被禁用

    ng-focus

    聚焦事件

    ng-form

    指定HTML表单继承控制器表单

    ng-hide

    银行或者显示html元素

    ng-href

    为the<a>元素指定连接

    ng-if

    如果条件为false移除html元素

    ng-include

    在应用中包含html文件

    ng-init

    定义应用的初始化值

    ng-jq

    定义应用必须使用到的库,如jquery

    ng-keydown

    按下按键事件

    ng-keypress

    按下按键事件

    ng-keyup

    松开按键事件

    ng-list

    将文本转换为列表

    ng-model

    绑定HTML控制器的值到应用

    ng-model-options

    规定如何更新模型

    ng-mousedown

    按下鼠标按键的事件

    ng-mouseenter

    鼠标指针穿过元素的事件

    ng-mouseleave

    鼠标指针离开元素的事件

    ng-mousemove

    鼠标指针在指定的元素中移动时事件

    ng-mouseover

    鼠标指针位于元素上方的事件

    ng-mouseup

    在元素上松开鼠标按钮的事件

    ng-non-bindable

    元素或子元素不能绑定数据

    ng-open

    指定元素open属性

    ng-options

    在<select>列表中指定的<options>

    ng-paste

    粘贴事件

    ng-pluralize

    本地化规则显示

    ng-readonly

    元素的readonly属性

    ng-repeat

    定义集合中每项数据的模板

    ng-selected

    元素的selected属性

    ng-show

    显示或者隐藏html元素

    ng-src

    img的src属性

    ng-srcset

    img的srcset属性

    ng-style

    元素的style属性

    ng-submit

    onsubmit事件

    ng-switch

    显示或隐藏子元素的条件

    ng-transclude

    填充的目标位置

    ng-value

    input元素的值

    AngularJS事件

    事件

    描述

    ng-click

    单击事件

    ng-dbl-click

    双击事件

    ng-mousedown

    按下鼠标按键的事件

    ng-mouseenter

    鼠标指针穿过元素的事件

    ng-mouseleave

    鼠标指针离开元素的事件

    ng-mousemove

    鼠标指针在指定的元素中移动时事件

    ng-mouseover

    鼠标指针位于元素上方的事件

    ng-mouseup

    在元素上松开鼠标按钮的事件

    ng-keydown

    按下按键事件

    ng-keypress

    按下按键事件

    ng-keyup

    松开按键事件

    ng-focus

    聚焦事件

    ng-blur

    失去焦点事件

    ng-change

    在内容改变时要执行的表达式

    ng-copy

    拷贝事件

    ng-cut

    剪切事件

    ng-paste

    粘贴事件

    ng-submit

    onsubmit事件

    AngularJS验证属性

    属性

    描述

    $Pristine

    表单没有填写内容

    $dirty

    表单有填写记录

    $invalid

    字段内容是非法的

    $valid

    字段内容是合法的


    转换
    AngularJS全局API 

    API

    描述

    Angular.lowercase()

    将字符串转换为小写

    Angular.uppercase()

    将字符串转换为大写

    Angular.copy()

    数组或对象深度拷贝

    Angular.forEach()

    对象或数组迭代函数

     比较

    API

    描述

    Angular.isArray()

    如果引用的是数组返回true

    Angular.isDate()

    如果引用的是日期返回true

    Angular.isDefined()

    如果引用的已定义返回true

    Angular.isElement()

    如果引用的是DOM元素返回true

    Angular.isFunction()

    如果引用的是函数返回true

    Angular.isNumber()

    如果引用的是数字返回true

    Angular.isObject()

    如果引用的是对象返回true

    Angular.isString()

    如果引用的是字符串返回true

    Angular.isUndefined()

    如果引用的是未定义返回true

    Angular.equals()

    如果两个对象相等返回true

     JSON

    API

    描述

    Angular.fromJson

    反序列化JSON字符串

    Angular.toJson

    序列化字符串

     基础

    API

    描述

    Angular.bootstrap()

    手动启用angularJS

    Angular.element()

    包裹着一部分DOM element 或者是HTML字符串,把它作为一个JQuery元素来处理。

    Angular.module()

    创建,注册或检索Angular模块

  • 相关阅读:
    C++实现反射
    ubuntu下安装secureCRT(含破解方法)
    2018 年力扣高频算法面试题汇总-难题记录-鸡蛋掉落
    对于opencv全面貌的认识和理解
    关于c++类的一些知识的总结
    vs2017+opencv4.0.1安装配置详解(win10)
    leetcode-120-三角形最小路径和
    leetcode-64-最小路径和
    leetcode-917-仅仅反转字母
    leetcode-914-卡牌分组
  • 原文地址:https://www.cnblogs.com/zhaochengshen/p/6694453.html
Copyright © 2020-2023  润新知