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. 面向云的.net core开发框架

    目录结构 1 为什么搭建面向云的.Net core云开发框架 2 主要设计思路 3 项目解决方案 4 基础设施层 4.1反射工具 4.2多级可换源的配置(上) 42多级可换源的配置(下) 4.3可配置 ...

  2. 负载均衡之LVS集群

    h3 { color: rgb(255, 255, 255); background-color: rgb(30,144,255); padding: 3px; margin: 10px 0px } ...

  3. Javascript绝不要使用在文档加载之后使用 document.write()， 怎么理解？

    在文档加载之后使用 document.write(),会覆盖该文档.   需满足两个条件:      1.在函数内部调用document.write():      2.通过按钮响应调用函数:   举 ...

  4. CentOS7安装NodeJS6.9

    1.下载 wget https://nodejs.org/dist/v6.9.2/node-v6.9.2-linux-x64.tar.xz 2.解压 tar -xJf node-v6.9.2-linu ...

  5. low security dvwa--SQL Injection(Blind)

    1.输入单引号,结果如下: 2.输入永真式 ' and 1=1; -- 结果如下: 多次测试,如果输入的条件为假,就会返回1中的结果,为真则返回2中的结果,由此说明这属于SQL盲注. 3.猜解用户名长 ...

  6. Spring：ApplicationContext （2）

    在使用Spring时,通常会配置一个applictioncontext.xml 来指定ApplicationContext的相关信息. 当使用SpringMVC时,还会再另外指定一个[server-n ...

  7. 幼儿园的 selenium

    from selenium import webdriver     *固定开头     b=webdriver.Firefox()              *打开火狐浏览器    browser. ...

  8. SQL Server附加数据库报错：无法打开物理文件,操作系统错误5

    问题描述:      附加数据时,提示无法打开物理文件,操作系统错误5.如下图: 问题原因:可能是文件访问权限方面的问题. 解决方案:找到数据库的mdf和ldf文件,赋予权限即可.如下图: 找到mdf ...

  9. WPF 自定义窗口关闭按钮

    关闭图标设计主要涉及主要知识点: 1.Path,通过Path来画线.当然一般水平.竖直也是可以用Rectangle/Border之类的替代 一些简单的线条图标用Path来做,还是很方便的. 2.简单的 ...

  10. 分布式搜索引擎Elasticsearch性能优化与配置

    1.内存优化 在bin/elasticsearch.in.sh中进行配置 修改配置项为尽量大的内存: ES_MIN_MEM=8g ES_MAX_MEM=8g 两者最好改成一样的,否则容易引发长时间GC ...