AngularJS 学习手记（一）

什么是 AngularJS？

AngularJS 是一个 JavaScript 框架

               它是一个以 JavaScript 编写的库。

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

AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。

            它可通过 <script> 标签添加到 HTML 页面。

在网页中加上：

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

就可以直接使用了。

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

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

<div ng-app="">

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

<input type="text" ng-model="name"/>

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

 <h1>Hello {{name}}</h1>

AngularJS 指令

AngularJS 指令是以 ng 作为前缀的 HTML 属性。

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

<div ng-app="" ng-init="myname='yang'">
姓名为 <span ng-bind="myname"></span>

注意 ：

HTML5 允许扩展的（自制的）属性，以 data- 开头，HTML5 允许扩展的（自制的）属性，以 data- 开头。

例如：

 <div data-ng-app="" data-ng-init="myname='yang'">

AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}，AngularJS 表达式写在双大括号内：{{ 10 + 10 }}

AngularJS 应用

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

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

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

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

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

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

AngularJS一个简单完整的例子：

<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= "Blue";
    $scope.lastName= "Sky";
});
</script>