2017-03-23
本文更新链接： http://www.cnblogs.com/daysme/p/6613071.html
$http
- angularjs中的ajax
- 向服务器请求数据
-
1/2 后台文件 test.php
<?php
$str='你好';
echo $str;
?> -
2/2 前台文件
<!DOCTYPE html>
<html lang="en" ng-app="app">
<meta charset="UTF-8">
<script src="angular1.min.js"></script>
<body>
<script>
// angular.element(document).ready(function(){}) //angularjs不需要像jq这样写
var mod=angular.module('app',[]);
mod.controller('ctrl',['$scope','$http',function($scope,$http){
$http({
method:'get',
url:'test.php'
}).success(function(data){
console.log(data);
}).error(function(){
console.log(1);
})
}]) // 向服务器请求数据-简写
// var mod=angular.module('app', []);
// mod.controller('ctrl', ['$scope','$http', function($scope,$http){
// $http.get('test.php').success(function(data){
// console.log(data);
// }).error(function(){
// console.log(1);
// })
// }])
</script>
</body>
</html> 登录验证，只有用户名 xw ，密码为 123 时才登陆成功。
-
1/2 后台代码 act.php
<?php
$user=$_GET["user"];
$pass=$_GET["pass"];
if ($user=="xw"&&$pass=="123"){
echo '{"err":0,"msg":"登陆成功"}';
}else{
echo '{"err":1,"msg":"登陆失败"}';
}
?> -
2/2 前台代码
<!DOCTYPE html>
<html lang="en" ng-app="app">
<meta charset="UTF-8">
<script src="angular1.min.js"></script>
<body>
<div ng-controller="ctrl">
<input type="text" ng-model="name"><br>
<input type="text" ng-model="password"><br>
<button ng-click="tap()">登录</button>
</div>
<script>
var mod=angular.module('app', []);
mod.controller('ctrl',['$scope','$http',function($scope,$http){
$scope.tap=function(){
$http({
method:'get',
url:'act.php',
params:{user:$scope.name,pass:$scope.password}
}).success(function(data){
console.log(data.msg);
}).error(function(data){
console.log(data.msg)
})
}
}])
</script>
</body>
</html>
$timeout 延时
-
3秒之后把’菜鸟’变成’大神’
<!DOCTYPE html>
<html lang="en" ng-app="app">
<meta charset="UTF-8">
<script src="angular1.min.js"></script>
<body>
<div ng-controller="ctrl">
<div>{{hello}}</div>
</div>
<script>
// 定时
var mod=angular.module('app',[]);
mod.controller('ctrl',['$scope','$timeout',function($scope,$timeout){
$scope.hello='菜鸟';
$timeout(function(){
$scope.hello='大神';
},3000)
}])
</script>
</body>
</html>
$interval 定时
-
从0开始，每秒自增1
<!DOCTYPE html>
<html lang="en" ng-app="app">
<meta charset="UTF-8">
<script src="angular1.min.js"></script>
<body>
<div ng-controller="ctrl">
<div>{{hello}}</div>
</div>
<script>
// 定时
var mod=angular.module('app',[]);
mod.controller('ctrl',['$scope','$interval',function($scope,$interval){
$scope.hello='0';
$interval(function(){
$scope.hello++;
},1000)
}])
</script>
</body>
</html>
$cacheFactory 缓存
- angularjs中的 localStrange 。不同的是在浏览器中看不到这些保存的数据，而且浏览器刷新后缓存会丢失。
-
存取健值
<!DOCTYPE html>
<html lang="en" ng-app="app">
<meta charset="UTF-8">
<script src="angular1.min.js"></script>
<body>
<div ng-controller="ctrl"></div>
<script>
var mod=angular.module('app',[]);
// 存取数据
mod.controller('ctrl',['$scope','$cacheFactory',function($scope,$cacheFactory){
var cache=$cacheFactory('mydata');
cache.put('name','xw');
cache.put('age','21');
cache.put('job','coder');
cache.put('obj',JSON.stringify({'key1':'val1','key2':'val2'})); //保存对象
console.log(cache.info(),cache.get('name')); //Object {id: "mydata", size: 3} "xw"
console.log(JSON.parse(cache.get('obj'))); //取出对象
}])
</script>
</body>
</html>
$log 打印输出
``` html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<meta charset="UTF-8">
<script src="angular1.min.js"></script>
<body>
<div ng-controller="ctrl"></div>
<script>
var mod=angular.module('app',[]);
打印输出
mod.controller('ctrl',['$scope','$log',function($scope,$log){
$log.log('你好');
$log.info('你好');
$log.error('你好');
$log.warn('你好');
}])
</script>
</body>
</html>
```
jsonp 百度搜索提示api
-
搜索框动态搜索提示，搜索关键字提示
<!DOCTYPE html>
<html lang="en" ng-app="app">
<meta charset="UTF-8">
<script src="angular1.min.js"></script>
<body>
<div ng-controller="ctrl">
<input ng-model="name" ng-keyup="tap()">
<ul>
<li ng-repeat="x in data" ng-bind="x"></li>
</ul>
</div>
<script>
var mod=angular.module('app',[]);
mod.controller('ctrl',['$scope','$http','$timeout',function($scope,$http,$timeout){
var timer=null;
$scope.data=[];
$scope.tap=function(){
$timeout.cancel(timer); //执行过多 timeout 后的回调函数
timer=$timeout(function(){
$http({
method:'jsonp',
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+$scope.name+'&cb=JSON_CALLBACK' //JSON_CALLBACK 是 angular 中固定的
}).success(function(data){
console.log(data);
$scope.data=data.s;
})
},500)
}
}])
</script>
</body>
</html>
MD:
## $http
- angularjs中的ajax
- 向服务器请求数据
- 1/2 后台文件 test.php ``` php
<?php
$str='你好';
echo $str;
?>
``` - 2/2 前台文件 ``` html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<meta charset="UTF-8">
<script src="angular1.min.js"></script>
<body>
<script>
// angular.element(document).ready(function(){}) //angularjs不需要像jq这样写
var mod=angular.module('app',[]);
mod.controller('ctrl',['$scope','$http',function($scope,$http){
$http({
method:'get',
url:'test.php'
}).success(function(data){
console.log(data);
}).error(function(){
console.log(1);
})
}]) // 向服务器请求数据-简写
// var mod=angular.module('app', []);
// mod.controller('ctrl', ['$scope','$http', function($scope,$http){
// $http.get('test.php').success(function(data){
// console.log(data);
// }).error(function(){
// console.log(1);
// })
// }])
</script>
</body>
</html>
``` - 登录验证，只有用户名 xw ，密码为 123 时才登陆成功。 - 1/2 后台代码 act.php
``` php
<?php
$user=$_GET["user"];
$pass=$_GET["pass"];
if ($user=="xw"&&$pass=="123"){
echo '{"err":0,"msg":"登陆成功"}';
}else{
echo '{"err":1,"msg":"登陆失败"}';
}
?>
``` - 2/2 前台代码
``` html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<meta charset="UTF-8">
<script src="angular1.min.js"></script>
<body>
<div ng-controller="ctrl">
<input type="text" ng-model="name"><br>
<input type="text" ng-model="password"><br>
<button ng-click="tap()">登录</button>
</div>
<script>
var mod=angular.module('app', []);
mod.controller('ctrl',['$scope','$http',function($scope,$http){
$scope.tap=function(){
$http({
method:'get',
url:'act.php',
params:{user:$scope.name,pass:$scope.password}
}).success(function(data){
console.log(data.msg);
}).error(function(data){
console.log(data.msg)
})
}
}])
</script>
</body>
</html>
``` ## $timeout 延时
- 3秒之后把'菜鸟'变成'大神' ``` html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<meta charset="UTF-8">
<script src="angular1.min.js"></script>
<body>
<div ng-controller="ctrl">
<div>{{hello}}</div>
</div>
<script>
// 定时
var mod=angular.module('app',[]);
mod.controller('ctrl',['$scope','$timeout',function($scope,$timeout){
$scope.hello='菜鸟';
$timeout(function(){
$scope.hello='大神';
},3000)
}])
</script>
</body>
</html>
``` ## $interval 定时
- 从0开始，每秒自增1 ``` html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<meta charset="UTF-8">
<script src="angular1.min.js"></script>
<body>
<div ng-controller="ctrl">
<div>{{hello}}</div>
</div>
<script>
// 定时
var mod=angular.module('app',[]);
mod.controller('ctrl',['$scope','$interval',function($scope,$interval){
$scope.hello='0';
$interval(function(){
$scope.hello++;
},1000)
}])
</script>
</body>
</html>
``` ## $cacheFactory 缓存
- angularjs中的 localStrange 。不同的是在浏览器中看不到这些保存的数据，而且浏览器刷新后缓存会丢失。
- 存取健值 ``` html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<meta charset="UTF-8">
<script src="angular1.min.js"></script>
<body>
<div ng-controller="ctrl"></div>
<script>
var mod=angular.module('app',[]);
// 存取数据
mod.controller('ctrl',['$scope','$cacheFactory',function($scope,$cacheFactory){
var cache=$cacheFactory('mydata');
cache.put('name','xw');
cache.put('age','21');
cache.put('job','coder');
cache.put('obj',JSON.stringify({'key1':'val1','key2':'val2'})); //保存对象
console.log(cache.info(),cache.get('name')); //Object {id: "mydata", size: 3} "xw"
console.log(JSON.parse(cache.get('obj'))); //取出对象
}])
</script>
</body>
</html>
``` ## $log 打印输出 ``` html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<meta charset="UTF-8">
<script src="angular1.min.js"></script>
<body>
<div ng-controller="ctrl"></div>
<script>
var mod=angular.module('app',[]);
打印输出
mod.controller('ctrl',['$scope','$log',function($scope,$log){
$log.log('你好');
$log.info('你好');
$log.error('你好');
$log.warn('你好');
}])
</script>
</body>
</html>
``` ## jsonp 百度搜索提示api
- 搜索框动态搜索提示，搜索关键字提示 ``` html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<meta charset="UTF-8">
<script src="angular1.min.js"></script>
<body>
<div ng-controller="ctrl">
<input ng-model="name" ng-keyup="tap()">
<ul>
<li ng-repeat="x in data" ng-bind="x"></li>
</ul>
</div>
<script>
var mod=angular.module('app',[]);
mod.controller('ctrl',['$scope','$http','$timeout',function($scope,$http,$timeout){
var timer=null;
$scope.data=[];
$scope.tap=function(){
$timeout.cancel(timer); //执行过多 timeout 后的回调函数
timer=$timeout(function(){
$http({
method:'jsonp',
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+$scope.name+'&cb=JSON_CALLBACK' //JSON_CALLBACK 是 angular 中固定的
}).success(function(data){
console.log(data);
$scope.data=data.s;
})
},500)
}
}])
</script>
</body>
</html>
```