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="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>
```
AngularJS 笔记2的更多相关文章
- AngularJS笔记---注册服务
在前面的笔记中,了解到AngularJS的后台控制可以在Controller里面实现. 可是如果所有的逻辑代码都写到Controller会显得该Controller过于臃肿. 不方便维护, Angul ...
- AngularJs 笔记
初识 directive 指令 ng-app 初始化一个AngularJs应用程序(通过一个值(比如 ng-app="myModule")连接到代码模块.) ng-init 初始化 ...
- AngularJS笔记--自定义指令
在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义. 下面定 ...
- AngularJS笔记---路由视图
最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我 ...
- AngularJS笔记---作用域和控制器
什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头.可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设 ...
- angularjs 笔记(1) -- 引导
首先: 1,引入angularJS文件,<script type="text/javascript" src="angularjs.min.js"> ...
- AngularJS笔记---数据绑定
一.数据绑定 1.简单绑定 下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 ...
- angularjs笔记(三)
AngularJS API 7.其他一些常用指令,布尔类型的指令也可以用表达式 (1).数组索引$index <!DOCTYPE html> <html> <head&g ...
- angularjs笔记(二)
AngularJS API 4.AngularJS过滤器 使用一个管道符(|)添加到表达式和指令中 例1.格式化字母转为大写 <!DOCTYPE html> <html> &l ...
- angularjs笔记(一)
简介 AngularJS API angularjs是javascript框架,通过指令(指令就是自定义的html标签属性)扩展了HTML,并且可以通过表达式(表达式使用)绑定数据到HTML. 1.a ...
随机推荐
- myeclipse项目导入IDEA
1.import project from external model (不需要删除myeclipse多余文件) https://blog.csdn.net/d276031034/artic ...
- 判断是移动端还是PC端
// 判断是移动端还是PC端 $http_user_agent = isset($_SERVER['HTTP_USER_AGENT']) ? strtolower($_SERVER['HTTP_USE ...
- python 之xml.etree.ElementTree
Element类型是一种灵活的容器对象,用于在内存中存储结构化数据. ［注意］xml.etree.ElementTree模块在应对恶意结构数据时显得并不安全. 每个element对象都具有以下属性: ...
- java中BufferedImage类的用法
1. BufferedImage是Image的一个子类,Image和BufferedImage的主要作用就是将一副图片加载到内存中. BufferedImage生成的图片在内存里有一个图像缓冲区,利用 ...
- Mysql高级第一天(laojia)
select char_length('我们love'); select *, char_length(sname) '姓名字数' from tbl_student; select '对方' + '5 ...
- pat 团体赛练习题集 L2-008. 最长对称子串
对给定的字符串,本题要求你输出最长对称子串的长度.例如,给定"Is PAT&TAP symmetric?",最长对称子串为"s PAT&TAP s&quo ...
- ELK日志分析系统
部署环境 192.168.1.147 kibana.logstash.Escluster-node-1 192.168.1.151 filebeat.Escluster-node-2.nginx 软件 ...
- Golang的值类型和引用类型的范围、存储区域、区别
常见的值类型和引用类型分别有哪些? 值类型:基本数据类型 int 系列, float 系列, bool, string .数组和结构体struct,使用这些类型的变量直接指向存在内存中的值,值类型的变 ...
- ssh客户端连接报认证失败
最近有个应用在并发导出的时候,报错了ssh认证失败,原来串行的时候都正常,经查,可能是ssh连接数不够的原因,这个问题刚好之前有个java开发反馈过,linux默认的ssh连接数为10个. 解决如下: ...
- c++ linux下输出中文
同样,使用的是VS FOR LINUX进行测试. converting to execution character set: Invalid or incomplete multibyte or w ...