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 ...
随机推荐
- 使用QFileDiaglog实战designer快速开发
今天遇到一个大坑很久才解决 使用designer开发出图形界面转换为py文件后,使用QFileDialog对话框第一个参数一定要是当前窗口组件,否则程序直接奔溃(坑:能运行不报错但奔溃) def ge ...
- 转：【专题六】UDP编程
引用: 前一个专题简单介绍了TCP编程的一些知识,UDP与TCP地位相当的另一个传输层协议,它也是当下流行的很多主流网络应用(例如QQ.MSN和Skype等一些即时通信软件传输层都是应用UDP协议的) ...
- oracle表分区、表分析及oracle数据泵文件导入导出
1.先说oracle表分区是什么吧 你有500万份文件,你要把他存在磁盘上,好嘛,我们就一个文件夹,500万分文件在那儿杵着,我们想找到要的那个打开,嘿嘿,我们得找到什么时候. 这时候,有个人告诉你, ...
- eclipse 依赖别的 工程 断点进不去
maven Debug 发现进不了断点. 点击右键-->Properties-->Java Compiler-->Classfile Generation, 勾选上Add line ...
- centos安装angr
1.angr环境 yum install -y python-dev libffi-dev build-essential virtualenvwrapper mkvirtualenv angr 问题 ...
- Python爬虫【三】利用requests和正则抓取猫眼电影网上排名前100的电影
#利用requests和正则抓取猫眼电影网上排名前100的电影 import requests from requests.exceptions import RequestException imp ...
- window.open()居中显示
function openwindow(url,name,iWidth,iHeight){ // url 转向网页的地址 // name 网页名称,可为空 // iWidth 弹出窗口的宽度 // i ...
- javascript 与 PHP 通信加密，使用AES 128 CBC no padding，以及ios，java,c#文章例子
运行环境 php7.0 不适用于 php7.0以上版本,因为mcrypt_encrypt()函数已删除 为何要采用 no padding 这种形式: AES加密如果原输入数据不够16字节的整数位,就要 ...
- 鸡兔同笼问题（Java）
问题描述:编程解决鸡兔同笼问题,笼子中鸡兔共有35只,94只脚,求有鸡和兔各有几只 我的代码: /** * 鸡兔同笼问题 * @author Administrator * */ public cla ...
- XXX银行项目部署
XXX银行项目部署 一.下载项目代码 1.使用git工具下载代码 代码路径:推荐代码下载到桌面 git clone http://sunyard_姓名拼音@bitbucket.devops.hfdev ...