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

时间： 2024-10-22 08:20:02

AngularJS 笔记2的相关文章

AngularJS笔记---注册服务

在前面的笔记中,了解到AngularJS的后台控制可以在Controller里面实现. 可是如果所有的逻辑代码都写到Controller会显得该Controller过于臃肿. 不方便维护, AngularJS提供了一个可以依赖注入的方法.我们可以将逻辑处理封装到Service中,需要调用只需要引入对应的Service即可. Angular 提供了3种方法来创建并注册我们自己的 service. 1.Factory 2.Service 3.Provider 一. Factory: 1. 下面构建了

AngularJS笔记

1,客户模板 angular中,模板和数据都会被发送到浏览器中,然后在客户端进行装配 2,MVC (1)MVC核心概念,把管理数据的代码(model).应用逻辑代码(controller).向用户展示数据的代码 (view)清晰地分离开 (2)Angular应用中: 试图就是Document ObjectModel 控制器就是Javascript类 模型数据则被储存在对象属性中 3,数据绑定 (1)数据绑定可自动将model和view间的数据同步 (2)Angular实现数据绑定的方式,可以让我

AngularJS笔记--自定义指令

在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义.  下面定义了一个简单的控件,点击后调转到博客园. Note: 1.命名方式:directive必须以小写字母开头,其中如果后面由大写字母,html调用的时候就要用 - 将单词分开. <html> <script src='angular.js'></script> <scri

AngularJS笔记---作用域和控制器

什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头.可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设置不同的ng-Controller来让$scope处于不同的作用域下面.  一.$rootScope 1.1 $rootScope可以理解成全局变量,一旦赋值对整个module都有效.$rootScpoe不依赖于任何一个controller,  app.run是module被加载时候执行的代码. 可

AngularJS笔记---数据绑定

一.数据绑定 1.简单绑定 下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 B.ng-models :  用于数据绑定, 也就是两个input的里面输入的信息都会绑定到val1和val2变量里面. C.{{ FiledName }}: 双括号也是用于数据的绑定. <!DOCTYPE html> <html> <script src="angul

AngularJS 笔记——$on、$emit和$broadcast的使用与区别

AngularJS中的作用域有一个非常有层次和嵌套分明的结构.其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承自这个$rootScope的,或者说都是嵌套在主作用域下面的.很多时候,你会发现这些作用域不会共享变量或者说都不会从另一个原型继承什么. 那么在这种情况下,如何在作用域之间通信呢?其中一个选择就是在应用程序作用域之中创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 在AngularJS中还有另外一个选

AngularJS 笔记1

2017-03-23 本文更新链接: http://www.cnblogs.com/daysme 什么是 angularjs 2009年有两个外国人创建,后由谷歌收购并开源. 他的特点有MVC.模块化.双向数据绑定.语义化标签.依赖注入等. AngularJS主要考虑的是构建CRUD应用,90%的应用都是CRUD应用,游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用不合适他做. CRUD(增加Create.读取Read.更新Update.删除Delete) 安装 引入 angular.j

web -- Angularjs 笔记2

<body ng-app="myApp">    <p>多个控制器</p>    <div ng-controller="Ctrl1">        <p>{{greeting.text}}, Angular</p>    </div>    <div ng-controller="Ctrl2">        <p>{{greeting

AngularJS笔记---路由视图

最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我们会有一个对应的controller和views,还有一个routerconfig. 其实在AngularJS也有类似的东西.下面我会按照Asp.net的MVC框架搭建一个AngularJs的小Demo出来. 一.创建文件目录: A. Controller文件夹放ng-controller的代码 B