angularjsService

原创 于 2016-06-01 15:41:35 发布 · 316 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#url #angularjs #app #service

本文深入解析AngularJS中$location、$http、$timeout、$interval等核心服务的用法，并通过实例演示如何自定义服务。内容包括获取当前页面URL、向服务器发送请求、定时任务执行和周期性操作等关键功能。

$location可以放回当前页面的url地址；$localtion比使用window.location要好，因为angularjs会一直监控app，同时处理事件的变化！

举例：

<!DOCTYPE html>
<html>
<head>
    <title>$location</title>
    <meta charset="utf-8" />
    <script src="angular/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>当前页面的url：</p>
        {{myUrl}}
    </div>
    <script>
        var app = angular.module('myApp',[]);
        app.controller('myCtrl',function($scope,$location){
            $scope.myUrl = $location.absUrl();
        });
    </script>
</body>
</html>

浏览器运行之后的效果：

当前页面的url：

file:///E:/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E4%BD%93%E7%B3%BB/bootstrap/angularStudy/demo15.html


$http是angularjs中使用最多的服务。angularjs中的服务用于向服务器发送请求，应用响应服务器传送过来的数据。

举例

<!DOCTYPE html>
<html>
<head>
    <title>$http</title>
    <meta charset="utf-8" />
    <script src="angular/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>{{myWelcome}}</p>
    </div>
    <script>
        var app = angular.module('myApp',[]);
        app.controller('myCtrl',function($scope,$http){
            $http.get("demo01.html").then(function(response){
                $scope.myWelcome = response.data;
            });
        });
    </script>
</body>
</html>

浏览器上的结果：

<!DOCTYPE html><html><head><title>angularJs</title><meta charset="utf-8" /><script src="angular/angular.min.js"></script></head><body>/*ng-app定义了一个应用。该应用是angular的所有者ng-model把元素的值绑定到应用。ng-bind把应用的数据绑定到HTML试图。ng-controller 定义该元素的控制器*/<div ng-app="myApp" ng-controller="myCtrl">name1:<input type="text" ng-model="firstname"></input><br/>name2:<input type="text" ng-model="lastname"></input><br/>姓名：{{firstname + " "+lastname}}</div><script>//定义angular应用var app = angular.module('myApp',[]);//控制器用于控制angular应用app.controller('myCtrl',function($scope){$scope.firstname="qqq";$scope.lastname = "www";});</script></body></html>


$timeout服务对应了window.setTimeout()函数

举例

<!DOCTYPE html>
<html>
<head>
    <title>$timeout</title>
    <meta charset="utf-8" />
    <script src="angular/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>{{myHeader}}</p>
    </div>
    <script>
        angular.module('myApp',[]).controller('myCtrl',function($scope,$timeout){
            $scope.myHeader = "hello world";
            $timeout(function(){
                $scope.myHeader = "world hello";
            },3000)
        })
    </script>
</body>
</html>

输出的结果：

hello world  三秒钟之后变成 world hello

$interval服务对应window.setInterval函数。在指定的周期来调用函数。

举例

<!DOCTYPE html>
<html>
<head>
    <title>$interval</title>
    <meta charset="utf-8" />
    <script src="angular/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>time:{{myTime}}</p>
    </div>
    <script >
        angular.module('myApp',[]).controller('myCtrl',function($scope,$interval){
            $scope.myTime = new Date().toLocaleTimeString();
            $interval(function(){
                $scope.myTime = new Date().toLocaleTimeString();
            },2000);
        })
    </script>
</body>
</html>

在浏览器上运行之后的效果是

time:下午4：21：08 两秒钟之后再显示的时间是4：21：10 以两秒钟为周期不停的调用$interval中的函数。

自定义service

举例：

<!DOCTYPE html>
<html>
<head>
    <title>自定义service</title>
    <meta charset="utf-8" />
    <script src="angular/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>255转换成16进制的值：{{hex}}</p>
    </div>
    <script>
        var app = angular.module('myApp',[]);
        app.service('qwer',function(){
            this.myFunction = function(x){
                return x.toString(16);
            }
        });
        app.controller('myCtrl',function($scope,qwer){
            $scope.hex = qwer.myFunction(255);
        });
    </script>
