您的位置：首页 > Web前端 > AngularJS

AngularJs教程（二）

2015-12-07 11:23 621 查看

1. XMLHTTPRequest

$http是AngularJs的一个核心服务，用于读取远程服务器上的数据。

json文件内容如下

[
{type:"apple", weight:"3kg"},
{type:"orange", weight:"2kg"}
]index.html文件
<div ng-app="myApp" ng-controller="fruitCtrl">

<ul>
<li ng-repeat="x in tips">
{{x.type + ' ' + x.weight}}
</li>
</ul>

</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('fruitCtrl', function($scope, $http) {
$http.get("data_json.php")
.success(function(response) {$scope.tips = response.records;});
});
</s
4000
cript>


$http.get()从服务器上面获取静态json数据
控制器对象有一个属性$scope.tips,加载json数据时，变成一个数组，用于存数据。

2. 跨域HTTP请求

如果需要从不同的服务器上获取数据，那么就需要使用跨域HTTP请求

可以用以下代码进行跨域请求（PHP）

header("Access-Control-Allow-Origin: *");

3. AngularJs HTML DOM

AngularJs为HTML DOM的属性提供了绑定应用数据的指令

3.1
ng-disabled指令

ng-disabled值为true or false
该指令绑定了HTML的disabled属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>

<div ng-app="" ng-init="switch=true">
<input type="button" value="click on me" ng-disabled="switch">
</div>

<script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>

</body>
</html>


按钮显示为不可点状态

3.2
ng-show

ng-show指令隐藏或显示HTML元素
也可以用表达式来计算布尔值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>

<div ng-app="" ng-init="weight=200">
<p ng-show="true">you can see me!</p>
<p ng-show="false">you cant see me!ha ha!</p>
<p ng-show="weight<300">the weight less than 300,so you can see me!</p>
</div>

<script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>

</body>
</html>




3.3
ng-hide

ng-hide指令同样用来隐藏或显示html元素

4. AngularJs事件

4.1
ng-click

ng-click指定了AngularJs点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>

<div ng-app="" ng-init="count=0">
<input type="button" ng-click="count=count+1" value="每点击一次下方数字就会加上一">
<p>{{count}}</p>
</div>

<script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>

</body>
</html>


点击按钮五次的效果



4.2
隐藏/显示html元素

下面的例子中用到了控制器的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>

<div ng-app="myapp" ng-controller="showCtrl">
<input type="button" ng-click="toggle()" value="show/hide">
<p ng-hide="flag">text........</p>
</div>

<script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>

<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('showCtrl', function($scope){
$scope.flag = false;
$scope.toggle = function(){
$scope.flag = !$scope.flag;
};
});
</script>
</body>
</html>


效果如下



点击按钮
下方文字隐藏



5.AngularJs模块

上面的例子中也可以将js文件外部引用
//包含模块定义程序
<script type="text/javascript" src="myapp.js"></script>
//包含了控制器
<script type="text/javascript" src="ctrl.js"></script>


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


[]参数用于定义模块的依赖关系
如有依赖关系，则在[]中写入模块的名称

ctrl.js
app.controller('showCtrl', function($scope){
$scope.flag = false;
$scope.toggle = function(){
$scope.flag = !$scope.flag;
};
});


ps:AngularJs让所有的函数的作用域在该模块下，有效避免了JavaScript中全局函数被覆盖的问题


参考：

AngularJs教程（二）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  json javascript 框架 xmlhttprequest
相关文章推荐
新的分享
章节导航