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>
  ```
View Code
复制代码

 

posted @   程序媛李李李李蕾  阅读(275)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae