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

随机推荐

Set接口——LinkedHashSet集合
底层是由哈希表+链表:
35 个最好用的 Vue 开源库
35 个最好用的 Vue 开源库 Vue.js 是一个非常易用的渐进式 JavaScript 框架,用于构建用户界面. 1.Vue Dark Mode Vue.js 的一个极简主义的深色设计系统.它提 ...
jQuery的ajaxFileUpload上传插件——刷新一次才能再次调用触发change
这个问题并不是由change事件失效造成的,而是ajaxFileUpload插件造成的,它会把原来的file元素替换成新的file元素,所以之前绑定的change事件就失效了. 查了一些资料,有些朋友 ...
vue生产环境清除console.log
npm run build 后的生产环境的代码,会有很多开发时留下的console.log(),不可能每个页面不停地删除在build/webpack.prod.conf.js文件里加上这样一段代码即 ...
vue 生命周期钩子的理解 watch computed
一理解vue的生命周期,首先需要注意几个关键字 1. el :选择器 2. $el:对应选择器的template模板(html代码) 3. render:也是vue实例中的一项,其参数更接近vue ...
Python进阶【第二篇】编写Python代码
一.第一句Python代码——Hello Word 在 /home/dev/ 目录下创建 hello.py 文件,内容如下: print "hello,world" 执行 hell ...
make是如何工作的
在默认的方式下,也就是我们只输入make命令.那么,1.make会在当前目录下找名字叫“Makefile”或“makefile”的文件.2.如果找到,它会找文件中的第一个目标文件(target),在上 ...
Spring Boot(九)：定时任务
Spring Boot(九):定时任务一.pom包配置 pom包里面只需要引入springboot starter包即可 <dependencies> <dependency> ...
02: http
1.1 http简介 1.什么是http 1. HTTP是一个客户端和服务器端请求和应答的标准(TCP) 2. 设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法 2.http报文格式 ...
06: mysql索引查找原理及调优
MySQL其他篇目录: 1.1 常见查找方法举例 1.2 索引数据结构设相关的计算机原理 1.3 MyISAM实现索引 1.4 InnoDB索引实现 1.5 索引使用策略 1.1 常见查找方法举例返 ...

AngularJS 笔记2

$http

$timeout 延时

$interval 定时

$cacheFactory 缓存

$log 打印输出

jsonp 百度搜索提示api

AngularJS 笔记2的更多相关文章

随机推荐

热门专题