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

随机推荐

JAVA中获取文件MD5值的方法
1 DigestUtils.md5Hex(new FileInputStream(path)); 如果你只需要使用标准的MD5,其实一行代码就够了,JAVA自带的commons-codec包就提供了获 ...
scrapy_novel_python
# _*_ coding:UTF _8_ from bs4 import BeautifulSoup import requests,sys class downloader(object): def ...
sql server 触发器的简单用法
触发器 -- 一下写的都是我对触发器的理解当在执行insert . delete . 等操作的时候随便要做一些额外的操作, 比如在添加的时候就会将新添加的数据存到inserted表中写个实例 ...
LogUtil工具
package com.develop.web.util; import java.util.concurrent.locks.ReentrantLock; import org.slf4j.Logg ...
使用Oracle数据库时的org.springframework.jdbc.BadSqlGrammarException:
org.springframework.jdbc.BadSqlGrammarException: ### Error querying database. Cause: java.sql.SQLExc ...
django后台管理--添加自定义action
管理员动作简单来说,Django管理员的基本工作流程是“选择一个对象,然后进行更改”.这对大多数用例都很有效. 然而当你一次性要对多个对象做相同的改变,这个流程是非常的单调乏味的. 在这些情况下,D ...
corn
http://www.cnblogs.com/itech/archive/2011/02/09/1950226.html service crond start ---查看crontab服务是否启动 ...
python协程之动态添加任务
https://blog.csdn.net/qq_29349715/article/details/79730786 python协程只能运行在事件循环中,但是一旦事件循环运行,又会阻塞当前任务.所以 ...
leetcode [34] Find First and Last Position of Element in Sorted Array
Given an array of integers nums sorted in ascending order, find the starting and ending position of ...
这五件事，二次SaaS创业的老炮儿都在做（转）
在我看来,我们现在正处在SaaS公司发展过程中的第三代.第一代SaaS公司有Salesforce.Netsuite和Webex等.紧接着兴起的第二代SaaS公司大多都是利用Salesforce或其他网 ...

AngularJS 笔记2

$http

$timeout 延时

$interval 定时

$cacheFactory 缓存

$log 打印输出

jsonp 百度搜索提示api

AngularJS 笔记2的更多相关文章

随机推荐

热门专题