AngularJs
1、AngularJs简介：
AngularJs是一个JavaScript框架，是以JavaScript编写的库，他可以通过<script>标签添加到HTML页面，AngularJs通过指令扩展了HTML，且通过表达式绑定数据到HTML，Angularjs是以一个JavaScript文件形式发布的。
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
注意：我们建议把脚本放在<body>元素的底部，这会提高网页加载速度，因为HTML加载不受制于脚本加载。
ng-app指令初始化一个AngularJs应用程序 <html ng-app>
ng-model指令把元素值（比如输入域的值）绑定到应用程序
ng-bind指令把应用程序数据绑定到HTML视图
ng-init指令初始化AngularJs应用程序变量
<div ng-app="" ng-init="firstName='John'"> <p>姓名为 <span ng-bind="firstName"></span></p> </div>
ng-repeat指令对于集合中（数组中）的每个项会克隆一次HTML元素
2、作用域
当你再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是一个JavaScript对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>我的名字是 {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Dow";
});
</script>
根作用域
所有的应用都有一个$rootScope，它可以作用在ng-app指令包含的所有HTML元素中，$rootScope渴作用域整个应用中，是各个controller中scope的桥梁，用rootScope定义的值，可以在各个controller中使用。创建控制器时，将$rootScope作为参数传递，可在应用中使用：
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>
3、控制器
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>
解析：
ng-controller="myCtrl"是一个指令，用于定义一个控制器。myCtrl函数是一个JavaScript函数，使用$scope来调用控制器
4、过滤器
AngularJs可用于转换数据：
currency：格式化数字为货币格式
filter：从数组项中选择一个子集
lowercase：格式化字符串为小写
uppercase：格式化字符串为大写
表达式中添加过滤器：
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中：
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p>
</div>
过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中：
orderBy过滤器根据表达式排列数据
<div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li> </ul> <div>
过滤输入
输入过滤器后跟一个冒号和一个模型名称，filter过滤器从数组中选择一个子集：
<div ng-app="myApp" ng-controller="namesCtrl"> <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in names | filter:test | orderBy:'country'"> {{ (x.name | uppercase) + ', ' + x.country }} </li> </ul> </div>
5、XMLHttpRequest
AngularJs $http是一个用于读取web服务器上的数据的服务
$http.get(url)是用于读取服务器数据的函数
<div ng-app="myApp" ng-controller="siteCtrl"> <ul> <li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) { $http.get("http://www.runoob.com/try/angularjs/data/sites.php") .success(function (response) {$scope.names = response.sites;}); }); </script>
