首页 > 代码库 > AngularJS 笔记2
AngularJS 笔记2
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=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/[];
$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=http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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=http://www.mamicode.com/[];>
AngularJS 笔记2
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。