Angular.JS学习笔记——1
内容来自：http://www.runoob.com/angularjs/angularjs-intro.html
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
我们建议把脚本放在 <body> 元素的底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
什么是 AngularJS？
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
- AngularJS 把应用程序数据绑定到 HTML 元素。
- AngularJS 可以克隆和重复 HTML 元素。
- AngularJS 可以隐藏和显示 HTML 元素。
- AngularJS 可以在 HTML 元素"背后"添加代码。
- AngularJS 支持输入验证。
ng-init 指令初始化 AngularJS 应用程序变量
AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
ngularJS 模块定义应用:
AngularJS 模块
AngularJS 控制器控制应用:
AngularJS 控制器
AngularJS 表达式
AngularJS 数字
AngularJS 使用 表达式 把数据绑定到 HTML。
等价于：
AngularJS 字符串
AngularJS 对象
AngularJS 数组
AngularJS 表达式 与 JavaScript 表达式
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。
AngularJS 指令
AngularJS 通过被称为 指令 的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
AngularJS 参考手册
| 指令 | 描述 |
|---|---|
| ng-app | 定义应用程序的根元素。 |
| ng-bind | 绑定 HTML 元素到应用程序数据 |
| ng-bind-html | 绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符 |
| ng-bind-template | 规定要使用模板替换的文本内容 |
| ng-blur | 规定 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 事件
AngularJS 支持以下事件:
- ng-click
- ng-dbl-click
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-keydown
- ng-keyup
- ng-keypress
- ng-change
AngularJS 验证属性
- $dirty
- $invalid
- $error
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() | 序列化 JSON 字符串 |
基础
| API | 描述 |
|---|---|
| angular.bootstrap() | 手动启动 AngularJS |
| angular.element() | 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。 |
| angular.module() | 创建，注册或检索 AngularJS 模块 |
重复HTML
| AngularJS 完美支持数据库的 CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。 把实例中的对象想象成数据库中的记录。 |
ng-app 指令
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
ng-init 指令
ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
ng-model 指令
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以：
- 为应用程序数据提供类型验证（number、email、required）。
- 为应用程序数据提供状态（invalid、dirty、touched、error）。
- 为 HTML 元素提供 CSS 类。
- 绑定 HTML 元素到 HTML 表单。
ng-repeat 指令
ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
AngularJS ng-model 指令
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
双向绑定
验证用户输入
以上实例中，提示信息会在 ng-show 属性返回 true 的情况下显示。
ng-model 指令根据表单域的状态添加/移除以下类：
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine
AngularJS Scope(作用域)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
如何使用 Scope
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
Scope 作用范围
了解你当前使用的 scope 是非常重要的。
在以上两个实例中，只有一个作用域 scope，所以处理起来比较简单，但在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。
每个 <li> 元素可以访问当前的重复对象，这里对应的是一个字符串， 并使用变量 x 表示。
根作用域
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
AngularJS 控制器
Angular.JS学习笔记——1的更多相关文章
- Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- Angular.js 学习笔记
AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...
- Angular JS 学习笔记（二）
1. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定 ...
- Angular JS 学习笔记（一）
1. 菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 2. Angular JS中文网:http://www.apjs.net ...
- Angular.js学习笔记（三）
一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...
- Angular.js学习笔记 （二）
用A链接对象解析url的组成 var url = 'https://www.baidu.com:8080/aaa/1.html?id=10#name'; var aLink = document.cr ...
- angular.js学习笔记--概念总结
好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $root ...
- angular.js学习笔记：实现商品价格计算实例
<!DOCTYPE html> <html lang="en" ng-app> <!-- ng-app:初始化的指令 也可以解析局部--> &l ...
- Angular.js学习笔记 （一）
- angular中最重要的概念是指令(directive)- ng-model 是双向数据绑定的指令,效果就是将当前元素的value属性和模型中的[user.name]建立绑定关系### 模块(Mo ...
- angular.js学习笔记(二)
1.安装core ,shared模块 ng g m core ng g m shared 2.在shared中导入core模块 core模块只加载一次所以将公共组件放到core中 3.创建公共组 ...
随机推荐
- 安装MySql for Visual Studio后，打开IDE找不到MySql选项
只能说安装程序功能不健全,找不到Visual Studio也不问,自己随便找了个地儿把插件放下了...这程序员真2! 原文在这里,作者思路对头.原文:"安装MySql for Visual ...
- C# 字符编码解码 Encoder 和Decoder
在网络传输和文件操作中,如果数据量很大,需要将其划分为较小的快,此时可能出现一个数据块的末尾是一个不匹配的高代理项,而与其匹配的低代理项在下一个数据块. 这时候使用Encoding的GetBytes方 ...
- 面向小白的JS笔记 - #Codecademy#学习笔记
前言 最初浏览过<JavaScript秘密花园>,前一段时间读过一点点<JavaScript语言精粹>和一点点<JavaScript高级程序设计>(一点点是指都只是 ...
- CGAL4.1在VS2010上配置
配这个环境花了好几天的时间,虽然网上有很多相关的步骤,但是还是出了不少小错误,具体的步骤有很多,我就只记下我遇到的问题,我用的是CGAL4.1 boost1.51 CMake2.8 Qt4.8.2: ...
- JS原生效果瀑布流布局的实现(一)
JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- 第五章 搭建 S3C6.410 开发板的 测试环境
一.简介: 对于嵌入式驱动开发者来说,你必须要了解什么是开发板:它与我们经常用的手机类似, 包含了显示屏. 键盘. Wi-Fi. 蓝牙等模块等,是开发者必备的硬件设备.但与手机不同的是:在开发板上安装 ...
- win32自绘按钮，使用GDI+（二）
一.解决上一篇的两个问题. 1.按钮背景透明 方法是,在绘制按钮之前,向按钮的父窗口发生WM_CTLCOLORBTN消息.该消息返回一个画刷句柄,系统使用该画刷句柄画出按钮的背景.所以我们在处理这个消 ...
- c#读取XML
http://www.cnblogs.com/a1656344531/archive/2012/11/28/2792863.html ================================= ...
- icmp_ping学习笔记
1.用字符串指针做为发送缓冲区和接收缓冲区的指针: 2.icmp报文类型结构体可自行定义,也可用<netinet/ip_icmp.h>中定义好的strcut icmp结构体: 3.ip_h ...
- php用smtp发送邮件
php用smtp发送邮件 1.其实用smtp协议发送邮件很简单,用框架或者原生都可以,我们需要用到class.phpmailer.php 和class.smtp.php,大家可以去网上下载. 这是一个 ...