4.angular 服务

服务是在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 这个我看用的基本在插件中

内部服务

$scope

timeout, interval

$filter

$rootScope 根服务

$http

$location

$anchorScroll -锚点跳转

$cacheFactory 存储

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

$interpolate

$q

angularjs的供应商

自定义服务

项目中

$timeout,$ interval