Angular服务与自定义服务
来源:互联网 发布:unity使用json 编辑:程序博客网 时间:2024/06/05 02:03
在Angular应用中:
View视图 专门用于数据的展示和提取
Controller控制器,主要用于数据的挂载(数据从哪来?)
自定义服务:用于从后端接口获取数据,然后将数据挂载到控制器中
Model数据模型:应用中要使用的各种数据,一般从后端获取之后存储在控制器的变量中
Angular的服务,主要从以下两方面来讲:
1.自定义服务:
Angular中自定义服务的方式有三种:
(1)factory工厂模式实现:比较常用,根据项目组规范进行确定是否使用;
(2)service对象方式:比较常用,根据项目组规范进行确定是否使用;
(3)provider代理方式:Angular框架中的使用方式,常规项目开发很少使用
2.内置服务【$http服务,下次分享】
第一种实现方式——factory模式
1.它以其简洁的使用特色而流行于自定义服务行列;
2.在处理返回数据的时候,可以返回字面量、数组、对象、复杂对象等等各种数据;
3.极大的满足了我们项目的需要,所以使用较多,需要掌握。
<html ng-app="myApp"><head> <title>Title</title> <script src="angular.min.js"></script></head><body><div ng-controller="myCtrl"> factory:<div ng-bind="value1"></div></div><script> var app = angular.module("myApp", []); app.controller("myCtrl", ["$scope","service1", function($scope, s1) { $scope.value1 = s1; // 从自定义服务中获取数据 }]); app.factory("service1", function() { // 从后端获取数据:模拟 var _v = "factory value"; // 返回数据,返回的数据可以是字符串,可以是复杂对象 return _v; });</script></body></html>
第二种实现方式——service方式【熟练掌握】
1、以其规范的返回数据而流行与自定义服务行列
2、service方式,只能返回对象,在某些项目组中,为了规范服务返回的数据,也就是强制指定,
必须返回对象数据,才能正常解析,避免了出现大量的各种格式的数据;由于返回数据的标准化而流行!
<html ng-app="myApp"><head> <meta charset="UTF-8"> <title>Title</title> <script src="angular.min.js"></script></head><body><div ng-controller="myCtrl"> service:<div ng-bind="value2"></div></div><script> var app = angular.module("myApp", []); app.controller("myCtrl", ["$scope","service2", function($scope, s2) { $scope.value2 = s2.v; // s2 {v:_v},s2.v:_v }]); app.service("service2", function() { // 从后端获取数据:模拟 var _v = "service value"; // 返回JSON对象 return{v:_v}; });</script></body></html>
第三种实现方式——provider方式【了解】
1、要求处理的过程中必须通过this.$get()函数进行返回数据的处理2、这种方式在Angular自己的内置服务和框架中使用较多,但是不推荐在项目开发中使用
因为操作的复杂性和代码的可读性无形中让开发人员掌握有一定的难度
<html ng-app="myApp"><head> <meta charset="UTF-8"> <title>Title</title> <script src="angular.min.js"></script></head><body><div ng-controller="myCtrl"> provider:<div ng-bind="value3"></div></div><script> var app = angular.module("myApp", []); app.controller("myCtrl", ["$scope","service3", function($scope, s3) { $scope.value3 = s3; }]); app.provider("service3", function() { this.$get=function(){ return "provider value"; } });</script></body></html>
0 0
- Angular服务与自定义服务
- angular服务和自定义服务
- Angular 服务和自定义服务
- angular自定义服务
- angular自定义服务
- angular 自定义服务
- Angular自定义服务
- Angular中的自定义服务
- angular 自定义服务
- angular自定义服务
- angular自定义服务
- angular中的自定义服务
- Angular.js之服务与自定义服务学习笔记
- [angular]服务之1创建自定义服务
- Angular的服务之自定义服务
- Angular中的$provide(自定义服务)
- angular服务
- angular-服务
- 嵌入式代码open("/dev/ttyso",o_RDWR/O_NOCTTY/O_NDELAY);
- React.js实现原生js拖拽效果及思考
- Java Javabean的数据存储
- React.js入门必须知道的那些事
- oracle包
- Angular服务与自定义服务
- SpringBoot非官方教程 | 第二十四篇: springboot整合docker
- 学习笔记1
- Tomcat 虚拟主机设置
- 494. Target Sum
- SpringMVC 配置之浅谈传统的非注解控制器
- Maven构建struts2路径出错
- Echarts-Struts2+Spring+Mybnatis+Jquery+Json在页面显示数据(数据从数据库读取)
- java 连数据库