AngularJS学习笔记

AngularJS整体作用

总的来说AngularJS分为三个部分，AngularJS应用，AngularJS表达式，AngularJS指令。
效果上是AngularJS 通过新的属性和表达式扩展了 HTML。
AngularJS 是以一个 JavaScript 文件形式发布的，在使用时，可通过 script 标签添加到网页中

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

AngularJs

AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

AngulaiJS表达式

AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 数字

AngularJS 数字就像 JavaScript 数字：

<div ng-app="" ng-init="quantity=1;cost=5">
	<p>总价： {{ quantity * cost }}</p>
</div>

AngularJS 字符串

AngularJS 字符串就像 JavaScript 字符串:

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
	<p>姓名： {{ firstName + " " + lastName }}</p>
</div>

AngularJS 对象

AngularJS 对象就像 JavaScript 对象：

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
	<p>姓为 {{ person.lastName }}</p>
</div

AngularJS 数组

AngularJS 数组就像 JavaScript 数组：

<div ng-app="" ng-init="points=[1,15,19,2,40]">
	<p>第三个值为 {{ points[2] }}</p>
</div>

AngularJS指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-app指令

ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

ng-init 指令

ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它

ng-model指令

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

<form ng-app="" name="myForm" ng-init="myText = 'test@test.com'">
    Email:
    <input type="email" name="myAddress" ng-model="myText" required></p>
    <h1>状态</h1>
    {{myForm.myAddress.$valid}}
    {{myForm.myAddress.$dirty}}
    {{myForm.myAddress.$touched}}
</form>

ng-valid:布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true
ng-dirty:布尔值属性，表示用户是否修改了表单。 ture，表示有修改过；false 表示修没有
ng-touched:布尔值属性，表示用户是否和控件进行过交互

ng-repeat 指令

ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。

<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-model 是用于表单元素的，支持双向绑定。对普通元素无效；
ng-bind 用于普通元素，不能用于表单元素，应用程序单向地渲染数据到元素；
当 ng-bind 和 {{}} 同时使用时，ng-bind 绑定的值覆盖该元素的内容。

AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
scope 是模型,是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
Scope 可应用在视图和控制器上

如何使用 Scope

当你在 AngularJS 创建控制器（JavaScript文件）时，你可以将 $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}}。

AngularJS 控制器

AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

<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>

应用解析：
AngularJS 应用程序由 ng-app 定义。应用程序在 < div > 内运行。
ng-controller=“myCtrl” 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。