- AngularJS 通过 指令 (
ng-directives)扩展了 HTML，且通过 表达式 绑定数据到 HTML。 ng-app指令定义一个 AngularJS 应用程序;ng-model指令把元素值（比如输入域的值）绑定到应用程序;ng-bind指令把应用程序数据绑定到 HTML 视图;ng-init指令初始化 AngularJS 应用程序变量- AngularJS 指令是以 ng 作为前缀的 HTML 属性
- HTML5 允许扩展的（自制的）属性，以 data- 开头
- AngularJS 表达式写在双大括号内：{{ expression }};表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙
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= "John"; $scope.lastName= "Doe"; }); </script>
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用,ng-controller 定义了控制器。
一.指令
AngularJS 指令是扩展的 HTML 属性，带有前缀ng-。
1.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>
2.ng-app 指令定义了 AngularJS 应用程序的 根元素
3.ng-model指令用于绑定应用程序数据到 HTML 控制器(input,select,textarea)的值
二.Scope(作用域)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象，有可用的方法和属性。Scope 可应用在视图和控制器上。
在 AngularJS 创建控制器时，可以将 $scope 对象当作一个参数传递:
<div ng-app="myApp" ng-controller="myCtrl"> <h1>{{carname}}</h1> </div> <script> var app = angular.module('myApp',function($scope) { $scope.carname = "Volvo"; }); </script>
当在控制器中添加
{{carnage}}
三.控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据。 AngularJS 控制器是常规的 JavaScript 对象。
四.过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
<div ng-app="myApp" ng-controller="personCtrl"> <p>姓名为 {{ lastName | uppercase }}</p> </div>
五.服务(Service)
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。AngularJS 内建了30 多个服务。
var app = angular.module('myApp',[]);
app.controller('customersCtrl',function($scope,$location) {
$scope.myUrl = $location.absUrl();
});
$location 服务，它可以返回当前页面的 URL 地址
$http是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。
var app = angular.module('myApp',[]);
app.controller('myCtrl',$http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
