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

AngularJS学习笔记（二）

2016-01-08 17:27 573 查看

AngularJS $http 请求数据
get请求

<div ng-app="" ng-controller="customersController">
<ul>
<li ng-repeat="x in names">
{{x.Name+','+x.Country}}
</li>
<ul>
</div>
<script>
function customersController($scope,$http){
$http.get("http://www.w3cschool.cc/rty/angularjs/data/customers_JSON.php")
.success(function(response){$scope.names=response;});
}
</script>

$http get 实例1：

$http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php").success(function(response){$scope.names=response;});

$http get 实例2：

$http.get(url,{params:{id:'5'}}).success(function(response){
$scope.names=response;}).error(function(data){//错误代码});

$http post 实例：

var postData={text:'这是post的内容'};
var config={params:{id:'5'}}
$http.post(url,postData,config).success(function(response){
$scope.names=response;
}).error(function(data){//错误代码});

$http Jsonp实例：
http://www.phonegap100.com/appapi.php?a=getPortalList&catid&page=2

myUrl
"http://www.phonegap100.com/appapi.php?a=getPortalList=20&page=1&callback=JSON_CALLBACK";
$http.jsonp(myUrl).success(
function(data){
$scope.portalcate=data.result;
}
).error(function(){alert('shibai');});

AngularJS 过滤器
AngularJS过滤器
AngularJS过滤器可以用于转换数据：

currency	格式化数字为货币格式
filter	从数组项中选择一个子集
lowercase	格式化字符串为小写
orderBy	根据某个表达式排列数组
uppercase	格式化字符串为大写

向表达式添加过滤器
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。
（下面的两个实例，我们将使用前面章节中提到的person控制器）
uppercase过滤器格式化字符串为大写：

<div ng-app="" ng-controller="personController">
<p>姓名为 {{person.lastName|uppercase}} </p>
</div>

lowercase过滤器格式化字符串为小写：

<div ng-app="" ng-controller="personController">
<p>姓名为 {{ person.lastName | lowercase }} </p>
</div>

currency 过滤器
currency过滤器格式化数字为货币格式

<div ng-app="" ng-controller="costController">
数量：<input type="number" ng-model="quantity">
价格：<input type="number" ng-model="price">
<p>总价：={{ (quantity*price) | currency }}</p>
</div>

向指令添加过滤器
过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。
orderBy过滤器根据某个表达式排列数组：

<div ng-app="" ng-controller="namesController">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{x.name+','+x.country}}
</li>
</ul>
</div>

过滤输入
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter过滤器从数组中选择一个子集：

div ng-app="" ng-controller="namesController">
<p>输入过滤：</p>
<p><input type="text" ng-model="name"></p>
<ul>
<li ng-repeat="x in names | filter:name | orderBy:'country'">
{{ (x.name | uppercase ) + ',' + x.country }}
</li>
</ul>
</div>

AngularJS 模块
为什么要使用模块
控制器污染了全局命名空间
http://baike.baidu.com/view/4174721.htm
本教程中运用大量全局函数而在应用中应尽量避免使用全局变量和全局函数。
全局值（变量或函数）可被其他脚本重写或破坏。
为了解决这个问题，AngularJS使用了模块。

AngularJS 普通的控制器和模块对比

AngularJS普通的控制器

<!doctype html>
<html>

<body>
<div ng-app="" ng-controller="myCtrl">
{{ firstName+" "+lastName }}
</div>
<script>
function myCtrl($scope){
$scope.firstName="John";
$scope.lastName="Doe";
}
</script>
<script src="angular.min.js"></script>
</body>
</html>

使用一个由模块代替的控制器

<!doctype html>
<html>
<head>
<script src="angular.min.js"></script>
<head>

<body>
<div
ng-app="myApp" ng-controller="myCtrl">
{{ firstName+" "+lastName }}
</div>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.firstName="John";
$scope.lastName="Doe";});

</script>
</body>
</html>

AngularJS应用程序文件
现在知道模块是怎么工作的了，现在可以创建自己的程序文件，
应用程序文件中应至少有一个模块文件，一个控制器文件
首先，创建模块文件“myApp.js”
var app=angular.module("myApp",[]);
然后，创建控制器文件，本例中是"myCtrl.js":
app.controller("myCtrl",function($scope){
$scope.firstName="John";
$scope.lastName="Doe";
});
最后，编辑HTML引入模块：
<!doctype html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + "" + lastName}}
</div>
<script src="angular.min.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angularjs

相关文章推荐

新的分享

章节导航