</body>
</html>

浏览器运行之后的结果为：

255转换成16进制的值：ff

<!DOCTYPE html>
<html>
<head>
    <title>过滤器中使用service</title>
    <meta charset="utf-8" />
    <script src="angular/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp">
        <p>{{255 | myFormat}}</p>
    </div>
    <script>
        var app = angular.module('myApp',[]);
        app.service('qwer',function(){
            this.myFunction = function(x){
                return x.toString(16);
            }
        });
        app.filter('myFormat',['qwer',function(qwer){
            return function(x){
                return qwer.myFunction(x);
            }
        }]);
    </script>
</body>
</html>

浏览器运行之后的结果为：ff

service过滤数组

举例

</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>对数组进行过滤</p>
        <ul>
            <li ng-repeat=" x in counts">{{x | myFormat}}</li>
        </ul>
    </div>
    <script>
        var app = angular.module('myApp',[]);
        app.service('qwer',function(){
            this.myFunction = function(x){
                return x.toString(16);
            }
        });
        app.filter('myFormat',['qwer',function(qwer){
            return function(x){
                return qwer.myFunction(x);
            }
        }]);
        app.controller('myCtrl',function($scope){
            $scope.counts = [255,251,456];
        })
    </script>
</body>
</html>

输出的结果为

对数组进行过滤

  • ff
  • fb
  • 1c8
以上就是angularjs服务的总结！让我们再来回顾一下，首先是讲解的是$location.absUrl获取网页的连接，其次就是￥http获取服务器的数据。然后将response中的data赋给html元素。然后是$timeout，该服务定义在一定时间之后app执行某个函数一次。再就是$interval，该服务是让app以多久为周期不停的执行某个函数。最后讲了自定义服务的使用。以及如何在过滤其中如何使用自定义service.


