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模块 |
AngularJS初识的更多相关文章
- angularjs初识ng-app、ng-model、ng-repeat指令
ng-app属性是angular.js的标志语句,它标记了angular.js的作用域.ng-app可以添加在很多地方,像上面那样添加到html标签上,说明angular脚本对整个页面都起作用.也可以 ...
- AngularJS 初识笔记
test.html: <!DOCTYPE html> <html lang="en" ng-app> <head> <meta chars ...
- 初识AngularJS 之 HelloWorld和数据绑定
1.Hello World 我用的开发工具是 atom ,大家有需要的话可以找我要安装包嘻嘻 第一步: 写入以下代码: <!DOCTYPE html> <html ng-ap ...
- ECharts 初识(基于MVC+jQuery+Angularjs实现的Demo)
一.背景: 我们这行做web开发的,很多时候都需要做数据统计报表,现在我所使用的是来自百度团队的ECharts.官方网址:http://echarts.baidu.com/ 我们知 ...
- 我的angularjs源码学习之旅1——初识angularjs
angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...
- 前端 初识angularJS的基本概念
DEMO1演示地址:http://webenh.chinacloudsites.cn/default/demo1 今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angula ...
- 【AngularJS】—— 1 初识AngularJs
怀着激动与忐忑的心情,开始了学习AngularJS的旅程,很久之前就听说了这个前端框架,但是由于自己一直没有从事相关的工作,因此也没有进行学习.这次正好学习AngularJS,直接复习一下前端的知识. ...
- 【AngularJS】—— 2 初识AngularJs(续)
前一篇了解了AngularJS的一些简单的使用,这里继续跟着w3c学习一下剩下的内容. 本篇根据w3cschool.cc继续学习AngularJS剩余的内容,包括: 1 事件 2 模块 3 表单 4 ...
- AngularJS学习-初识
angularJS定义和特点 1.google前端开源框架 2.MVVM(model view view-model)设计模式 : Model将和ViewModel互动(通过$scope对象),将监听 ...
随机推荐
- python 判断网络通断同时检测网络的状态
思路:通过http判断网络通断,通过ping获取网络的状态 注意:不同平台下,调用的系统命令返回格式可能不同,跨平台使用的时候,注意调整字符串截取的值 主程序:network_testing_v0.3 ...
- Linux中什么是动态网站环境及如何部署
当谈论起网站时,我们可能听说过静态和动态这两个词,但却不知道它们的含义,或者从字面意思了解一些却不知道它们的区别. 这一切可以追溯到网站和网络应用程序,Web应用程序是一个网站,但很多网站不是Web应 ...
- Airflow Python工作流引擎的重要概念介绍
Airflow Python工作流引擎的重要概念介绍 - watermelonbig的专栏 - CSDN博客https://blog.csdn.net/watermelonbig/article/de ...
- Tensorflow调试Bug解决办法记录
1.ascii' codec can't encode characters in position 0-4: ordinal not in range(128) 原因是python2.X默认的编码是 ...
- 【LOJ6060】【2017 山东一轮集训 Day1 / SDWC2018 Day1】Set 线性基
题目大意 给出 \(n\) 个非负整数,将数划分成两个集合,记为一号集合和二号集合.\(x_1\) 为一号集合中所有数的异或和,\(x_2\) 为二号集合中所有数的异或和.在最大化 \(x_1 + x ...
- fzyzojP1635 -- 平均值
做法大概有两种: 1.二分平均值,每个值减去平均值,求有没有一个区间的总和大于等于0 (类比,中位数是二分之后,比mid大的为1,小的为0,看有没有区间大于等于0这样) 最值问题——判定问题 单调队列 ...
- 解决远程连接MongoDB出现错误
前言:最近准备学习下MongoDB,安装什么的都已经弄完了,想远程连接来管理MongoDB,用的软件是robo 3t 第一次连的时候就出错误了 大概意思是连接失败,解决如下 第一步,首先检查你的服务器 ...
- GWAS: 曼哈顿图,QQ plot 图,膨胀系数( manhattan、Genomic Inflation Factor)
画曼哈顿图和QQ plot 首推R包“qqman”,简约方便.下面具体介绍以下. 一.画曼哈顿图 install.packages("qqman") library(qqman) ...
- 第四章:条件语句(if)和循环结构(while)
1.流程控制 含义与作用 Python程序执行,一定按照某种规律在执行 a.宏观一定是自上而下(逻辑上方代码一定比逻辑下方代码先执行):顺序结构b.遇到需要条件判断选择不同执行路线的执行方式:分支结构 ...
- web服务器的原理
一:什么是web服务器 web服务器是可以向浏览器等Web客户端提供文档的计算机的程序.当web浏览器连接到服务器上并请求文件时,服务器将处理该请求并将文件发送到该浏览器上,附带的信息会告诉浏览器如何 ...