AngularJS学习笔记一

什么是AngularJS

AngularJS是一个JavaScript框架。它是一个以JavaScript编写的库。

AngularJS是一个以JavaScript文件形式发布的，可通过script标签添加到网页中。

AngularJS扩展了HTML

AngularJS使得开发现代的单一页面应用程序变得更容易

• AngularJS把应用程序数据绑定到HTML元素
• AngurarJS可以克隆和重复HTML元素
• AngurarJS可以隐藏和显示HTML元素
• AngularJS可以在HTML元素“背后”添加代码。
• AngularJS支持输入验证。

AngularJS通过ng-directives扩展了HTML。

AngularJS指令

AngularJS指令是以ng作为前缀的HTML属性。(HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。)

ng-init指令初始化AngularJS应用程序变量。

ng-app指令定义一个AngularJS应用程序。

ng-model指令把元素值（比如输入的域的值）绑定到应用程序。

ng-bind指令把应用程序数据绑定到HTML视图。

<div ng-app=""> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1>

<span style="white-space:pre"></span><h1>Hello <span ng-bind="name"></span></h1></div>

当页面加载完毕，AngularJS自动开启。

ng-app指令告诉AngularJS,<div>元素是AngularJS应用程序的所有者。

ng-mode指令把输入域的值绑定到应用程序变量name。

ng-bind指令把应用程序变量name绑定到某个段落的innerHTML。

AngularJS表达式

AngularJS表达式在双大括号内：{{expression}}。

AngularJS表达式把数据绑定到HTML，这与ng-bind指令有异曲同工之妙。

AngularJS将在表达式书写的位置“输出”数据。

AngularJS表达式很像JavaScript表达式：它们可以包含文字，运算符和变量。

注意：如果您移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。

AngularJS应用

AngularJS模块（Module）定义了AngularJS应用。

AngularJS控制器（Controller）用于控制AngularJS应用。

ng-app指令定义应用，ng-controller定义了控制器。

AngularJS模块定义应用：

AngularJS 模块

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

AngularJS 控制器控制应用:

AngularJS 控制器

app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});