微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

AngularJS 别有洞天的内置服务

分类：Angularjs作者：编程之家

学习要点

  • 全局对象服务
  • 异常处理
  • 处理危险数据
  • 使用NG表达式和指令

一、全局对象服务
为什么使用全局对象服务？
使得测试更加简单。

1.访问window对象

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <Meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-controller="defaultCtrl">
    <button class="btn btn-primary" ng-click="displayAlert('clicked')">Click Me</button>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript"> // 使用指令 angular.module("exampleApp",[]) .controller("defaultCtrl",function ($scope,$window) { // 数据模型 $scope.displayAlert = function (msg) { $window.alert(msg); } }) </script>
</body>
</html>

2.访问document对象

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <Meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-controller="defaultCtrl">
    <button class="btn btn-primary">Click Me</button>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript"> // 使用指令 angular.module("exampleApp",$window,$document) { // 数据模型 $scope.displayAlert = function (msg) { $window.alert(msg); } $document.find("button").on("click",function (e) { $scope.displayAlert(e.target.innerText); }) }) </script>
</body>
</html>

3.使用Interval 和 Timeout

<!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angluar test</title> <Meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body ng-controller="defaultCtrl"> <div class="panel panel-default"> <div class="panel-heading">Time</div> <div class="panel-body">The Time is： {{time}}</div> </div> <script type="text/javascript" src="js/angular.min.js"></script> <!-- 引入指令文件 --> <script type="text/javascript"> // 使用指令 angular.module("exampleApp",$interval) { // 数据模型 $interval(function () { $scope.time = new Date().toTimeString(); },2000); }) </script> </body> </html>

4.访问URL

1)使用HTML5 MRUL

<!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angluar test</title> <Meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body ng-controller="defaultCtrl"> <div class="panel panel-default"> <div class="panel-heading">URL</div> <div class="panel-body"> <P>The URL is: {{url}}</P> <div class="btn-group"> <button class="btn btn-primary" ng-click="setUrl('reset')">Reset</button> <button class="btn btn-primary" ng-click="setUrl('path')">Path</button> <button class="btn btn-primary" ng-click="setUrl('hash')">Hash</button> <button class="btn btn-primary" ng-click="setUrl('search')">Search</button> <button class="btn btn-primary" ng-click="setUrl('url')">URL</button> </div> </div> </div> <script type="text/javascript" src="js/angular.min.js"></script> <!-- 引入指令文件 --> <script type="text/javascript"> // 使用指令 angular.module("exampleApp",[]) // HTML5 MRUL .config(function($locationProvider) { // 判断是否支持window.history if (window.history && history.pushState) { $locationProvider.html5Mode(true); } }) .controller("defaultCtrl",$location) { // $location所定义的事件---URL被改变后触发 $scope.$on("$locationChangeSuccess",function (event,newUrl) { $scope.url = newUrl; }) $scope.setUrl = function (component) { switch (component) { // 重置URL case "reset": $location.path(""); $location.hash(""); $location.search(""); break; // 路径 case "path": $location.path("/cities/london"); break; // 散列 case "hash": $location.hash("north"); break; // 查询字符串 case "search": $location.search("select","hotels"); break; // 完整路径 case "url": $location.url("/cities/london?select=hotels#north"); break; } } }) </script> </body> </html>

2)滚到$location散列的位置

<!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angluar test</title> <Meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body ng-controller="defaultCtrl"> <div class="panel panel-default"> <div class="panel-heading">URL</div> <div class="panel-body"> <P id="top">This is the top.</P> <button class="btn btn-primary" ng-click="show('bottom')">Go to Bottom</button> <p> <ul> <li ng-repeat="item in items">{{item}}</li> </ul> </p> <p id="bottom">This is the bottom.</p> <button class="btn btn-primary" ng-click="show('top')">Go to Top</button> </div> </div> <script type="text/javascript" src="js/angular.min.js"></script> <!-- 引入指令文件 --> <script type="text/javascript"> // 使用指令 angular.module("exampleApp",[]) // HTML5 MRUL .config(function($anchorScrollProvider) { // 禁用自动滚动 $anchorScrollProvider.disableAutoScrolling(); }) .controller("defaultCtrl",$location,$anchorScroll) { $scope.itemCount = 50; $scope.items = []; for(var i = 0; i < $scope.itemCount; i++) { $scope.items[i] = "Item " + i; } $scope.show = function (id) { $location.hash(id); // 只允许向下滚动 if (id == "bottom") { $anchorScroll(); } } }) </script> </body> </html>

