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. Jsp语法简介

    1.JSP指令 jsp指令用来设置整个JSP网页想关闭的属性,如网页的编码和脚本语言等.常用的3种指令为page,include和taglib. 2.JSP声明 jsp声明用于声明JSP代表的Serv ...

  2. Why AlloyFinger is so much smaller than hammerjs?

    AlloyFinger is the mobile web gesture solution at present inside my company, major projects are in u ...

  3. xmlHttp.readyState的五种状态

    自己简单的总结一下 深入的了解可以看其他道友的 O(∩_∩)O readyState有五种可能的值: 0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法. ...

  4. 软件海贼团 OnePiece （版权所有）

    最近迷上了“海贼王”这部动画片,不仅仅是因为其中的人物个个性格鲜明,剧情跌宕起伏扣人心弦,各种耍宝搞笑,还感觉到这个团队很像理想中的敏捷软件团队. 作为一直带团队的我,感觉“海贼王”这个动画片给了我很 ...

  5. AngularJS 过滤器

    过滤器可以使用一个管道字符(|)添加到表达式和指令中 AngularJS 过滤器可用于转换数据: currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase ...

  6. 网页变灰的CSS代码

    body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms- ...

  7. 如何在mac上用终端打开XAMPP自带的MySQL

    注:1.本文未经博主同意,不得转载! 2.所有终端语句都分行显示,以免大家看错: 直接开始,过程中对每一步可能出现的错误都进行了说明. 1.安装好xampp,然后打开终端,输入: mysql -u r ...

  8. php-into 安装时遇到的各种问题，php -m跟phpinfo()显示不一致

    系统环境 阿里云服务器 ubuntu nginx php5.4.23 在Yii2中格式显示用户currency,所以需要intl模块,没啥说的装吧. apt-get install libicu-de ...

  9. js 常用的正则表达式

    以下收录一些我经常用到的正则表达式,因为工作场景中用到正则的地方几乎都跟validate插件的验证有关系, 所以以下正则也是$.validator.addMethod() 的拓展: validate: ...

  10. RSA算法原理

    一直以来对linux中的ssh认证.SSL.TLS这些安全认证似懂非懂的.看到阮一峰博客中对RSA算法的原理做了非常详细的解释,看完之后茅塞顿开,关于RSA的相关文章如下 RSA算法原理(一) RSA ...