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 ...

随机推荐

JDBC (29)
1.JDBC:就是一套API,由sun公司定义类或者定义的接口.(全称 java database connectivity:是Java访问数据库的标准规范),Java提供访问数据库规范称为JDBC, ...
20165316 2017-2018-2《Java程序设计》课程总结
20165316 2017-2018-2<Java程序设计>课程总结一.每周作业链接汇总 1. 预备作业一:我期望的师生关系 20165316 我期望的师生关系摘要: 典型老师师生关 ...
highchart应用示例2-上：圆角柱状图，下：多指标曲线图
1.ajax调用接口获取数据 function getCityData() { var date1 = $('#datetimepicker1').val(); var date2 = $('#dat ...
byte以及UTF-8的转码规则
https://www.cnblogs.com/hell8088/p/9184336.html 多年来闲麻烦,只记录笔记,不曾编写BLOG,本文为原创,如需转载请标明出处废话不说,直奔主题 asci ...
Android Auto开发初探
一.Android Auto 概述二.Android Auto 使用方法四.Android Auto应用开发五.Android Auto开发总结一.Android Auto 概述最近物联网是 ...
关于数据库主从表、主键PRIMARY KEY 外键约束 FOREIGN KEY 约束----NOT NULL,DEFAULT,CHECK
如果由两个列共同组成主键,而且一个子表将主键作为可为空值的外键来继承,就可能得到错误的数据.可在一个外键列中插入有效的值,但在另一个外键列中插入空值.然后,可添加一个数据表检查约束,在可为空的外键中检 ...
printf("loops %u / %u%c[K\n", loops + 1, opts->loops, 27); printf("%cM", 27);
serialcheck.c中的一段代码一直弄不明白: do { status = stress_test_uart_once(opts, fd, data, data_len); memset(opt ...
camera按键采集图像及waitKey的用法（转）
源: camera按键采集图像及waitKey的用法
php开启xdebug扩展
1.下载Xdebug(先看php下的ext文件夹(C:\xampp\php\ext)下有没有php_xdebug.dll文件,如果有的话,就不用下了.) 到目前为止,Xdebug的最新版本为2.7.0 ...
laravel 数据库 - 增删查改
//查询public function select(){ /** 数据表 CREATE TABLE `student` ( `id` int(11) NOT NULL AUTO_INCREMENT, ...

AngularJS 笔记2

$http

$timeout 延时

$interval 定时

$cacheFactory 缓存

$log 打印输出

jsonp 百度搜索提示api

AngularJS 笔记2的更多相关文章

随机推荐

热门专题