5.执行日志

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <Meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-controller="defaultCtrl">
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript"> // 使用指令 angular.module("exampleApp",[]) .factory("logService",function ($log) { var messageCount = 0; return { log : function (msg) { $log.log("Click count: " + messageCount++ + ") " + msg); } } }) .controller("defaultCtrl",function ($document,logService) { $document.on("click",function () { logService.log("click me"); }) }) </script>
</body>
</html>

二、异常处理
1.为什么要使用异常？
异常一般分为两大类：一种是在编码和测试中产生的；一种是你的应用程序公布用户所看见的。
因此为了让我们的程序运行的更好，我们有必要使用异常来处理和报告错误。
2.创建自定义异常处理器

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <Meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-controller="defaultCtrl">
    <div class="panel panel-default">
        <div class="panel-body">
            <button class="btn btn-primary" ng-click="throwEx()">Throw Exception</button>
        </div>
    </div>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript"> // 使用指令 angular.module("exampleApp",myException) { $scope.throwEx = function () { try { throw new Error("Triggered Exception"); } catch (ex) { // ex.message == Triggered Exception myException(ex,"Button Click"); } } }) // 自定义异常处理器 .factory("myException",function ($log){ return function (exception,cause) { $log.error("Message: " + exception.message + " (Cause: " + cause + ")"); } }); </script>
</body>
</html>

三、处理危险数据
1.为什么使用危险数据服务？
在web应用程序中，攻击的行为很正常的，他们可能会发送一段不友好的代码来扰乱你精心的布局，这让人感觉很糟糕！
2.危险数据

<!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angluar test</title> <Meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body ng-controller="defaultCtrl"> <div class="well"> <p><input class="form-control" ng-model="htmlData"></p> <!-- 显示危险数据,NG自动过滤html标签 --> <p>{{htmlData}}</p> <!-- 进行不安全绑定， 可以解析html，但是去除了JS等属性 --> <p ng-bind-html="htmlData"></p> <!-- 受信任的数据，当鼠标移到标签上，弹出JS对话框 --> <p ng-bind-html="trustData"></p> </div> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/angular-sanitize.min.js"></script> <!-- 引入指令文件 --> <script type="text/javascript"> // 使用指令 angular.module("exampleApp",["ngSanitize"]) .controller("defaultCtrl",$sce) { // 数据模型 $scope.htmlData = "<p>This is <b onmouSEOver=alert('aaa')>danger</b> data</p>"; $scope.trustData = "<p>This is <b onmouSEOver=alert('trust')>trust</b> data</p>"; $scope.trustData = $sce.trustAsHtml($scope.trustData); }) </script> </body> </html>

四、使用AngularJS 表达式和指令
1.将NG表达式转换为函数

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <Meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-controller="defaultCtrl">
    <div class="well">
        <p><input class="form-control" ng-model="expr"></p>
        <div>
            Result: <span eval-expression="expr"></span>
        </div>
    </div>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript"> // 使用指令 angular.module("exampleApp",$document) { $scope.price = "100.23"; }) .directive("evalExpression",function ($parse) { return function (scope,element,attrs) { scope.$watch(attrs["evalExpression"],function (newValue) { try { // 获取表单输入内容 var expressionFn = $parse(scope.expr); // 将函数生成内容 var result = expressionFn(scope); if (result == undefined) { result = "No result"; } } catch (err) { result = "Cannot evaluate expression"; } element.text(result); }) } }) </script>
</body>
</html>

像上述例子那样，你无法指望用户会输入”price | currency”之类的数据，所以我们要提供本地数据

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <Meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-controller="defaultCtrl">
    <div class="well">
        <p><input class="form-control" ng-model="dataValue"></p>
        <div>
            Result: <span eval-expression amount="dataValue" tax="10"></span>
        </div>
    </div>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript"> // 使用指令 angular.module("exampleApp",$document) { $scope.dataValue = "100.23"; }) .directive("evalExpression",function ($parse) { var expressionFn = $parse("total | currency"); // console.log(expressionFn); return { scope : { amount : "=amount",tax : "=tax" },link : function (scope,attrs) { scope.$watch("amount",function (newValue) { var localData = { total : Number(newValue) + (Number(newValue) * (Number(scope.tax) / 100)) } element.text(expressionFn(scope,localData)); }) } } }) </script>
</body>
</html>

2.配置内插
我们在使用{{和}}来单向绑定内联数据，它可能与JS或者是其他的模板混淆，因此我们可以改变它
将{{}}改为!!!!

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <Meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-controller="defaultCtrl">
    <h4>!!data!!</h4>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript"> // 使用指令 angular.module("exampleApp",[]) .config(function ($interpolateProvider) { $interpolateProvider.startSymbol("!!"); $interpolateProvider.endSymbol("!!"); }) .controller("defaultCtrl",$window) { // 数据模型 $scope.data = "Good!"; }) </script>
