ng是比较新的技术，版本1.0是在2012年发布的。是JS的框架，可通过<script>标签添加到HTML页面
ng通过指令扩展了HTML，通过表达式绑定数据到HTML
ng通过ng-directives扩展HTML
网页加载完毕时，ng自动开启
ng-app 指令告诉ng，<div>元素是ng应用程序的“所有者”
ng-model指令把输入域的值绑定到应用程序变量name
ng-bind指令把应用程序变量name绑定到某个段落的innerHTML
如果移除ng-app指令，HTML将直接把表达式显示出来，不会去计算表达式的结果
可通过data-ng-init=“firstName=‘林 ’”绑定内容，然后通过data-ng-bing=“firstName”属性来获取值
ng模块（Module）定义了ng应用
ng控制器（Controller）用于控制ng应用
ng-app指令定义了应用，ng-controller定义了控制器
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
ng表达式
ng把表达式写在双大括号里面：{{expression}}
ng在表达式书写的位置输出位置
ng表达式很像JS表达式，可包含文字、运算符和变量
<div ng-app="">
<p>我的第一个表达式： {{"我爱你，刘冰玉"}}</p>
</div>
<div ng-app="" ng-init="quantity=1;cost=8">
<p>总价: {{ quantity * cost }}</p>
</div>
使用 ng-init 不是很常见，有更好的初始化数据的方式
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>
ng对象
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
</div>
ng数组
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
ng表达式和js表达式
都可以包含字母，操作符，变量
不同的是：ng表达式可以写在HTML中，不支持条件判断，循环及异常，支持过滤器
ng指令
ng允许自定义指令
<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>
</div>
一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序
数据绑定
同步ng表达式与ng数据
重复HTML元素
ng-repeat 指令会重复一个 HTML 元素
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
ng完美支持数据库的增删改查，把实例中的对象想象成数据库中的记录
ng-app指令
定义了ng应用程序的根元素
在网页加载完毕时会自动初始化应用程序
通过一个值（比如ng-app="myModule"）连接到代码模块
ng-init指令
为ng应用程序定义了初始值
一般情况下不使用，而是用另一个控制器或模块来代替
ng-model指令
绑定HTML元素到赢哦有那个程序数据
为应用程序数据提供类型验证（number、email、required）
为应用程序数据提供状态（invalid、dirty、touched、error）
为HTML元素提供CSS类
绑定HTML到HTML表单
ng-repeat指令对于集合中的每个项会克隆一次HTML元素
创建自定义指令
使用.directive函数来创建自定义指令
使用驼峰法来命名一个指令，runoobDirective，但是使用它时需要以-分割，runoob-directive
可通过元素名、属性、类名、注释来调用指令
<runoob-directive></runoob-directive>
<div runoob-directive></div>
<div class="runoob-directive"></div>
<!-- 指令: runoob-directive -->
你可以限制你的指令只能通过特定的方式来调用
通过添加
restrict 属性,并设置只值为
"A", 来设置指令只能通过属性的方式来调用
E为元素名使用，A为属性使用，C为类名使用，M为注释使用 restrict默认值为EA
ng模型 ng-model指令
ng-model指令用于绑定应用程序数据到HTML控制器（input，select、textarea）的值
ng-model指令可以将输入域的值与ng创建的变量绑定
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
验证用户输入
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
提示信息会在 ng-show 属性返回 true 的情况下显示
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
</form>
css类
ng-model指令基于它们的状态为HTML元素提供了CSS类
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
ng-model指令根据表单域的状态添加/移除以下类
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine
ng作用域 Scope
Scope是应用在HTML（试图）和JS（控制器）之间的纽带
Scope是一个对象，有可用的方法和属性
如何使用Scope
在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递
<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>
当在控制器中添加$scope对象时，视图（HTML）可以获取这些属性
视图中不需要添加$scope前缀，只需要添加属性名即可，如：{{carname}}
Scope作用范围
了解你当前使用的scope是非常重要的。大型项目中HTML DOM中有多个作用域，要清楚自己使用的scope对于的作用域
当我们使用
ng-repeat 指令时，每个重复项都访问了当前的重复对象
<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>
根作用域
每个应用都有一个$rootScope,它可以作用在ng-app指令包含的所有HTML元素中
$rootScope可作用于整个应用中，是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用
ng控制器
ng控制器控制ng应用程序的数据
ng控制器是常规的JS对象，由标准的JS对象的构造函数创建
ng-controller指令定义了应用程序控制器
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.model('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
ng应用程序由ng-app定义。应用程序在<div>内运行
ng-controller="myCtrl"属性是一个ng指令。用于定义一个控制器
myCtrl函数是一个JS函数
ng用$scope对象来调用控制器
控制器在作用域汇总创建了两个属性（firstName和lastName）
ng-model指令绑定输入域到控制器的属性（firstName和lastName）
外部文件中的控制器
在大型的应用程序中，通常把控制器存储在外部文件中
<script src="personController.js"></script>
ng过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中
ng过滤器可用于转化数据
currency：格式化数字为货币格式
filter：从数组项中选择一个子集
lowercase：格式化字符串为小写
orderBy：根据某个表达式排列数组
uppercase：格式化字符串为大写
表达式中添加过滤器
<p>姓名为 {{ lastName | uppercase }}</p>
<div ng-app="myApp" ng-controller="costCtrl">
数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.quantity = 1;
$scope.price = 9.99;
});
</script>
向指令添加过滤器
orderBy过滤器根据表达式排列数组
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
过滤输入
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
ng选择框 Select
ng可使用数组或对象创建一个下拉列表选项
ng-options创建选项框
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
ng-repeat创建选项框
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
ng-options指令更适合创建下拉列表：使用ng-options的选项的一个对象，ng-repeat是一个字符串。使用对象能获取更多信息，应用也更灵活
数据源为对象
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择的网站是:</p>
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>
<h1>你选择的值是: {{selectedSite}}</h1>
</div>
<p>该实例演示了使用对象作为创建下拉列表。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
});
</script>
使用对象作为数据源, x 为键(key), y 为值(value)
value 在 key-value 对中也可以是个对象
在下拉菜单也可以不使用
key-value 对中的
key , 直接使用对象的属性
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>
ng表格
ng-repeat 指令可以完美的显示表格
使用 angular 显示表格是非常简单的
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
.success(function (response) {$scope.names = response.records;});
});
</script>
给表格添加样式
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
使用orderBy过滤器排序
<table>
<tr ng-repeat="x in names | orderBy : 'Country'">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
显示序列（$index）
表格显示序号可以在 <td> 中添加 $index
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
ng HTML DOM
ng为HTML DOM元素的属性提供了绑定应用数据的指令
ng-disabled指令
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">按钮
</p>
<p>
{{ mySwitch }}
</p>
</div>
ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性
ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）
ng-show指令
ng-show指令隐藏或显示一个HTML元素
<div ng-app="">
<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
</div>
ng-hide指令
ng-show指令隐藏或显示一个HTML元素
<div ng-app="">
<p ng-hide="true">我是不可见的。</p>
<p ng-hide="false">我是可见的。</p>
</div>
ng事件
ng有自己的HTML事件指令
ng-click指令
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
ng模块
模块是应用程序中不同部分的容器
模块是应用控制器的容器
控制器通常属于一个模块
创建模块
通过ng的angular.module函数来创建模块
<div ng-app="myApp">...</div>
<script>
var app = angular.module(
"myApp
", []);
</script>
myApp参数对应执行应用的HTML元素
通常ng应用程序将模块和控制器包含在JS文件中
ng表单
ng表单是输入控件的集合
HTML控件
input元素、select元素、button元素、textarea元素
重置表单
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user }}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName:"John", lastName:"Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>
ng输入验证
客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的
HTML 表单属性 novalidate 用于禁用浏览器默认的验证
