AngularJs service,factory,directive区别

service

service只实例化一次，其实就是单例模式的思想。无论我们在什么地方注入我们的service，将永远使用同一个实例。所以对很多在controller层中的操作就可以放到serivce层中去。

servie 一般直接用this来操作数据、定义函数。

app.service('myService', function() {  
    var privateValue = "I am Private";  
    this.variable = "This is public";  
    this.getPrivate = function() { return privateValue;  
};  
});

service()方法很适合使用在功能控制比较多的service里面

<div ng-controller="myCtrl">  
        <button ng-click="getPrivate()">按钮一</button>  
        <button ng-click="getPUbluc()">按钮二</button>  
    </div>  
    <div ng-controller = "myCtrl2">  
    </div>

var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope, myService) {  
    $scope.getPrivate = function() {  
        alert(myService.getPrivate());  
    };  
    $scope.getPUbluc = function() {  
        alert(myService.variable);  
    };  
});  
app.controller('myCtrl2', function($scope, myService) {  
  
});  
app.service('myService', function() {  
     console.log('instance myService');  
    var privateValue = "I am Private";  
    this.variable = "This is public";  
    this.getPrivate = function() {  
        return privateValue;  
    };  
});  
</script>

Factory

Factory 一般就是创建一个对象，然后在对这个对象添加方法与数据，最后将些对象返回即可。然后注入到Controller层中即可。

var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope, myFactory) {  
    $scope.getPrivate = function() {  
        alert(myFactory.getPrivate());  
    };  
    $scope.getPUbluc = function() {  
        alert(myFactory.variable);  
    };  
});  
app.controller('myCtrl2', function($scope, myFactory) {  
  
});  
app.factory('myFactory', function() {  
    console.log('instance myFactory');  
    var factory = {};  
    var privateValue = "I am Private";  
    factory.variable = "This is public";  
    factory.getPrivate = function() {  
        return privateValue;  
    };  
    return factory;  
});  
</script>

directive自定义指令

angular.module("app",[])
 .directive("directive",function(){
    return{
     	restrict:"EACM", //指明指令在DOM中以什么样的形式被声明
		priority:0, //该指令的执行优先级
		terminal:true/false, //是否是最后一组执行的directive。
		template:"<div></div>", //模板
		template:"**/**.html", //指定模板的url
		replace:true/false,  //替换或拼接到当前元素
		transclude:true/false/'element', //将内容编译后放入指定地方
		scope:true/false/{}, //创建一个新的作用域
		require:[],  //请求其他directive的controller
		controller:function/controllerName, //创建一个控制器，可与其他              .                                                    directive共享
		link:function, //操控DOM元素
		compile:function, //通过表示服修改DOM模板
    };
})

AngularJs service,factory,directive区别

猜你喜欢