AngularJS学习笔记(二)
来源:互联网 发布:图形矢量化软件 编辑:程序博客网 时间:2024/06/05 00:24
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 实例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过滤器可以用于转换数据:
向表达式添加过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。
(下面的两个实例,我们将使用前面章节中提到的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>
0 0
- angularJS学习笔记(二)
- AngularJS学习笔记(二)
- AngularJS学习笔记(二)
- angularJs学习笔记(二)
- angularJS学习笔记二
- AngularJS学习笔记二
- AngularJs学习笔记(二) 指令directive
- angularjs学习笔记(二)控制器1
- AngularJS学习(二)
- AngularJS学习(二)
- Angularjs 学习笔记(二)MVC与作用域
- angularjs学习笔记(二) 自定义filter
- Angularjs 学习笔记总结之二
- AngularJS学习笔记(3)- AngularJS 指令
- AngularJS学习笔记(4)- AngularJS 控制器
- AngularJS学习笔记(一)
- AngularJS 学习笔记(一)
- AngularJS学习笔记(1)
- java生成图片
- *Hbase命令
- sql 随机取一条数据
- Sublime Text Snippets(代码片段)功能
- 自定义View 拓展view 没有全部实现夫view中的构造方法 ApplicationContext is null in ApplicationStatus
- AngularJS学习笔记(二)
- 分治算法
- ios实现长时间后台运行
- Redis学习记录之配置文件(四)
- Rapid Json 可视化 rapidjson.natvis In VS2013
- Android上传文件到服务器
- Swift字典
- php开发中简单的引入编辑器的方法
- 离散--关系--4.3