<span ng-bind="name"></span>
<span ng:bind="name"></span>
<span ng_bind="name"></span>
<span data-ng-bind="name"></span>
<span x-ng-bind="name"></span>
Ps：上述绑定方法等价
ng-app=”模块名” 定义angularjs的使用范围；
ng-init=”变量=值”，初始化变量的值，当有多个变量时，中间用分号隔开；
ng-model=”变量” 定义变量名；
ng-bind=”变量” 绑定变量名，获取该变量的数据。这里的变量即是前一条的变量名。但一般用双重花括号来获取变量的值。
<div ng-app="">
<p>名字：<input type="text" ng-model="name" /></p>
<h1>hello{{name}}</h1>
</div>
ng-app指令告诉angularjs，<div>元素是angularjs应用程序的所有者；ng-model指令把输入域的值绑定到应用程序变量name；ng-bind指令把应用程序变量name绑定到某个段落的innerHTML。
Angularjs对于开发单一页面应用程序变得更易：angularjs把应用程序数据绑定到HTML元素；可以克隆和充分HTML代码；可以隐藏和显示HTML元素；可以在HTML元素背后添加代码；支持输入验证。
<div ng-app="" ng-init="firstName='jonh'">
<p>姓名为：<span ng-bind="firstName"></span></p>
</div>
H5允许扩展的属性，以data-开头，angularjs属性以ng-开头，但可以使用data-ng-让网页对h5有效。
<div ng-app="" data-ng-init="firstName='jonh'">
<p>姓名为：<span data-ng-bind="firstName"></span></p>
</div>
Angularjs表达式：
Angularjs表达式写在双大括号内；angularjs表达式把数据绑定到HTML，类似于ng-bind指令；angularjs将在表达式书写的位置输出数据。
Angularjs模块定义了angularjs的应用；angularjs控制器用于控制angularjs应用；ng-app指令了应用，与ng-controller定义了控制器。
8-20
Angularjs指令是扩展的HTML属性，带有前缀ng-。Angularjs通过指令扩展HTML；其中内置指令可以为应用添加功能，也可自定义指令。
Angularjs指令：
ng-app指令：初始化一个angularjs应用；
ng-init指令：初始化应用程序数据；通常情况下不使用，而是选择控制器或模块来实现相同的功能。
ng-model指令：把元素元素值绑定到应用程序；
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-odd指令：类似ng-class，但只在奇数行起作用；
ng-class-even指令：但只在偶数行起作用
ng-click指令：定义元素被点击时的行为；
ng-cloak指令：在应用正要加载时防止其闪烁；
ng-controller指令：定义应用的控制器对象；
ng-copy指令：规定拷贝事件的行为；
ng-csp指令：修改内容的安全策略；
ng-cut指令：规定剪切事件的行为；
ng-dbclick指令：规定双击事件的行为；
ng-disabled指令：规定一个元素是否被禁用；
ng-focus指令：规定聚焦事件的行为；
ng-form指令：指定HTML表单继承控制器表单；
ng-hide指令：隐藏或显示HTML元素；
ng-href指令：为a元素指令连接
ng-if指令：条件为false移除HTML元素；
ng-include指令：在应用中包含HTML文件
ng-jq指令：定义应用必须使用到的库，如jQuery
ng-keydown指令：规定按下按键事件的行为
ng-keyup指令：规定松开按键事件的行为
ng-keypress指令：规定按下按键事件的行为，其包括keydown与keyup两阶段
ng-list指令：将文本转换为列表
ng-model指令：绑定HTML控制器（input、select、textarea）的值到应用数据；
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元素的值
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular/angular.js"></script>
</head>
<body>
<div ng-controller="personCtrl">
<button ng-click="toggle()">隐藏/显示</button>
<p ng-hide="myVar">
名：<input type="text" ng-model="firstName"><br />
姓：<input type="text" ng-model="lastName"><br />
姓名：{{firstName + "" + lastName}}
</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('personCtrl',function($scope){
$scope.firstName = 'john';
$scope.lastName = 'js';
$scope.myVal = false;
$scope.toggle = function(){
$scope.myVar = !$scope.myVar;
}
});
</script>
</body>
</html>
Ps：这里的ng-app = “myApp”,而不是ng-app = “app” ！ng-hide = “true”是让元素不可见。
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular/angular.js"></script>
</head>
<body>
<div ng-controller="personCtrl">
<button ng-click="toggle()">隐藏/显示</button>
<p ng-show="myVar">
名：<input type="text" ng-model="person.firstName"><br />
姓：<input type="text" ng-model="person.lastName"><br />
姓名：{{person.firstName + " " + person.lastName}}
</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('personCtrl',function($scope){
$scope.person ={
firstName:'jonh',
lastName:'kds'
}
$scope.myVar = true;
$scope.toggle = function(){
$scope.myVar = !$scope.myVar;
}
});
</script>
</body>
</html>
Ps：ng-show = “true” 设置元素可见
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular/angular.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='jonkk'">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你的输入为：{{firstName}}</p>
</div>
</body>
</html>
Ps：ng-app初始化一个angularjs应用程序；ng-init初始化应用程序数据；ng-model把元素值绑定到应用程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular/angular.js"></script>
</head>
<body>
<div ng-app="" ng-init="names=[
{name:'sda',country:'d'},
{name:'df',country:'dd'},
{name:'fgs',country:'sd'}
]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{x.name + ',' + x.country}}
</li>
</ul>
</div>
</body>
</html>
Ps：ng-repeat指令用在一个对象数组上，也可以用于重复一个HTML元素
Ps：ng-app指令定义了angularjs应用程序的根元素，ng-app指令在网页加载完毕时会自动引导应用程序。
Ps：.directive函数可以添加自定义指令，要调用自定义指令，需要在HTML元素上添加自定义指令名。指令名可以以驼峰法进行命名，但使用时需要使用 – 形式名字！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../angular/angular.js"></script>
</head>
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
</html>
Ps：可以通过元素名、属性、类名及注释进行指令调用：
（1） 元素名：上面方法即是通过元素名进行指令调用的
（2） 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../angular/angular.js"></script>
</head>
<body ng-app="myApp">
<div runoob-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
</html>
（3） 类名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../angular/angular.js"></script>
</head>
<body ng-app="myApp">
<div class="runoob-directive"></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "C",
template : "<h1>自定义指令!</h1>"
};
});
</script>
<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>
</body>
</html>
（4） 注释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../angular/angular.js"></script>
</head>
<body ng-app="myApp">
<!-- directive: runoob-directive -->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "M",
replace : true,
template : "<h1>自定义指令!</h1>"
};
});
</script>
<p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p>
<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p>
</body>
</html>
Ps：限制使用：通过restrict属性，限制你的指令只能通过特定的方式来调用，restrict的值可以是一下几种：A：作为属性使用； E：作为元素名使用； C作为类名使用； M作为注释使用； ps：restrict默认值为EA，即可以通过元素名和属性名进行指令调用。
angularjs事件：
ng-click：angularjs点击事件
ng-dbl-click：
ng-mousedown：
ng-mouseenter：
ng-mouseleave：
ng-mousemove：
ng-keydown：
ng-keyup：
ng-keypress：
ng-change：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular/angular.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我</button>
<p>{{count}}</p>
</div>
<script>
angular.module('app',[]).controller('myCtrl',function($scope){
$scope.count = 0;
});
</script>
</body>
</html>
angularjs验证属性：
$dirty：
$invalid：
$error：
Angularjs全局API（Application Programming Interface）：
（1） 转换
angular.lowercase()：将字符串转换为小写
angular.uppercase()：将字符串转换为大写
angular.copy()：数组或对象深度拷贝
angular.forEach()：对象或数组的迭代函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{x1}}</p>
<p>{{x2}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.x1 = 'JSON';
$scope.x2 = angular.lowercase($scope.x1);
});
</script>
</body>
</html>
（2） 比较
angular.isArray()：如果引用的是数组返回true
angular.isDate()：
angular.isDefined()：
angular.isElement()：
angular.isFunction()：
angular.isNumber()：
angular.isObject()：
angular.isString()：
angular.isUndefined()：
angular.equals()：
（3） JSON
angular.fromJson()：反序列化JSON字符串
angular.toJson()：序列化JSON字符串
（4） 基础
angular.bootstrap()：手动启动angularjs
angular.element()：包裹着一部分DOM element或是HTML字符串，把其作为一个jQuery元素来处理
angular.module()：创建、注册或检索angularjs模块
$scope: 应用在html视图与JavaScript控制器之间的纽带，其是一个对象，有可用的方法和属性，可应用在视图和控制器上。当利用angularjs创建控制器时，可以将$scope对对象当作一个参数传递。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../angular/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
<p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p>
</body>
</html>
当在控制器中添加$scope对象时，视图可以获取到这些属性，在视图中，不需要添加$scope前缀，直接添加属性名即可。
Angularjs应用组成包括：View（视图），即HTML； Model（模型），当前视图中可用的数据； Controller（控制器），即JavaScript函数，可以添加或修改属性。
scope是模型。Scope是一个JavaScript对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../angular/angular.js"></script>
</head>
<body
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>{{greeting}}</h1>
<button ng-click='sayHello()'>点我</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Runoob";
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.name + '!';
};
});
</script>
<p>当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。</p>
</body>
</html>
service：
angularjs中，服务是一个函数或对象，可在angularjs应用中使用。有个$location服务，可以返回当前页面的URL地址。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>当前页面的URL：</p>
<h3>{{myUrl}}</h3>
</div>
<p>该实例使用了内建的$location服务获取当前页面的URL</p>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$location){
$scope.myUrl = $location.absUrl();
});
</script>
</body>
</html>
Ps：$location服务作为一个参数传递到controller中。若使用它，则需要在controller中定义。
$location服务，可以使用DOM中存在的对象。
$http服务：服务向服务器发送请求，应用响应服务器传过来的数据。
$timeout服务：对应了js里的window.setTimeout函数
$interval服务对应了js中的window.setInterval。
参考 & 感谢：http://www.runoob.com/angularjs