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 ...
随机推荐
- django之auth认证系统
Django自带的用户认证 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Djang ...
- python PIL 图像处理操作
python PIL 图像处理 # 导入Image库 import Image # 读取图片 im = Image.open("1234.jpg") # 显示图片 im.show( ...
- How to solve the problem that BMW Icom A2 A3 host can’t be connected?
Aftre the BMW ICOM host is connected to the car via a 16PIN connector, and the other side is connect ...
- Django框架----Form组件补充
一.Form类 创建Form类时,主要涉及到 [字段] 和 [插件],字段用于对用户请求数据的验证,插件用于自动生成HTML; 1.Django内置字段如下: 1 Field 2 required=T ...
- opencv3.1线性可分svm例子及函数分析
https://www.cnblogs.com/qinguoyi/p/7272218.html //摘自:http://docs.opencv.org/2.4/doc/tutorials/ml/int ...
- 对gulp的理解和使用（一）
说的gulp,到底是什么?用来做什么的? 以前并没有想过这个问题,拿到公司的项目脚手架就开始做事情了.现在专门来总结一下. gulp干什么的呢? gulp是node中的一种代码构建工具,还有就是项目自 ...
- centos7开放及查看端口
centos7中的防火墙改成了firewall,使用iptables无作用,开放端口的方法如下: firewall-cmd --zone=public --add-port=80/tcp --perm ...
- 基于rsync的lsyncd自动同步配置
环境部署 源机:192.168.31.140 目标机:192.168.31.130 源机配置 基于rsync的lsyncd 自动同步,rsync的配置省略 安装lsyncd rpm -ivh lsyn ...
- php脚本#!/usr/bin/env php写法的好处
脚本语言的第一行,目的就是指出,你想要你的这个文件中的代码用什么可执行程序去运行它.比如php脚本的第一行可以写成如下几种格式#!/usr/bin/php#!/usr/bin/env php#!/us ...
- Linux共享内存的管理
在进程通信应用中会用到共享内存,这就涉及到了IPC,与IPC相关的命令包括:ipcs.ipcrm(释放IPC).IPCS命令是Linux下显示进程间通信设施状态的工具.我们知道,系统进行进程间通信(I ...