服务的本质是单例对象，封装一些方法和属性的。

单例模式：在实例化变量的时候，如果该变量已经存在，直接返回该变量；如果不存在，就创建一个新的变量再返回

ng自带的服务有很多，常用：
$location $window $http $scope $rootScope $interval $timeout..

服务的使用方式：
直接在创建ng对象时候，将服务注入进来，ng的注入器会实现服务的实例化，从而让我们可以直接调用。

效果： 不同环境，端口号可能不同，这个结果是webstorm里运行的结果

代码：

<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

    <meta charset="UTF-8">

    <script src="js/angular.js"></script>

    <title></title>

</head>

<body>

<div ng-controller="myCtrl">

    <p>{{nowPort}}</p>

    <button ng-click="handleClick()">

        得到端口号

    </button>

</div>

<script>

    var app = angular.module('myApp', ['ng']);

    app.controller('myCtrl', function ($scope,$location) {

        $scope.nowPort = "";

        $scope.handleClick = function () {

            //获取端口号

            $scope.nowPort = $location.port();

            console.log($scope.nowPort);

        }

    })

</script>

</body>

</html>

ng 服务的更多相关文章

  1. ng 服务端渲染

    官网文档 教学视屏 ng-toolkit @ng-toolkit/universal 注意: 使用 npm和yarn安装项目依赖,不要使用cnpm ng add @ng-toolkit/univers ...

  2. 走进AngularJs(六) 服务

    今天学习了一下ng的service机制,作为ng的基本知识之一,有必要做一个了解,在此做个笔记记录一下. 一.认识服务(service) 服务这个概念其实并不陌生,在其他语言中如java便有这样的概念 ...

  3. angular五种服务详解

    在这之前angular学习笔记(十五)-module里的'服务'这篇文章里,已经大致讲解了ng中的'服务',在之后的很多地方也用到了服务,但是,所有的服务都是使用app.factory来创建的.但其实 ...

  4. angularJS module里的'服务'

    首先,为了举栗子,先写好如下的模型,控制器,html: html: <!DOCTYPE html> <html ng-app="serviceApp"> & ...

  5. （转）走进AngularJs(六) 服务

    原文地址:http://www.cnblogs.com/lvdabao/p/3464015.html 今天学习了一下ng的service机制,作为ng的基本知识之一,有必要做一个了解,在此做个笔记记录 ...

  6. 指令<AngularJs>

    对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法: angular.module('myApp', ...

  7. angularjs指令系统系列课程（5）：控制器controller

    这一节我们来说一下controller这个参数 一.指令控制器的配置方法: 对于指令我有两种配置路由的方式:1.在html中直接引用,2,在指令的controller参数里定义 第一种:在html中直 ...

  8. AngularJs编写指令

    <!DOCTYPE html> <html ng-app="app"> <head lang="en"> <meta ...

  9. angular指令

    转自:http://www.cnblogs.com/rohelm/p/4051437.html 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整 ...

随机推荐

  1. 系统间接口联调总是报500 for URL 和 乱码

    两个系统做数据传输时,懒省事,直接访问 action 方式.结果总是报500,或者fileNotFount. 究其原因是因为两边的数据格式没对应上.post请求返回的格式是String,数据提供方返回 ...

  2. 操作JavaScript数组

    unshift:在数据首段添加元素. push: 在数组的末端添加元素. shift:移除并返回第一个元素,会影响 数组长度. pop:移除并返回最后一个元素.会影响 数组长度. delete  数组 ...

  3. 利用C#查看特定服务是否安装

    需求:想通过C#代码来查看IIS服务或者MSMQ是否已经安装 分析:IIS服务和MSMQ安装完成后都会创建windows服务,所以我们只需要查看对应的服务是否存在即可. 准备工作: IIS服务名称:W ...

  4. MySQL-5.7 Update语句详解

    1.语法 (1)单表 UPDATE [LOW_PRIORITY] [IGNORE] table_reference SET assignment_list [WHERE where_condition ...

  5. Python3：文件读写

    Python3:文件读写 open f = open('filename','r') # 读模式 f = open('filename','w') # 写模式 f = open('filename', ...

  6. 关于JS解析编历JSON数组(含多维数组)

    第一部分:      ].xing) 第二部分:                         }    解释:    countryObj 为value对象的一个属性明    value[coun ...

  7. UML学习-1 UML 简介

    UML 是什么 Unified Modeling Language(UML)又称统一建模语言或标准建模语言,是始于 1997 年一个 OMG 标准,它是一个支持模型化和软件系统开发的图形化语言,为软件 ...

  8. PHP练习题一

    目录:1.如何使用php导入导出csv?2.php接收POST数据的方式有哪些?3.如何让json_encode()不转义斜杠?我在做服务器返回一些数据时需要返回一些地址,但是默认的json_code ...

  9. data augmentation 总结

    data augmentation 几种方法总结 在深度学习中,有的时候训练集不够多,或者某一类数据较少,或者为了防止过拟合,让模型更加鲁棒性,data augmentation是一个不错的选择. 常 ...

  10. 【JAVA学习】java虚拟机内存配置，-Xss256m -Xms512m -Xmx800m -XX:MaxPermSize=512m

    转自:https://blog.csdn.net/a503921892/article/details/39048737 配置tomcat服务器内存大小中的Xms.Xmx.PermSize.MaxPe ...