<!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>无标题文档</title>

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

</head>

当你初试Angular 时，很自然地就会往controller 和scope 里堆满不必要的逻辑。一定要早点意识到，

controller 这一层应该很薄；也就是说，应用里大部分的业务逻辑和持久化数据都应该放在service

里。很多人问道，关于如何在controller 该干的事。出于内存性能的考虑，controller 只在需要

的时候才会初始化，一旦不需要就会被抛弃。因此，每次当你切换或刷新页面的时候，Angular 会清空当前的

controller。与此同时，service可以用来永久保存应用的数据，并且这些数据可以在不同的controller之间使用。

Angular 提供了3种方法来创建并注册我们自己的服务。1.Provider2.Factory3.Service

<body ng-app="myApp">

<div ng-controller="firstController">

{{name}}

</div>

<script>

    var m1 = angular.module('myApp',[],function($provide){//通过angular.module的第三个参数配置服务

        $provide.provider('providerServices01',function(){//providerServices01是服务的名称，第二个参数是函数，自定义的服务。

            this.$get=function(){

                return {

                    message:'this is providerServices01'

                }

            }

        })

    });

    console.log(m1);

    m1.controller('firstController',['$scope','providerServices01',function($scope,providerServices01){//在controller中使用服务

        console.log(providerServices01);

        $scope.name='张三';

    }]);

</script>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>无标题文档</title>

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

</head>

<body ng-app="myApp">

<div ng-controller="firstController">

{{name}}

</div>

<script>

    var m1 = angular.module('myApp',[]);//module.config配置服务

    m1.config(function($provide){

        $provide.provider('providerServices01',function(){

            this.$get=function(){//服务的方法

                return {

                    message:'this is providerServices01'

                }

            }

        });

        $provide.provider('providerServices02',function(){

            this.$get=function(){

                var _name='';

                var service={};

                service.setName=function(name){

                    _name=name;

                }

                service.getName=function(){

                   return _name;

                }

                return service;

            }

        });

    })

    console.log(m1);

    m1.controller('firstController',['$scope','providerServices01','providerServices02',function($scope,providerServices01,providerServices02){

        console.log(providerServices01);

        providerServices02.setName('李四1111');

        $scope.name= providerServices02.getName();

        console.log( providerServices02);

    }]);

</script>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>无标题文档</title>

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

</head>

//自定义服务

<body ng-app="myApp">

<div ng-controller="firstController">

{{name}}

</div>

<script>

    var m1 = angular.module('myApp',[],function($provide){

        $provide.provider('providerServices01',function(){

            this.$get=function(){//需要get

                    return 'this is providerServices01';

            }

        });

        $provide.factory('factoryServices01',function(){

                return {//不需要$get

                    message:'this is factoryServices01'

                }

        });

        $provide.factory('factoryServices02',function(){

                return 'this is factoryServices01  text';

        });

        $provide.service('serviceServices01',function(){

            return {

                message:'this is serviceServices01'

            }

        })

    });

    console.log(m1);

    m1.controller('firstController',['$scope','providerServices01','factoryServices01','factoryServices02','serviceServices01',function($scope,providerServices01,factoryServices01,factoryServices02,serviceServices01){

        console.log(providerServices01);

        console.log(factoryServices01);

        console.log(factoryServices02);

        console.log(serviceServices01);

        $scope.name='张三';

    }]);

</script>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>无标题文档</title>

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

</head>

<body ng-app="myApp">

<div ng-controller="firstController">

{{name}}

</div>

<script>

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

    m1.provider('providerServices01',function(){

        this.$get=function(){

            return {

                message:'this is providerServices01'

            }

        }

    });

    m1.service('serviceServices01',function(){

        return {

            message:'this is serviceServices01'

        }

    })

    console.log(m1);

    m1.controller('firstController',['$scope','providerServices01','serviceServices01',function($scope,providerServices01,serviceServices01){

        console.log(providerServices01);

        console.log(serviceServices01);

        $scope.name='张三';

    }]);

</script>

</body>

</html>

angularjs1-6，自定义服务的更多相关文章

  1. angularJS1笔记-(4)-自定义服务

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. angularjs 自定义服务的三种方式

    angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$providevar ...

  3. angularJs自定义服务（实现签名和加密）

    写在前面: angularJS是google公司主推的js开发优秀框架... 页面展示: 在应用中进行加密是普遍存在的,个人建议在前端实现加密签名(前端加密是否必要来自知乎:http://www.zh ...

  4. angularJs自定义服务

    在AngularJS中,系统内置的服务都是以$开头,所以我们的自定义服务尽量避免以$开头.自定义服务的方式有如下几种: 使用Module的provider方法 使用Module的factory方法 使 ...

  5. Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  6. Dynamics AX 2012 R2 在增强入站端口中找不到自定义服务操作

        Reinhard写好自定义服务A,添加好服务操作A1,A2,A3.....     然后,Reinhard在增强的入站端口,选择服务操作时,却找不到这些A1,A2,A3.     查找相关资料 ...

  7. angularJs 自定义服务 provide 与 factory 的区别

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

  8. Android系统在新进程中启动自定义服务过程（startService）的原理分析

    在编写Android应用程序时,我们一般将一些计算型的逻辑放在一个独立的进程来处理,这样主进程仍然可以流畅地响应界面事件,提高用户体验.Android系统为我们提供了一个Service类,我们可以实现 ...

  9. angular factory Services provider 自定义服务 工厂

    转载于 作者:海底苍鹰地址:http://blog.51yip.com/jsjquery/1602.html 1.在app.js 中声明了模块的依赖 var phonecatApp = angular ...

  10. 通过ModuleImplAdvertisement向自定义服务传递参数

    无意中发现通过ModuleImplAdvertisement可以向自定义服务传递参数,有空试一试. —————————————————————————————————————————————————— ...

随机推荐

  1. 【正则表达式】从json数组中抽取id列表

    有如下数组,要从中取出id: "[\"3812662409\",\"3812633637\",\"3812627686\",\&q ...

  2. Android studio 隐藏toolbar上的app title

    getSupportActionBar().setDisplayShowTitleEnabled(false);

  3. MySQL数据库各个版本的区别

    MySQL数据库各个版本的区别 MySQL数据库 MySQL是一种开放源代码的关系型数据库管理系统(RDBMS),MySQL数据库系统使用最常用的数据库管理语言--结构化查询语言(SQL)进行数据库管 ...

  4. 什么时候用created，什么时候用mounted

    created 在实例创建完成后被立即调用.在这一步,实例已完成以下的配置:数据观测 (data observer), 属性和方法的运算,watch/event 事件回调.然而,挂载阶段还没开始,$e ...

  5. Centos 7.2 安装和卸载 MySQL 5.7

    一.背景 闲暇之余在虚拟机安装了 Centos 7.2 系统,按照 <简单安装MySQL(RPM方式)> 这篇文章安装 MySQL ,发现由于包依赖的问题安装失败,于是索性在官网查询相关文 ...

  6. Python笔记18-----函数收集参数

    1.收集参数(参数前面加*): def test1(param1,*params): print(param1) print(params) 调用:test1(1,2,3,4) 结果:1 (2,3,4 ...

  7. [Libre 6281] 数列分块入门 5 (分块)

    水一道入门分块qwq 题面:传送门 开方基本暴力.. 如果某一个区间全部都开成1或0就打上标记全部跳过就行了 因为一个数开上个四五六次就是1了所以复杂度能过233~ code: //By Menteu ...

  8. https自签证书

    linux自带openssl,所以最好在linux平台操作 第一步:生成采用des3算法保护的私钥:openssl genrsa -des3 -out private-rsa.key 1024 命令执 ...

  9. Windows环境下制作Ubuntu的U盘启动工具

    Windows用户想要尝试一下Ubuntu或其他Linux系统?最简单的方法就是使用VMware Workstation,只是虚拟机会真实占用内存,如果你的电脑内存8G及以上可以试试.内存偏小,或者觉 ...

  10. XML概述

    本节要点: 标记语言的定义 XML简介 XML与HTML 比较 XML与数据库比较 XML的特点 XML结构 1          标记语言的定义 “XML.SGML.HTML”中的“ML”(Mark ...