https://github.com/angular/angular.js/blob/master/src/ng/q.js

1、ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。
2、ng-model 指令把输入域的值绑定到应用程序变量 name。
3、ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
4、ng-init 指令初始化 AngularJS 应用程序变量。

ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序
ng-bind 指令把应用程序数据绑定到 HTML 视图。

四大特性:
mvc
模块化和依赖注入
双向数据绑定
指令

注意:
ng-bind 在标签内绑定
{{}}直接绑定

5、
AngularJS 表达式 与 JavaScript 表达式
类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。

ng-repeat="x in names" 对内容循环迭代

一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块。

6、应用状态
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

7、Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

8、AngularJS 过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。

currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中。

8、服务
$location 本地服务
$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据。
AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
AngularJS $interval 服务对应了 JS window.setInterval 函数。

使用自定义的的服务 hexafy 将一个数字转换为16进制数: 启动自定义服务

当你创建了自定义服务,并连接到你的应用上后,你可以在控制器,指令,过滤器或其他服务中使用它。

9、
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数。

$http.get() 从web服务器上读取静态 JSON 数据。

前面实例我们使用了数组作为数据源,以下我们将数据对象作为数据源。

10、表格
表格显示序号可以在 <td> 中添加 $index:
使用 $even 和 $odd

ng-if="$odd
11、dom
ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。
ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容(value)。

12、表单

novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。

$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录

13、全局api

API 描述
angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串,如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字,如果是返回 true。

最复杂指令:

restrict 值可以是以下几种:
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用

==========================================================
数组:

<div ng-app="myApp" ng-controller="myCtrl">

<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

在指令 里 操作dom

transclude:true 不替换
<div ng-transclude></div>

complile link 编译

指令 link 函数 操作dom 绑定事件

2-7

scope 创建独立作用域 scope:{}

暴露方法 卸载controller里
link 处理指令内部的数据

return

require: 依赖某个指令

scope 绑定策略 @ 字符串 == 双向 & 传递父函数

3-2

compile 操作scope报错 不能操作

@ 函数 块级键

angularjs笔记(1)的更多相关文章

  1. AngularJS笔记---注册服务

    在前面的笔记中,了解到AngularJS的后台控制可以在Controller里面实现. 可是如果所有的逻辑代码都写到Controller会显得该Controller过于臃肿. 不方便维护, Angul ...

  2. AngularJs 笔记

    初识 directive 指令 ng-app 初始化一个AngularJs应用程序(通过一个值(比如 ng-app="myModule")连接到代码模块.) ng-init 初始化 ...

  3. AngularJS笔记--自定义指令

    在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义.  下面定 ...

  4. AngularJS笔记---路由视图

    最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我 ...

  5. AngularJS笔记---作用域和控制器

    什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头.可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设 ...

  6. angularjs 笔记(1) -- 引导

    首先: 1,引入angularJS文件,<script type="text/javascript" src="angularjs.min.js"> ...

  7. AngularJS笔记---数据绑定

    一.数据绑定 1.简单绑定 下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 ...

  8. angularjs笔记(三)

    AngularJS API 7.其他一些常用指令,布尔类型的指令也可以用表达式 (1).数组索引$index <!DOCTYPE html> <html> <head&g ...

  9. angularjs笔记(二)

    AngularJS API 4.AngularJS过滤器 使用一个管道符(|)添加到表达式和指令中 例1.格式化字母转为大写 <!DOCTYPE html> <html> &l ...

  10. angularjs笔记(一)

    简介 AngularJS API angularjs是javascript框架,通过指令(指令就是自定义的html标签属性)扩展了HTML,并且可以通过表达式(表达式使用)绑定数据到HTML. 1.a ...

随机推荐

  1. 第09章—使用Lombok插件

    spring boot 系列学习记录:http://www.cnblogs.com/jinxiaohang/p/8111057.html 码云源码地址:https://gitee.com/jinxia ...

  2. 剑指Offer——从尾到头打印链表

    题目描述: 输入一个链表,从尾到头打印链表每个节点的值. 分析: 方法1:利用栈的性质,先从头到尾遍历链表每个节点的值存入栈中,最后一个一个出栈顺序便是从尾到头的. 方法2:直接从头到尾遍历链表存储节 ...

  3. 东方通tongweb linux安装

    1.把安装的bin文件和license.dat文件放到/opt目录下 2.运行$sh Install_TW5.0.0.0_Standard_Linux.bin -i console 命令在 Linux ...

  4. Python迭代对象、迭代器、生成器

    在了解Python的数据结构时,容器(container).可迭代对象(iterable).迭代器(iterator).生成器(generator).列表/集合/字典推导式(list,set,dict ...

  5. Win7中的IIS配置asp时出现“出现403 文件夹禁止訪问错误”!

    Win7中的IIS配置asp时出现"出现403 文件夹禁止訪问错误"! 在[默认文档]中设一下启动文件即可了.

  6. 海报工厂之(一)android 如何给图片添加水印和文字

    在Android中如何给图片添加水印,下面截取了部分核心代码,仅供参考: /**      * 获取图片缩小的图片      * @param src      * @return      */   ...

  7. 0503-Hystrix保护应用-feign的hystrix支持

    一.概述 1.1.基础[示例一] 如果Hystrix在类路径上并且feign.hystrix.enabled = true,Feign将用断路器包装所有方法.还可以返回com.netflix.hyst ...

  8. Ubuntu16.04安装postgresql9.4(转发:http://www.cnblogs.com/sparkdev/p/5678874.html)

    安装前的检查 首先查看是否已经安装了旧版本: dpkg -l |grep postgresql 如果已经安装了某个版本的postgresql,请先卸载. 安装postgresql 添加postgres ...

  9. WireShark告诉你ping百度时都发生了什么

    备注:  测试机器为Mac 重点展示本机发出icmp的过程(dns-->arp-->icmp) 本机默认网关 ->route -n get e -n get default rout ...

  10. Myeclipse中文乱码解决方式

    我们刚刚安装的Myeclipse有可能使用的是GBK的编码方式,而通常我们的程序都是使用的是UTF-8的编码方式,所以当我们导入一个项目的时候,会产生乱码,解决方式如下: 一.将整个project设置 ...