angular服务

[$apply()]



- jquery内数据绑定
- 要用$apply(),不然不能在js内通过angular绑定数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtr">

    {{name}}

 </div>  

<script src="angular.min.js"></script>

<script src="jquery-3.1.1.min.js"></script>

<script>

var app = angular.module("myApp", [])

app.controller('myCtr', ["$scope",function($scope){

setTimeout(function(){           //jquery定时器

  $scope.name="奔波霸";          //jquery内数据绑定

  $scope.$apply();               //要用$apply(),不然不能在js内通过angular绑定数据

},1000);

}]);

</script>

</body>

</html>

$window

  • $timeout,相当于js中的setTimeout
  • $interval,相当于js中的setInterval
  • $window,相当于js中的window
  • cancle方法用来消除定时
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtr">

    {{id}}

    <p ng-click="getWin()">getWin</p>

    <p>{{clientHeight}}</p>

    <p>{{scrollHeight}}</p>

    <p>{{scale}}</p>

    <p>{{hero}}</p>

 </div>  

<script src="angular.min.js"></script>

<script src="jquery-3.1.1.min.js"></script>

<script>

var app = angular.module("myApp", [])

app.controller('myCtr', ["$scope","$timeout","$interval","$window",function($scope,$timeout,$interval,$window){

  $scope.id=1;

  var id = $interval(function(){           //$interval,相当于setInterval，赋值给一变量，便于下面清除

    $scope.id++;

    if($scope.id>5){

      $interval.cancel(id);                //清除定时，相当于clearInterval

    }

  },1000);

  $scope.getWin = function(){

    $scope.clientHeight = $window.document.body.clientHeight;  //$window,相当于js中的window

    $scope.scrollHeight = $window.document.body.scrollHeight;

    $window.confirm("要关闭所有标签页吗？");

    $window.alert("德玛西亚");

    $scope.scale = $window.prompt("惊天破");

  }

  var lol = $timeout(function(){          //$timeout,相当于setTimeout，赋值给一变量，便于下面清除

  $scope.hero="炼金术士";

  },1000);

  $timeout.cancel(lol);                   //清除定时，相当于clearTimeout

}]);

</script>

</body>

</html>

$sce服务

  • 将html标签通过angular渲染到网页中
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtr">

    {{data}}

    <p ng-bind-html="data"></p>                     <!--将数据按html格式渲染-->

    <p ng-bind-html="pill | trustHtml"></p>         <!--将数据按html格式渲染,调用过滤器-->

 </div>  

<script src="angular.min.js"></script>

<script>

var app = angular.module("myApp", [])

app.filter("trustHtml", ["$sce", function($sce){      //写个自定义过滤器，便于以后调用$sce服务

  return function(data){

    return $sce.trustAsHtml(data);

  }

}])

app.controller('myCtr', ["$scope","$sce",function($scope,$sce){

    $scope.data=$sce.trustAsHtml("<h1>德玛西亚</h1>");      //$sce服务，信任html（由于安全考虑，angular默认不信任html）

    $scope.pill="<h1>德玛西亚</h1>";

}]);

</script>

</body>

</html>

$cacheFactory服务

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtr">

    {{data}}

 </div>

 <div ng-controller="youCtr">

    {{data}}

 </div> 

<script src="angular.min.js"></script>

<script>

var app = angular.module("myApp", [])

app.controller('myCtr', ["$scope","$cacheFactory",function($scope,$cacheFactory){

   var obj = $cacheFactory("scale");  //创建表，存放内容

   obj.put("王者荣耀", {hero:"兰林王", number:"微信2区"});  //put方法存放内容

   $scope.data=obj.get("王者荣耀").hero;                    //get方法获取内容

   // obj.remove("王者荣耀");         //删除"王者荣耀"

   // obj.removeAll();                //删除所有

   // obj.destroy();                  //删除表

   console.log(obj.get("王者荣耀"));

}]);

app.controller('youCtr', ["$scope","$cacheFactory",function($scope,$cacheFactory){

   var obj = $cacheFactory.get("scale");           //共享上面创建的表，这样就可以共享缓存中的内容了

   $scope.data = obj.get("王者荣耀").hero;

}]);

</script>

</body>

</html>

angular服务一的更多相关文章

  1. angular服务二

    angular服务 $http 实现客户端与服务器端异步请求 get方式 test.html <!DOCTYPE html> <html lang="en"> ...

  2. angular 服务 service factory provider constant value

    angular服务 服务是对公共代码的抽象,由于依赖注入的要求,服务都是单例的,这样我们才能到处注入它们,而不用去管理它们的生命周期. angular的服务有以下几种类型: 常量(Constant): ...

  3. 理解 Angular 服务

    理解 Angular 服务 本文写于 2021 年 3 月 29 日 理解 Angular 服务 什么是服务 服务写法 原理简述 提供服务 1. 在服务中注册 2. 在 module 中注册 3. 在 ...

  4. angular 服务

    在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除.而controllers在不需要的时候就会被销毁了.服务用于在控制器之间进 ...

  5. Angular服务的5种创建方式

    config配置块 Angular应用的运行主要分为两部分:app.config()和app.run(),config是你设置任何的provider的阶段,从而使应用可以使用正确的服务,需要注意的是在 ...

  6. Angular 服务的简单使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. angular服务

    angular创建服务的五种方式:  factory() factory()方法是创建和配置服务的最快捷方式.factory()函数可以接受两个参数. name(字符串)需要注册的服务名. ge ...

  8. angular 服务之间依赖注入

    import { Injectable } from '@angular/core'; @Injectable() export class LoggerServiceService { constr ...

  9. Angular定义服务-Learn By Doing

    1.服务(Service)介绍 Angular services are substitutable objects that are wired together using dependency ...

随机推荐

  1. 《连载 | 物联网框架ServerSuperIO教程》- 3.设备驱动介绍

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  2. swing with transformjs

    Antecedent Facebook made a HTML5 game long time ago. The opening animation is a piece of software th ...

  3. Android Weekly Notes Issue #229

    Android Weekly Issue #229 October 30th, 2016 Android Weekly Issue #229 Android Weekly笔记, 本期内容包括: 性能库 ...

  4. dyld 加载 Mach-O

    ➠更多技术干货请戳:听云博客 前言 最近看 ObjC的runtime 是怎么实现 +load 钩子函数的实现.进而引申分析了 dyld 处理 Mach-O 的这部分机制. 1.简单分析 Mach-O ...

  5. Android中通信协议

    一.TCP/IP协议(传输层协议) 1.Socket与ServerSocket Socket是应用层与TCP/IP协议簇通讯的中间抽象层,Socket是一组接口,在设计模式中,Socket的设计就是门 ...

  6. luke使用

    Luke介绍 Luke是一个方便的索引查看和诊断工具,可以访问Lucene构建的索引文件,显示和修改某些索引内容.能提供: 通过document编号或term浏览索引 查看document内容,可复制 ...

  7. C#冒泡排序算法

    用了两种形式的数据,一个是泛型List,一个是数据int[].记录一下,作为自己学习过程中的笔记. using System; using System.Collections.Generic; us ...

  8. 曝光最新WIN10系统32位，64位系统ghost版

    系统妈 随着Windows 10Build 10074 Insider Preview版发布,有理由相信,Win10离最终RTM阶段已经不远了.看来稍早前传闻的合作伙伴透露微软将在7月底正式发布Win ...

  9. 自己解决虚拟机Ubuntu开机黑屏

    Virtual Box+Ubuntu 64bit,之前都能好好用,但昨天一打开,过了开始的一个选择界面(有什么恢复模式那个)就黑了,左上角的光标不闪,一直卡在那里,后来发现原因了. 1.先下载LeoM ...

  10. 常用的14种HTTP状态码速查手册

    分类 1xx \> Information(信息) // 接收的请求正在处理 2xx \> Success(成功) // 请求正常处理完毕 3xx \> Redirection(重定 ...