ng 服务

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

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

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>
时间: 2024-10-14 10:49:41

ng 服务的相关文章

走进AngularJs(六) 服务

今天学习了一下ng的service机制,作为ng的基本知识之一,有必要做一个了解,在此做个笔记记录一下. 一.认识服务(service) 服务这个概念其实并不陌生,在其他语言中如java便有这样的概念,其作用就是对外提供某个特定的功能,如消息服务,文件压缩服务等,是一个独立的模块.ng的服务是这样定义的: Angular services are singletons objects or functions that carry out specific tasks common to web

angular五种服务详解

在这之前angular学习笔记(十五)-module里的'服务'这篇文章里,已经大致讲解了ng中的'服务',在之后的很多地方也用到了服务,但是,所有的服务都是使用app.factory来创建的.但其实,创建服务有5种方法,这篇文章就来具体讲解ng中的五种服务类型. 首先,为了举栗子,先写好如下的模型,控制器,html: html: <!DOCTYPE html> <html ng-app="serviceApp"> <head> <title&

指令&lt;AngularJs&gt;

对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法: angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: func

【震撼来袭】MyEclipse 2017 CI 1正式发布!

MyEclipse 2017 CI 1正式发布.MyEclipse 2017 CI 1是基于Eclipse Neon的第一个版本,通过更新产品的软件集成,新增对Angular 2支持并改进TypeScript等,从而使MyEclipse更加智能.下面一起来看详细更新: [MyEclipse 2017 CI 1安装包下载] Eclipse Neon 此版本基于Eclipse Neon 1 (4.6.1),同时收益于全新的Neon功能.例如改进启动性能.增强可视化功能(包括全屏模式和更好的支持高DP

学习笔记-AngularJs(十)

前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要了解AngularJs的HTML编译器,简单地说让浏览器认识你自定义指令或是Angular的指令集,将其行为运用到DOM上(视图),分两个过程编译和链接,编译阶段是遍历DOM并且收集所有的相关指令,生成一个链接函数:链接阶段是给通过编译阶段调用所说的链接函数来将模板与作用域链接起来,绑定一个作用域,

angularjs 指令详解

一.指令定义 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法: <div my-directive></div> angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, temp

反应本机模板设计入门(1)

安装React Native命令行 打开终端或命令提示符并执行以下命令,这将全局安装React Native Cli. 在此之前,您必须使用最新的Node.js软件设置您的机器. $ sudo npm install -g react-native-cli注意 :这只适用于Mac OS,很快它们将针对Linux和Windows发布 创建并启动React Native Project 这里的新命令将处理项目文件. 使用ng服务命令启动应用程序. $ react-native init MyProj

翻译-让ng的$http服务与jQuerr.ajax()一样易用

Make AngularJS $http service behave like jQuery.ajax() 让ng的$http服务与jQuerr.ajax()一样易用 作者zeke There is much confusion among newcomers to AngularJS as to why the $http service shorthand functions ($http.post(), etc.) don’t appear to be swappable with th

ng自定义服务(利用factory)

ng中我们可以自己定义自己的服务,服务中是一些使用重复率较高的方法.因此有效的使用服务可以提高开发速度. ng中定义服务的方法有多种,service,factory,provide,在此我只介绍最长用的一种,利用factory factory会以返回一个对象的形式 app.factory("服务的名字",[function(){ return{ getName:function(){ /........./ } } }]); demo: services/zct_get_my_righ