angular

作者: 不忘初心_6b23 | 来源:发表于2020-08-07 10:21 被阅读0次

    3种创建自定义服务的方式

    • factor
    • service
    • provider

    factory

    factory方式创建的服务,作用就是返回一个有属性有方法的对象。相当于:var f = myFactory();

    var app = angular.module('myApp', []);
     
        //通过工厂模式创建自定义服务
        app.factory('myFactory', function() {
            var service = {};//定义一个Object对象'
            service.name = "张三";
            var age;//定义一个私有化的变量
            //对私有属性写getter和setter方法
            service.setAge = function(newAge){
                age = newAge;
            }
            service.getAge = function(){
                return age;
            }
            return service;//返回这个Object对象
        });
        //创建控制器
        app.controller('myCtrl', function($scope, myFactory) {
            myFactory.setAge(20);
            $scope.r =myFactory.getAge();
            alert(myFactory.name);
        });
    

    service

    通过service方式创建自定义服务,相当于new的一个对象:var s = new myService();,只要把属性和方法添加到this上才可以在controller里调用。

    provder

    只有provder是能传 .config() 函数的 service。如果想在 service 对象启用之前,先进行模块范围的配置,那就应该选择 provider。需要注意的是:在config函数里注入provider时,名字应该是:providerName+Provider.
    使用Provider的优点就是,你可以在Provider对象传递到应用程序的其他部分之前在app.config函数中对其进行修改。
    当你使用Provider创建一个service时,唯一的可以在你的控制器中访问的属性和方法是通过$get()函数返回内容。

    angular.js如何在作用域之间通信呢?

    1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信。
    2.通过作用域中的事件处理通信。但是这种方法有一些限制;例如,你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。
    
    $on、$emit和$broadcast使得event、data在controller之间的传递变的简单。
    $emit:子传父  传递event与data
    $broadcast:父传子 child controller传递event与data
    $on:监听或接收数据。。用于接收event与data
    $broadcast、$emit事件必须依靠其他事件(ng-click等)进行触发,而不能单纯写一个这个。。
    $on倒是可以直接写,因为它属于监听和接收数据的。
    

    $watch

    $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你。

    $watch(watchExpression, listener, objectEquality);
    每个参数的说明如下:
    watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。
    listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值), oldValue(旧值), scope(作用域的引用)

    objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它。

    var watch = $scope.$watch('name',function(newValue,oldValue, scope){
    
            console.log(newValue);
    
            console.log(oldValue);
    
    });
    

    相关文章

      网友评论

          本文标题:angular

          本文链接:https://www.haomeiwen.com/subject/baufhktx.html