</body>
</html>

3.编译内容
$compile服务处理包含绑定与表达式的HTML片段，它将创建可利用作用域生成内容的函数

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <Meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-controller="defaultCtrl">
    <div class="well">
        <span eval-expression></span>
    </div>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript"> // 使用指令 angular.module("exampleApp",$document) { // 数据模型 $scope.cities = ["BeiJing","ShangHai","HangZhou"]; }) .directive("evalExpression",function ($compile) { return function (scope,attrs) { var content = "<ul><li ng-repeat='city in cities'>{{city}}</li></ul>"; var listEle = angular.element(content); var complileFn = $compile(listEle); complileFn(scope); element.append(listEle); } }) </script>
</body>
</html>

原文地址：https://www.jb51.cc/angularjs/149369.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选
ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中文文档更容易理解，前提是你的英语基础还可以。英文文档对于知识点讲述简明扼要，通俗易懂，而有些中文文档读起来特别费力，基础差、底子薄的有可能一会就会被绕晕了，最起码英文文档中的代码与中文文档中的代码是一致的，但知识点讲述实在是差距太大。Angular.jshasapowerfuldire
AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas 基础上。目前，它支持6种图表类型（折线图，条形图，雷达图，饼图，柱状图和极地区域区）。而且，这是一个独立的包，不依赖第三方 JavaScript 库，小于 5KB。   其中用到的软件：   Chart.js框架，版本1.0.2，一
AngularJS进阶(三十七)IE浏览器兼容性后续
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题，结局方案为更换jquery、angularjs、IE的版本。 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js-->jquery-1.7.2.js--> jquery2.1.4.js 无效 2.尝试更换IE版本IE8 IE11-
AngularJS进阶(五)Angular实现下拉菜单多选
Angular实现下拉菜单多选写这篇文章时，引用文章地址如下：http://ngmodules.org/modules/angularjs-dropdown-multiselecthttp://dotansimha.github.io/angularjs-dropdown-multiselect/#/AngularJSDropdownMultiselectThisdire
AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目需求，需要在首页搜索框中添加语音输入功能，考虑到科大讯飞语音业务的强大能力，遂决定使用科大讯飞语音输入第三方服务。软件首页截图如下所示： 涉及的源代码如下所示: //语音识别$rootScope.startRecognize = function() {var speech;
AngularJS进阶(三十四)Angular数据更新不及时问题探讨
Angular数据更新不及时问题探讨前言 在修复控制角标正确变化过程中，发觉前端代码组织层次出现了严重问题。传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染。根据《AngularJs深度剖析与最佳实践》，如果两个控制器的协作存在大量的数据共享和交互可以利用Factory等服务的“单例”特性为它们注入一个共享对象来传递数据。而自己在使用rootScope
AngularJS进阶(三)HTML:让表单、文本框只读，不可编辑的方法
HTML:让表单、文本框只读，不可编辑的方法有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使中国">的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。方法1:onfocus=this.blur()中国"onfocus=this.blur()>方法2:readonly中国"readonly>中国"readonly="tru
AngularJS进阶(十七)在AngularJS应用中实现微信认证授权遇到的坑
在AngularJS应用中实现微信认证授权遇到的坑前言 项目开发过程中，移动端新近增加了一个功能“微信授权登录”，由于自己不是负责移动端开发的，但最后他人负责的部分未达到预期效果。不能准确实现微信授权登录。最后还得靠自己做进一步的优化工作，谁让自己是负责人呢？原来负责人就是负责最后把所有的BUG解决掉。 首先，熟悉一下微信授权部分的源代码，如下所示:
AngularJS进阶(二十七)实现二维码信息的集成思路
AngularJS实现二维码信息的集成思路需求 实现生成的二维码包含订单详情信息。思路获取的内容数据如下: 现在可以获取到第一级数据，第二级数据data获取不到。利用第一级数据的获取方法获取不到第二级数据。for(i in data){alert(i); //获得属性 if(typeof(data[i]) == "o
AngularJS进阶(十五)Cookie ‘data‘ possibly not set or overflowed because it was too large
Cookie'data'possiblynotsetoroverflowedbecauseitwastoolarge(5287>4096bytes)!故事起源 项目开发过程中遇到以上问题，刚开始以为只是个警告，没太在意。后来发现直接影响到了程序的执行效果。果断寻找解决方法。问题分析 根据Chrome浏览器信息定位，显示以下代码存在错误:
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot