`

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 demo 各种基本用法

    自定义服务可以通过`factory`、`service`、`provider`等方式创建。 **指令(Directive)**: 指令是AngularJS的一个创新特性,它们扩展了HTML,让DOM元素具备更丰富的行为。常见的内置指令有`ngRepeat`(用于迭代...

    最新AngularJS开发宝典视频教程 后盾网AngularJS培训视频教程 后盾网.txt

    ├最新AngularJS开发宝典—第070讲 spa项目的server层分析与使用factory创建服务.mp4 ├最新AngularJS开发宝典—第071讲 多个控制器共享服务server数据的处理实例.mp4 ├最新AngularJS开发宝典—第072讲 使用service...

    AngularJS开发下一代WEB应用

    Module是AngularJS的启动点,所有的controller、directive、service和filter等API都是定义在Module实例上的。开发者可以通过angular.module方法来创建和配置模块。 AngularJS中的双向数据绑定是其一大亮点,它允许...

    angularjs_angularjs_

    app.factory('DataService', function($http) { return { fetchData: function(url) { return $http.get(url).then(function(response) { return response.data; }); } }; }); ``` 四、封装指令 指令是...

    AngularJS学习手册 源代码

    app.directive('myDirective', function() { return { restrict: 'A', link: function(scope, element, attrs) { // 在这里编写指令逻辑 } }; }); ``` 四、服务 服务是可复用的单例对象,它们在应用程序的...

    angularjs前端框架

    - **模块注册**:通过`.controller()`、`.service()`、`.directive()`等方法向模块中添加控制器、服务和指令。 ##### 4. 指令系统 指令是AngularJS的一个重要概念,它允许开发者自定义HTML标记,实现复杂的行为和...

    AngularJS UI Development

    服务(Service)和工厂(Factory)都可以提供方法供其他模块调用,但是它们的初始化时机不同。 #### 知识点五:案例分析与最佳实践 - **案例分析**:通过具体案例学习如何利用AngularJS开发完整的应用程序。例如,...

    AngularJs Managing Service Dependencies详解

    首先,我们需要明确AngularJS中的服务(Service)是一种特殊的构造,用于封装业务逻辑,以便在不同的控制器(Controller)和指令(Directive)之间共享。服务可以通过依赖注入来声明和使用,这意味着服务的实现细节...

    angularjs loading遮罩层

    4. **注入服务(Service/Factory)**: 我们需要一个服务来管理加载状态。可以创建一个名为`loadingService`的服务,它有一个`show`和`hide`方法来控制遮罩层的显示与隐藏。 ```javascript myApp.factory('...

    AngularJS 中文API参考手册.zip_API_angularjs_angularjs api

    我们可以通过`angular.service()`, `angular.factory()`, 或 `angular.provider()`来创建自定义服务。 **四、指令(Directives)** 指令是AngularJS中的一个重要特性,它们扩展了HTML,使其能够表达应用程序的行为...

    angularjs初学者速成笔记

    通过`angular.module()`创建模块,并使用`.controller()`, `.service()`, `.directive()`等方法定义组件。 8. **指令**:AngularJS的指令允许你扩展HTML,创建自定义的DOM行为。常见的指令有`ng-repeat`(用于迭代...

    angularjs常见面试题.pdf

    7. **factory、service和provider的区别**: - **service**:使用构造函数创建单例对象,继承自`$rootScope`,提供简单共享数据和服务的方法。 - **factory**:返回一个值(对象、函数、值等),可以创建更复杂的...

    使用AngularJS编写较为优美的JavaScript代码指南

    myApp.service('MyService', function() {}); ``` ### 四、依赖注入 AngularJS 的依赖注入机制使得组件之间的依赖关系可以自动管理,避免了手动创建和传递对象的繁琐过程。只需在需要的地方声明依赖,AngularJS会...

    Angularjs Maintaining Web Applications.pdf

    AngularJS支持多种方式创建服务,如使用factory、service和provider。 - **内置服务**:AngularJS内置了很多服务来帮助开发者处理常见任务,比如HTTP、JSON处理、日志记录等。 - **与后端通信**:通过$HTTP服务和...

    AngularJS学习笔记

    - **14.3 定义服务**:通过`service`或`factory`等方式定义服务,提供特定的功能。 - **14.4 引入模块并使用服务**:将自定义的服务添加到模块中,然后在其他模块中通过依赖注入的方式使用这些服务。 #### 15. 附加...

    AngularJSService

    为了在其他组件(如Controller、Directive等)中使用Service,我们需要通过AngularJS的依赖注入机制来注入Service。这通常在组件的构造函数中完成: ```javascript angular.module('myApp') .controller('...

    AngularJS中实现用户访问的身份认证和表单验证功能

    这可以通过创建自定义指令(directive)实现,指令可以根据用户权限来决定元素的可见性。 2. 路由处理:在用户试图访问受保护的URL时,检查其是否具有相应的权限。这可以通过在路由配置中添加“permission”属性并...

    AngularJs:动态添加,删除指令并保存详细信息

    在本文中,我们将深入探讨AngularJS中的动态添加和删除指令,以及如何保存这些指令的详细信息。AngularJS是一个强大的前端JavaScript框架,它提供了一种声明式的方式来构建交互式的Web应用程序。设计和开发过程中,...

    AngularJS Module方法详解

    此外,还可以使用`controller`定义控制器,`directive`创建自定义指令,`filter`定义过滤器,`provider`创建服务提供者,以及`service`、`factory`和`value`等方法来创建和注入服务。 总之,AngularJS的Module方法...

    Angularjs自定义指令实现三级联动 选择地理位置

    5. **使用Factory**: 在AngularJS中,factory是用来创建服务(Service)的一种方式。它用于封装可重用的代码块,例如在本文档中,"utilsService" factory用于提供一个`isEmptyObj`方法来检查一个对象是否为空。 6. ...

Global site tag (gtag.js) - Google Analytics