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模块

AngularJS初识的更多相关文章

  1. angularjs初识ng-app、ng-model、ng-repeat指令

    ng-app属性是angular.js的标志语句,它标记了angular.js的作用域.ng-app可以添加在很多地方,像上面那样添加到html标签上,说明angular脚本对整个页面都起作用.也可以 ...

  2. AngularJS 初识笔记

    test.html: <!DOCTYPE html> <html lang="en" ng-app> <head> <meta chars ...

  3. 初识AngularJS 之 HelloWorld和数据绑定

    1.Hello World 我用的开发工具是   atom   ,大家有需要的话可以找我要安装包嘻嘻 第一步: 写入以下代码: <!DOCTYPE html> <html ng-ap ...

  4. ECharts 初识(基于MVC+jQuery+Angularjs实现的Demo)

    一.背景:      我们这行做web开发的,很多时候都需要做数据统计报表,现在我所使用的是来自百度团队的ECharts.官方网址:http://echarts.baidu.com/      我们知 ...

  5. 我的angularjs源码学习之旅1——初识angularjs

    angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...

  6. 前端 初识angularJS的基本概念

    DEMO1演示地址:http://webenh.chinacloudsites.cn/default/demo1   今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angula ...

  7. 【AngularJS】—— 1 初识AngularJs

    怀着激动与忐忑的心情,开始了学习AngularJS的旅程,很久之前就听说了这个前端框架,但是由于自己一直没有从事相关的工作,因此也没有进行学习.这次正好学习AngularJS,直接复习一下前端的知识. ...

  8. 【AngularJS】—— 2 初识AngularJs(续)

    前一篇了解了AngularJS的一些简单的使用,这里继续跟着w3c学习一下剩下的内容. 本篇根据w3cschool.cc继续学习AngularJS剩余的内容,包括: 1 事件 2 模块 3 表单 4 ...

  9. AngularJS学习-初识

    angularJS定义和特点 1.google前端开源框架 2.MVVM(model view view-model)设计模式 : Model将和ViewModel互动(通过$scope对象),将监听 ...

随机推荐

  1. python 判断网络通断同时检测网络的状态

    思路:通过http判断网络通断,通过ping获取网络的状态 注意:不同平台下,调用的系统命令返回格式可能不同,跨平台使用的时候,注意调整字符串截取的值 主程序:network_testing_v0.3 ...

  2. Linux中什么是动态网站环境及如何部署

    当谈论起网站时,我们可能听说过静态和动态这两个词,但却不知道它们的含义,或者从字面意思了解一些却不知道它们的区别. 这一切可以追溯到网站和网络应用程序,Web应用程序是一个网站,但很多网站不是Web应 ...

  3. Airflow Python工作流引擎的重要概念介绍

    Airflow Python工作流引擎的重要概念介绍 - watermelonbig的专栏 - CSDN博客https://blog.csdn.net/watermelonbig/article/de ...

  4. Tensorflow调试Bug解决办法记录

    1.ascii' codec can't encode characters in position 0-4: ordinal not in range(128) 原因是python2.X默认的编码是 ...

  5. 【LOJ6060】【2017 山东一轮集训 Day1 / SDWC2018 Day1】Set 线性基

    题目大意 给出 \(n\) 个非负整数,将数划分成两个集合,记为一号集合和二号集合.\(x_1\) 为一号集合中所有数的异或和,\(x_2\) 为二号集合中所有数的异或和.在最大化 \(x_1 + x ...

  6. fzyzojP1635 -- 平均值

    做法大概有两种: 1.二分平均值,每个值减去平均值,求有没有一个区间的总和大于等于0 (类比,中位数是二分之后,比mid大的为1,小的为0,看有没有区间大于等于0这样) 最值问题——判定问题 单调队列 ...

  7. 解决远程连接MongoDB出现错误

    前言:最近准备学习下MongoDB,安装什么的都已经弄完了,想远程连接来管理MongoDB,用的软件是robo 3t 第一次连的时候就出错误了 大概意思是连接失败,解决如下 第一步,首先检查你的服务器 ...

  8. GWAS: 曼哈顿图,QQ plot 图,膨胀系数( manhattan、Genomic Inflation Factor)

    画曼哈顿图和QQ plot 首推R包“qqman”,简约方便.下面具体介绍以下. 一.画曼哈顿图 install.packages("qqman") library(qqman) ...

  9. 第四章:条件语句(if)和循环结构(while)

    1.流程控制 含义与作用 Python程序执行,一定按照某种规律在执行 a.宏观一定是自上而下(逻辑上方代码一定比逻辑下方代码先执行):顺序结构b.遇到需要条件判断选择不同执行路线的执行方式:分支结构 ...

  10. web服务器的原理

    一:什么是web服务器 web服务器是可以向浏览器等Web客户端提供文档的计算机的程序.当web浏览器连接到服务器上并请求文件时,服务器将处理该请求并将文件发送到该浏览器上,附带的信息会告诉浏览器如何 ...