module方式引入js文件无法加载问题.type=“module“
qq_56423581的博客
11-11 1万+
报错信息如下：Access to script at 'file:///D:/%E5%9B%9B%E5%B7%9D%E5%86%9C%E4%B8%9A%E5%A4%A7%E5%AD%A6/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%B7%A5%E7%A8%8B%E5%B8%88/%E9%9D%A2%E8%AF%95%E7%9B%B8%E5%85%B3/%E9%9D%A2%E8%AF%95%E7%9B%B8%E5%85%B3%E7%BB%83%E4%B9%A0/2022%E
Angular.js中实现JavaScript类的Service教程
资源摘要信息:"AngularJSService" 1. Angular.js框架概述 Angular.js 是一个由谷歌开发和维护的开源前端JavaScript框架。它主要用于构建单页应用程序（SPA）。Angular.js 的核心概念之一是通过数据绑定和依赖注入，...
Lua非空判断方法[源码]
11-24
本文详细介绍了在Lua中进行非空判断的几种方法，特别是针对table类型的变量。首先，文章指出了直接对nil值进行索引会导致异常的问题，并给出了一个简单的例子来说明如何避免这种情况。接着，文章讨论了如何判断一个table是否为空，指出不能简单地使用`#table == 0`的方式，而是应该使用`next(t) == nil`的方法。此外，文章还提到了`next`指令在LuaJIT中的优化问题，建议在非必要情况下少用。最后，文章简要介绍了如何判断一个字符串是否全部由空格组成，使用了正则匹配的方法。这些内容对于Lua开发者来说非常实用，能够帮助他们避免常见的错误。
JS表格转Excel实现[可运行源码]
11-24
该文章详细介绍了如何使用JavaScript将HTML表格数据导出为Excel文件。内容涵盖了针对不同浏览器的兼容性处理，包括IE和非IE浏览器的不同实现方式。对于IE浏览器，使用ActiveXObject进行导出；对于非IE浏览器，则通过base64编码和数据URI方案实现。文章还提供了完整的代码示例，包括表格数据的处理、格式化和导出功能，支持文本和图片类型的数据导出。
图片转bin文件存储[项目代码]
11-24
本文介绍了在OpenCV项目中如何将大量图片数据转换为二进制（bin）文件进行高效存储和读取的方法。作者在项目中遇到需要处理大量图片数据的问题，尝试了多种格式（如.mat、.txt、.yml）后发现效率较低。通过使用二进制文件存储，显著提升了读写速度。文章详细展示了使用OpenCV将图片写入二进制文件的代码示例，以及从二进制文件读取图片数据的实现方法。虽然该方法需要提前知道图片的尺寸和数量，但读写速度极快，适合处理大量图片数据。作者还提到可以通过换行符或终止符优化读取过程，但未深入探讨。
ROS视觉处理与色彩识别[项目源码]
11-24
本文详细介绍了在ROS环境下进行视觉处理的基础步骤，特别是针对色彩识别的实现方法。内容涵盖了从摄像头驱动的安装与配置（如usb_cam驱动和image_view工具的使用），到创建功能包和编写图像处理节点（包括RGB图像回调函数、HSV色彩空间转换、二值化处理及形态学操作）。此外，还演示了如何在仿真环境中获取图像，并通过OpenCV实现红色和绿色物体的识别与追踪。最后，文章提供了完整的代码示例和编译运行步骤，帮助读者快速上手ROS视觉处理项目。
Anaconda安装与使用指南[项目源码]
11-24
本文详细介绍了在Anaconda环境下安装和使用jupyter及numpy的步骤。首先，指导用户如何安装Anaconda并创建虚拟环境，然后详细说明了如何在虚拟环境中安装jupyter和numpy。接着，文章提供了多个numpy的练习示例，包括创建零向量、矩阵操作、归一化等。此外，还介绍了如何在Jupyter中完成numpy、pandas和matplotlib的例题，涵盖了从基础操作到实际应用的多个方面。最后，文章总结了实验过程中的经验，特别是在使用国内镜像源后下载速度的提升。
【动静障碍物】基于JPS算法（改进A）全局路径规划与DWA动态窗口局部避障的机器人自主导航混合控制算法（Matlab代码实现）
11-24
【动静障碍物】基于JPS算法（改进A）全局路径规划与DWA动态窗口局部避障的机器人自主导航混合控制算法（Matlab代码实现）内容概要：本文介绍了一种结合改进A*算法的JPS（跳跃点搜索）全局路径规划与DWA（动态窗口法）局部避障的混合控制算法，用于机器人在动静态障碍物环境下的自主导航。该算法通过JPS优化全局路径搜索效率，提升路径规划速度，并结合DWA实现实时动态避障，增强了机器人在复杂动态环境中的适应性和安全性。整个系统在Matlab平台上进行了代码实现与仿真验证，展示了良好的路径规划效果与避障性能。; 适合人群：具备一定机器人学、自动控制或路径规划基础知识的研究生、科研人员及从事智能机器人开发的工程技术人员。; 使用场景及目标：①应用于移动机器人在静态与动态障碍共存环境中的自主导航任务；②为研究高效全局规划与实时局部避障的融合策略提供技术参考与实现案例；③支持Matlab仿真环境下的算法验证与优化。; 阅读建议：建议读者结合Matlab代码深入理解JPS与DWA的集成逻辑，重点关注算法在路径最优性、计算效率与避障实时性之间的平衡设计，可进一步扩展至多机器人系统或复杂地形场景的应用研究。
Lua中loadstring应用[源码]
最新发布
11-24
本文介绍了在Lua编程中使用loadstring函数解析字符串公式的方法，特别是在游戏开发中的应用。通过示例代码展示了如何解析包含动态变量的字符串，如属性键、操作符和技能等级等，并动态计算其值。文章详细说明了如何利用loadstring将字符串转换为可执行的Lua代码，并处理复杂的公式解析，如计算buff持续时间和属性加成。这对于需要动态处理游戏内文本和公式的开发者具有实用价值。
VINS-Fusion部署流程[项目源码]
11-24
本文详细介绍了VINS-Fusion的部署及启动流程。首先，系统需要安装Ubuntu16.04以上版本并配置ROS环境，同时安装OpenCV、Glog、Ceres等依赖库。其次，编译功能包并进行多线程编译。启动阶段需获取IMU数据和图像信息，通过模拟器启动VINS-Fusion并查看Rviz可视化效果。标定部分包括相机内参和外参的配置，以及回环检测的优化。最后，文章简要提及实机启动的步骤，包括飞控和相机驱动的安装，以及通过脚本启动VINS-Fusion的流程。
Lua table.concat函数详解[项目源码]
11-24
本文详细介绍了Lua中的table.concat函数，该函数用于连接表中数组部分的元素，并可通过参数指定分隔符、起始和结束位置。文章通过多个示例展示了不同参数组合下的函数行为，包括默认参数的使用、自定义分隔符、指定连接范围等。此外，文章还解释了为何table.concat比for循环更高效，特别是在处理大量字符串连接时，table.concat经过优化，能显著减少时间消耗。最后，文章强调table.concat不会改变原始表的结构，为开发者提供了安全的使用保障。
基于Python的深度学习回归模型实现与神经网络应用
11-24
深度学习作为人工智能的关键分支，依托多层神经网络架构对高维数据进行模式识别与函数逼近，广泛应用于连续变量预测任务。在Python编程环境中，得益于TensorFlow、PyTorch等框架的成熟生态，研究者能够高效构建面向回归分析的神经网络模型。本资源库聚焦于通过循环神经网络及其优化变体解决时序预测问题，特别针对传统RNN在长程依赖建模中的梯度异常现象，引入具有门控机制的长短期记忆网络（LSTM）以增强序列建模能力。 实践案例涵盖从数据预处理到模型评估的全流程：首先对原始时序数据进行标准化处理与滑动窗口分割，随后构建包含嵌入层、双向LSTM层及全连接层的网络结构。在模型训练阶段，采用自适应矩估计优化器配合早停策略，通过损失函数曲线监测过拟合现象。性能评估不仅关注均方根误差等量化指标，还通过预测值与真实值的轨迹可视化进行定性分析。 资源包内部分为三个核心模块：其一是经过清洗的金融时序数据集，包含标准化后的股价波动记录；其二是模块化编程实现的模型构建、训练与验证流程；其三是基于Matplotlib实现的动态结果展示系统。所有代码均遵循面向对象设计原则，提供完整的类型注解与异常处理机制。 该实践项目揭示了深度神经网络在非线性回归任务中的优势：通过多层非线性变换，模型能够捕获数据中的高阶相互作用，而Dropout层与正则化技术的运用则保障了泛化能力。值得注意的是，当处理高频时序数据时，需特别注意序列平稳性检验与季节性分解等预处理步骤，这对预测精度具有决定性影响。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
搭建OpenStack云平台[源码]
11-24
本文详细介绍了如何使用Kolla工具部署Stein版本的OpenStack云平台。内容涵盖了从实验环境准备、系统配置、Docker服务安装、Kolla和Kolla-Ansible的获取与安装，到OpenStack的部署和验证全过程。作者采用all-in-one模式进行部署，适合初学者快速上手。文章还提供了具体的命令和配置文件修改示例，帮助读者避免常见错误。最后，作者鼓励读者在实际操作中保持细心和耐心，并预告了后续关于OpenStack基本使用方法和创建测试云主机的内容。
基于CMSIS-NN的微控制器深度学习模型部署指南
11-24
针对Cortex-M4与Cortex-M7处理器架构，CMSIS神经网络函数库提供了名为arm_nnexample_cifar10的参考实现。该参考工程已适配uVision仿真环境及STM32F407 DISCOVERY开发平台，其脚本目录内预设了图像数据宏定义结构，同时集成基于Python语言的Jupyter交互式笔记本工具，支持用户通过自定义图像样本生成适配的输入数据集合。 工程构建说明需注意：微控制器项目需通过Windows平台下的Keil MDK-ARM开发环境进行编译。开发环境部署指南及相关安装资源可通过官方文档获取。具体技术规范与操作流程请查阅项目附带的说明文档。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
FFmpeg与OpenCV对比[项目源码]
11-24
FFmpeg和OpenCV是多媒体处理领域的两大开源工具库，但定位截然不同。FFmpeg专注于音视频的编解码、格式转换和流传输，擅长处理数据流层面的操作，如转码、压缩、推流等。OpenCV则专注于计算机视觉，致力于图像和视频内容的分析与理解，提供丰富的图像处理算法、目标检测、特征提取等功能。两者在视频处理流程中常协同工作，FFmpeg负责编解码和传输，OpenCV负责内容分析。选择工具时，若涉及音视频数据处理选FFmpeg，若需图像内容分析则选OpenCV，复杂场景可结合两者优势。
LeGO-LOAM建图解析[可运行源码]
11-24
本文详细解析了三维SLAM算法LeGO-LOAM的建图部分源码，重点介绍了其与原有LOAM算法的不同之处，特别是增加了回环检测功能。文章从主函数run入手，逐步分析了建图过程中的关键步骤，包括点云坐标转换、关键帧提取、降采样匹配、回环检测、位姿优化等。同时，还探讨了回环检测的实现原理及其局限性，指出其基于里程计几何关系的检测方式可能在地图尺寸较大时存在误差问题。最后，文章总结了LeGO-LOAM的建图流程和回环检测的校正功能，为读者深入理解该算法提供了有价值的参考。
BMFont工具使用指南[源码]
11-24
本文介绍了如何使用BMFont工具快速将PNG图片转换为FNT字体文件。首先需要安装Lua环境，然后执行BMFont.lua脚本，该脚本会读取当前文件夹下的所有子文件夹，并将每个子文件夹中的PNG图片制作成FNT字体。子文件夹的名称将作为FNT字体的后缀，而PNG图片名的第一个字符将作为字符的char id。文章还提到了一些在Windows中不能用作图片名的特殊字符及其替代写法，并指出可以在BMFont.lua文件的前几行修改FNT字体的前缀和字距。最后提供了工具的下载地址。
Lua安装配置指南[代码]
11-24
本文详细介绍了在Linux系统下安装和配置Lua、LuaJIT以及Luarocks的步骤。首先，通过下载源码、解压、编译安装Lua，并解决可能出现的依赖问题。其次，安装Luarocks作为Lua的包管理工具，强调设置安装路径的重要性以便于管理。最后，介绍了LuaJIT的安装过程，包括下载源码、编译安装及验证。文章还简要提及了LuaJIT的概念及其作用，以及Luarocks的功能类比于Java的Maven/Gradle。整体内容实用，适合需要快速上手Lua的开发者参考。
【创新、复现】基于蜣螂优化算法的无线传感器网络覆盖优化研究(Matlab代码实现）
11-24
【创新、复现】基于蜣螂优化算法的无线传感器网络覆盖优化研究(Matlab代码实现）内容概要：本文围绕基于蜣螂优化算法的无线传感器网络覆盖优化展开研究，提出了一种创新的元启发式优化方法，并通过Matlab代码实现验证其有效性。该算法模拟蜣螂的生物行为机制，用于解决WSN中传感器节点部署的最优覆盖问题，旨在提升网络覆盖率、延长生命周期并降低能耗。文中详细阐述了算法原理、数学模型构建、优化流程设计及仿真实验设置，通过与其他主流优化算法对比，证明了蜣螂优化算法在收敛速度、全局搜索能力和稳定性方面的优越性。同时，研究还探讨了不同参数设置对覆盖性能的影响，提供了实际应用中的调参依据。; 适合人群：具备一定Matlab编程基础和优化算法背景的研究生
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值