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. java函数的笔记

    java中,函数即方法.也就是实现某个功能的办法. 函数的格式 修饰符 返回值类型 函数名(参数类型 参数) { 逻辑处理; return 处理结果; // return关键字是用于结束该函数的,并将 ...

  2. 8个超棒的HTML5网站设计欣赏

    我们听到了很多关于HTML5的新闻和技术动向,一个又一个的新的东西不停的出现,那么最近HTML5的技术应用又如何呢?HTML5又和CSS及其Javascript如何一起改变我们的网站设计和实现的呢? ...

  3. Canvas——使用定时器模拟动态加载动画！

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

  4. 使用WebRTC搭建前端视频聊天室——数据通道篇

    本文翻译自WebRTC data channels 在两个浏览器中,为聊天.游戏.或是文件传输等需求发送信息是十分复杂的.通常情况下,我们需要建立一台服务器来转发数据,当然规模比较大的情况下,会扩展成 ...

  5. Oracle hint

    1.use_concat 网上说法: CONCATENATION和UNION/UNION ALL操作比较类似,根据OR查询条件,将一个查询分解为两个或更多的部分,然后在去掉两个部分重复的记录.由于CO ...

  6. Yii2.0.7 限制user module登录遇到的问题

    在Yii2.0.6的时候我是在以下文件通过以下方法实现的. frontend/modules/user/Module.php namespace frontend\modules\user; clas ...

  7. linux基本知识0

    linux的基本原则: 1.有目的单一的小程序组成,组合小程序完成复杂任务. 2.一切皆文件 3.尽量避免捕获用户接口 4.配置文件保存为纯文本格式 CLI接口: 命令提示符,prompt,bash ...

  8. React构建单页应用方法与实例

    React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM.JSX等.那么接下来我们就来学习一下这门框架 ...

  9. [转载]fullPage.js中文api 配置参数~

    fullPage.js中文api 配置参数 选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 ...

  10. 东软HIS切换输入法卡死的解决方法

    在文字选项的第二页上,勾选上边的相容性设定,然后重启电脑: