4.angular 服务

shadouqi2025-03-19 19:29

服务是在controller里面引入的服务： 最好是内部服务在前面，自定义服务在后面

内部服务

$scope

  • scope.watch('属性名', function(newVal, oldVal) {}, true) true是深度监听,对象函数等
  • scope.apply 触发页面更新,里面传入回调函数,比如说之前那个settimeout这种更改数据页面没变化,可以会用这个,我觉得跟 vue中的 s e t 似的 . set似的. set似的.scope.apply(function() { scope.* = 'hi'})

timeout, interval

$filter

$rootScope 根服务

$http

  • method
  • url
  • success
  • error
  • 简写直接就是$http.get().success() 我项目中写的是.then
  • 百度下拉搜索例子(这种教程上写法报错,但是基本看下怎么写的得了)
javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <input type="text" ng-model="name" ng-keyup="change(name)">
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script> -->
    <script src="./public/angular.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
            var timer = null
            $scope.change = function(name) {
                $timeout.cancel(timer)
                timer = $timeout(function() {
                    $http({
                        method: 'JSONP',
                        url: 'http:www.list'
                        // url: 'https://www.baidu.com/s?ie=utf-8&newi=1&mod=1&isbd=1&isid=f4ef53c100060ac3&wd='+name+'&rsv_spt=1&rsv_iqid=0x93e5cb7c0001e73c&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_dl=tb&rsv_enter=0&oq=a&rsv_btype=t&rsv_t=ebbcgxsrZUUmgNSW8%2Fr4PljCkX5%2FL8NvNDz5M3ed1hm27nDOB9PHaRTlQ7nkmZ0N5Nbb&rsv_pq=f4ef53c100060ac3&bs=a&rsv_sid=37377_36552_36461_37361_36885_34813_36804_37260_26350_22159_37223&_ss=1&clist=8e7d48f30f6acc95&hsug=&f4s=1&csor=1&_cr1=34739',
                    }).success(function(data) {
                        console.log(data)
                    })
                }, 1000)
            }
        }])
    </script>
</body>
</html>

$location

  • absUrl() // 绝对编码地址
  • path() // 跟路由挂钩
  • replace()
  • hash()
  • search()
  • url()
  • host()
  • port()
  • protocol()
javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <script src="./public/angular.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', '$location', function($scope, $location) {
           console.log($location.absUrl()) // file:///C:/Users/17903/Desktop/moni/index.html#!/绝对路径

           $location.path('/aaa/bbb/ccc').replace() // file:///C:/Users/17903/Desktop/moni/index.html#!/aaa/bbb/ccc 路由, replace()是没有历史记录
           console.log($location.path()) // /aaa/bbb/ccc

           $location.hash('hello') // file:///C:/Users/17903/Desktop/moni/index.html#!/aaa/bbb/ccc#hello
           console.log($location.hash()) // hello

           $location.search({ name: 'zhaohui'}) // file:///C:/Users/17903/Desktop/moni/index.html#!/aaa/bbb/ccc?name=zhaohui#hello

           console.log($location.url()) // /aaa/bbb/ccc?name=zhaohui#hello
           console.log($location.host()) // ip
           console.log($location.port()) // 端口号
           console.log($location.protocol()) // 协议
        }])
    </script>
</body>
</html>

$anchorScroll -锚点跳转

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 600px;
            border: 1px solid #000;
        }
        ul {
            position: fixed;
            right: 200px;
            top: 30px;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <ul>
        <li ng-repeat="id in ['1', '2', '3', '4', '5']" ng-click="change('div'+ id)">{{id}}aaaa</li>
    </ul>
    <div class="box" ng-repeat="id in ['1', '2', '3', '4', '5']" ng-attr-id="div{{id}}">
        {{id}}
    </div>
    <script src="./public/angular.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll) {
           $scope.change = function(id) {
                $location.hash(id)
                $anchorScroll() // 引入这个$anchorScroll就行,自动hash跳转id,但是因为这个如果一样的不跳转,所以在这里又调用了下
           }
        }])
    </script>
</body>
</html>

$cacheFactory 存储

  • info()
  • put()
  • get()
  • remove()
  • 配置capacity
javascript 复制代码 
<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <script src="./public/angular.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', '$cacheFactory', function($scope, $cacheFactory) {
           var cache = $cacheFactory('myCache', { capacity: 2 }) // capacity限制只能存储两条
           cache.put('name', 'hello') // 设置
           console.log(cache.info()) // {capacity: 2, id: 'myCache', size: 1}
           console.log(cache.get('name')) // hello获取
           cache.remove('name') // 删除
           console.log(cache.get('name')) // undefined
        }])
    </script>
</body>
</html>

$log -- 其实跟console.log差不多

  • log // $log.log('hello')
  • info()
  • warn()
  • error()
  • debug()

$interpolate

-插值计算(比如说输入框中输入{{name}}, 就找$scope.name显示替换),

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <!-- <span>{{ name }}</span> -->
    <textarea ng-model="body"></textarea>
    <span>{{ showText }}</span>
    <script src="./public/angular.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', '$interpolate', function($scope, $interpolate) {
            $scope.name = 'zhaohui'
           $scope.$watch('body', function(newBody) {
                if (newBody) {
                   var tem = $interpolate(newBody)
                   $scope.showText = tem({ name: $scope.name })
                }
           })
        }])
    </script>
</body>
</html>

$q

  • promise实现
  • defer()
  • resolve()
  • reject()
  • notify() // 消息通知
  • then() --成功失败之后的回调
javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <script src="./public/angular.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', '$q', function($scope, $q) {
            var dfd = $q.defer()
            function show() {
                setTimeout(function() {
                    dfd.resolve()
                }, 2000)
                return dfd.promise
            }
            show().then(function() {
                alert('成功')
            }, function() {
                alert('shibai')
            })
        }])
    </script>
</body>
</html>

项目中使用--attachfileupload

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body ng-app="myApp" ng-controller="Aaa">
    <script src="./js/angular.js"></script>
    <script>
      var m1 = angular.module("myApp", []);
      m1.controller("Aaa", [
        "$scope",
        "$q",
        function ($scope, $q) {
          function upload() {
            var defer = $q.defer();
            var promise = defer.promise;
            promise.success = function (fn) {
              promise.then(function (response) {
                fn(response);
              });
              return promise;
            };
            promise.error = function (fn) {
              promise.then(null, function (response) {
                fn(response);
              });
              return promise;
            };
            promise.progress = function (fn) {
              promise.then(null, null, function (response) {
                fn(response);
              });
              return promise;
            };
            return promise;
          }
          function fnUploadFiles() {
            var def = $q.defer();
            upload()
              .success(function (data) {
                def.resolve(data);
              })
              .error(function (data) {
                def.reject(data);
              })
              .progress(function (data) {
                def.notify(data);
              });
            return def.promise;
          }
          fnUploadFiles().then(
            function (data) {
              console.log("chenggongn", data);
            },
            function (data) {
              console.log("shibai", data);
            },
            function (data) {
              console.log("progress", data);
            }
          );
        },
      ]);
    </script>
  </body>
</html>

可以链式调用
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body ng-app="myApp" ng-controller="Aaa">
    <script src="./js/angular.js"></script>
    <script>
      var m1 = angular.module("myApp", []);
      m1.controller("Aaa", [
        "$scope",
        "$q",
        function ($scope, $q) {
          function upload() {
            var defer = $q.defer();
            var promise = defer.promise;
            promise.success = function (data) {
              console.log(data);
              return promise;
            };
            promise.error = function (data) {
              console.log(data);
              return promise;
            };
            promise.lala = function (data) {
              console.log(data);
              return promise;
            };
            return promise;
          }
          function fnUploadFiles() {
            var def = $q.defer();
            upload().success("success").error("error").lala("nihao");
            return def.promise;
          }
          fnUploadFiles();
        },
      ]);
    </script>
  </body>
</html>

angularjs的供应商

  • 服务的相关初始化配置操作(很多服务都可以,直接在后面加Provider)
  • config
  • $interpolate --插值
    • startSymbol()
    • endSysbol()
  • $anchorScroll
    • disableAutoScrolling() ---配置不可以自动跳转了,直接需要重新触发$anchorScroll()手动跳转
      插值改变
javascript 复制代码 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <!-- <span>{{ name }}</span> -->
    <textarea ng-model="body"></textarea>
    <span>@@ showText @@</span>
    <script src="./public/angular.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.config(['$interpolateProvider', function($interpolateProvider) {
            $interpolateProvider.startSymbol('@@')
            $interpolateProvider.endSymbol('@@')
        }])
        m1.controller('Aaa', ['$scope', '$interpolate', function($scope, $interpolate) {
            $scope.name = 'zhaohui'
           $scope.$watch('body', function(newBody) {
                if (newBody) {
                   var tem = $interpolate(newBody)
                   $scope.showText = tem({ name: $scope.name })
                }
           })
        }])
    </script>
</body>
</html>

自定义服务

  • factory() // 第一个参数名字,第二个可以是函数或者跟controller似的[]
  • provider() --也是服务,但是比factory好在可以config初始化配置（使用angularjs的供应商）, $get
javascript 复制代码 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <textarea ng-model="body"></textarea>
    <script src="./public/angular.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.factory('myFactory', function() {
            return {
                name: 'hello',
                show: function() {
                    return this.name
                }
            }
        })
        m1.provider('myProvider', function() {
            return {
                age: '18',
                $get: function() {
                    return {
                        name: 'zhaohui',
                        age: this.age,
                        show: function() {
                            return this.name + this.age
                        }
                    }
                }
                
            }
        })
        m1.config(['myProviderProvider', function(myProviderProvider) {
            console.log('myProviderProvider', myProviderProvider)
            myProviderProvider.age = '20'
        }])
        m1.controller('Aaa', ['$scope', 'myFactory', 'myProvider', function($scope, myFactory, myProvider) { // 一般自定義放在定義好的服務後面
            console.log(myFactory.show()) // hello
            console.log(myProvider.show()) // zhaohui18, 中間配置了就是zhaohui20
        }])
    </script>
</body>
</html>

上面优化

可以多个模块使用

service.js

javascript 复制代码 
var m1 = angular.module('myModule1', [])
m1.provider('myProvider', function() {
    return {
        age: '18',
        $get: function() {
            return {
                name: 'zhaohui',
                age: this.age,
                show: function() {
                    return this.name + this.age
                }
            }
        }
        
    }
})

index.html

javascript 复制代码 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <textarea ng-model="body"></textarea>
    <script src="./public/angular.js"></script>
    <script src="./service.js"></script>
    <script>
        var m2 = angular.module('myApp', ['myModule1'])
        m2.config(['myProviderProvider', function(myProviderProvider) {
            console.log('myProviderProvider', myProviderProvider)
            myProviderProvider.age = '20'
        }])
        m2.controller('Aaa', ['$scope', 'myProvider', function($scope, myProvider) { // 一般自定義放在定義好的服務後面
            console.log(myProvider.show()) // zhaohui18, 中間配置了就是zhaohui20
        }])
    </script>
</body>
</html>
  • service() -构造函数方式写法,面向对象写法
  • constant() --定义常量,可以用。config，但是這個裏面不用後面加Provider.下面這倆不用基本
  • value() -- 也是定义常量,但是跟constant区别就上面那个可以config配置
javascript 复制代码 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <textarea ng-model="body"></textarea>
    <script src="./public/angular.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.service('myService', Fn)
        function Fn() {
            this.name = 'hello'
        }
        m1.constant('myConstant', 'LALALLA')
        m1.config(['myConstant', function(myConstant) {
            console.log('myConstant', myConstant) // LALALLA
        }])
        m1.controller('Aaa', ['$scope', 'myService', 'myConstant', function($scope, myService, myConstant) {
            console.log(myService.name) // hello
            console.log(myConstant) // LALALLA
        }])
    </script>
</body>
</html>

项目中

  • 看项目中基本是使用的.service，，比如弹框等基本都是返回return{ 名称： 定义的函数 }然后其他地方就可以直接abcWidth.fn()
  • 其次可能用factory，也可以返回对象函数拉乱七八糟的，使用也都差不多跟.service
  • provider 这个我看用的基本在插件中
相关推荐
左钦杨1 小时前
Nuxt2 vue 给特定的页面 body 设置 background 不影响其他页面
前端·javascript·vue.js
yechaoa1 小时前
【揭秘大厂】技术专项落地全流程
android·前端·后端
MurphyChen1 小时前
🤯 一行代码，优雅的终结 React Context 嵌套地狱！
前端·react.js
逛逛GitHub1 小时前
推荐 10 个受欢迎的 OCR 开源项目
前端·后端·github
_xaboy2 小时前
开源 FormCreate 表单设计器配置组件的多语言
前端·vue.js·低代码·开源·可视化表单设计器
uglyduckling04122 小时前
小程序构建NPM失败
前端·小程序·npm
草原上唱山歌2 小时前
C/C++都有哪些开源的Web框架？
前端·c++·开源
烛阴2 小时前
JavaScript 调度：setTimeout 和 setInterval
前端·javascript
難釋懷2 小时前
JavaScript基础-获取元素
开发语言·javascript
月巴月巴白勺合鸟月半2 小时前
工作记录 2017-02-03
前端·c#·健康医疗
热门推荐
01本地部署DeepSeek教程（Mac版本）02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03DeepSeek各版本说明与优缺点分析04如何在WPS和Word/Excel中直接使用DeepSeek功能05DeepSeek RAGFlow构建本地知识库系统06本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程07微服务架构中10个常用的设计模式08如何本地部署AI智能体平台，带你手搓一个AI Agent09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10计算机视觉 CV 八股分享 [自用]（更新中......）