angular服务一
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服务一的更多相关文章
- angular服务二
angular服务 $http 实现客户端与服务器端异步请求 get方式 test.html <!DOCTYPE html> <html lang="en"> ...
- angular 服务 service factory provider constant value
angular服务 服务是对公共代码的抽象,由于依赖注入的要求,服务都是单例的,这样我们才能到处注入它们,而不用去管理它们的生命周期. angular的服务有以下几种类型: 常量(Constant): ...
- 理解 Angular 服务
理解 Angular 服务 本文写于 2021 年 3 月 29 日 理解 Angular 服务 什么是服务 服务写法 原理简述 提供服务 1. 在服务中注册 2. 在 module 中注册 3. 在 ...
- angular 服务
在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除.而controllers在不需要的时候就会被销毁了.服务用于在控制器之间进 ...
- Angular服务的5种创建方式
config配置块 Angular应用的运行主要分为两部分:app.config()和app.run(),config是你设置任何的provider的阶段,从而使应用可以使用正确的服务,需要注意的是在 ...
- Angular 服务的简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- angular服务
angular创建服务的五种方式: factory() factory()方法是创建和配置服务的最快捷方式.factory()函数可以接受两个参数. name(字符串)需要注册的服务名. ge ...
- angular 服务之间依赖注入
import { Injectable } from '@angular/core'; @Injectable() export class LoggerServiceService { constr ...
- Angular定义服务-Learn By Doing
1.服务(Service)介绍 Angular services are substitutable objects that are wired together using dependency ...
随机推荐
- 9.1.2 asp.net core 自动生成组合查询
在做系统的时候,经常遇到前台录入一大堆的查询条件,然后点击查询提交后台,在Controller里面生成对应的查询SQL或者表达式,数据库执行再将结果返回客户端. 例如如下页面,输入三个条件,日志类型. ...
- 微信小程序注册
小程序是一种新的开放能力,可以在微信内被便捷地获取和传播,同时具有出色的使用体验.开发者可以根据平台提供的能力,快速地开发一个小程序. 开放内容包括: 1.开放注册范围:企业.政府.媒体.其他组织: ...
- 5分钟让你掌握css3阴影、倒影、渐变小技巧！
一.开始让大家看一张他们组合的图片再一步一步做: 二.先是建立两个文本不做处理运行如图 三.给第一个div字体加上阴影 text-shadow: 5px 5px 10px red; text-shad ...
- ArcGIS Engine开发前基础知识（4）
ArcGIS不同开发方式的比较 关于GIS应用软件的开发,通常有三种方式:C/S架构.网络GIS和移动GIS.ArcGIS平台提供了对三种开发方式的支持,对于采用从C/S架构的大多数开发者来讲,首先想 ...
- c#下volatile关键字
volatile多用于多线程的环境,当一个变量定义为volatile时,读取这个变量的值时候每次都是从momery里面读取而不是从cache读.这样做是为了保证读取该变量的信息都是最新的,而无论其 ...
- 如何升级PowerShell
背景: 开发的PowerShell 脚本需要使用Invoke-RestMethod命令,发现在老的服务器上不支持这一命令,经过查询得知由于PS版本的问题.涉及到了PS的升级,需要介绍下PowerShe ...
- 机器学习实战笔记(Python实现)-05-支持向量机(SVM)
--------------------------------------------------------------------------------------- 本系列文章为<机器 ...
- 使用shell脚本实现ping对应IP所对应的人名
#!/bin/bash a=(张三 李四 王五 赵六) ..} do . $((${i}+)) >dev/>&;then ))"号"${a[${i}]}&quo ...
- 【FLUENT案例】01：T型管混合器中的流动与传热
案例目录 1 引子1.1 案例描述1.2 案例学习目标2 计算仿真目标3 启动FLUENT并读入网格4 FLUENT工作界面5 网格缩放及检查6 修改单位7 设置模型8 定义新材料9 计算域设置10 ...
- Ubuntu 下ibus拼音输入法启用 (ubuntu 16.04
Ubuntu 下ibus拼音输入法启用 我安装的是英文版的ubuntu 16.04,打开只带英文,并没有中文. 设置输入法为iBus 从system settings 进入language suppo ...