angularjs 指令Provider(八)
文章目录
- 文章转载
- 概念
- constant()
- value()
- service()
- factory()
- provider()
文章转载
AngularJS中的Provider们：Service和Factory等的区别
概念
- $provide服务负责告诉Angular如何创造一个新的可注入的东西
- 也可以通过要求 p r o v i d e 被 注 入 到 一 个 应 用 的 c o n f i g 函 数 中 来 获 得 provide被注入到一个应用的config函数中来获得 provide被注入到一个应用的config函数中来获得provide服务
constant()
- 定义常量用的，这货定义的值当然就不能被改变，它可以被注入到任何地方，但是不能被装饰器(decorator)装饰
<html lang="zh" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS入门学习title>
<script src="../public/js/angular.min.js">script>
head>
<body>
<div ng-controller="ctrl">
{{myname}}
div>
<script>
var app = angular.module('myApp', [])
app.config(function ($provide) {
$provide.constant('movieTitle', 'The Matrix')
})
app.controller('ctrl', function ($scope, movieTitle) {
$scope.myname = movieTitle
})
script>
body>
html>
value()
- 它和constant的不同之处在于，它可以被修改，不能被注入到config中，但是它可以被decorator装饰
- 这货可以是string,number甚至function,
<html lang="zh" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS入门学习title>
<script src="../public/js/angular.min.js">script>
head>
<body>
<div ng-controller="ctrl">
{{myname}}
div>
<script>
var app = angular.module('myApp', [])
app.config(function ($provide) {
$provide.value('movieTitle', 'The Matrix 3232432')
})
app.controller('ctrl', function ($scope, movieTitle) {
$scope.myname = movieTitle
})
script>
body>
html>
service()
- 它是一个可注入的构造器，在AngularJS中它是单例的，用它在Controller中通信或者共享数据都很合适
<html lang="zh" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS入门学习title>
<script src="../public/js/angular.min.js">script>
head>
<body>
<div ng-controller="ctrl">
{{myname}}
div>
<script>
var app = angular.module('myApp', [])
app.config(function ($provide) {
$provide.service('movieService', [function () {
this.title = 'The Matrix'
this.testAction = function () {
alert(this.title)
}
}])
})
app.controller('ctrl', ['movieService', function (movieService) {
console.log(movieService)
debugger
movieService.testAction()
}])
script>
body>
html>
factory()
1 .它是一个可注入的function，
2. 它和service的区别就是：factory是普通function，而service是一个构造器(constructor)，这样Angular在调用service时会用new关键字，而调用factory时只是调用普通的function，
3. 所以factory可以返回任何东西，而service可以不返回(可查阅new关键字的作用)
var app = angular.module('myApp', [])
app.config(function ($provide) {
$provide.factory('movie', function () {
return {
title: 'The Matrix',
}
})
})
app.controller('ctrl', function ($scope, movie) {
console.log(movie)
$scope.myname = movie.title
debugger
})
provider()
- provider是他们的老大，上面的几乎(除了constant)都是provider的封装，provider必须有一个$get方法，当然也可以说provider是一个可配置的factory
<html lang="zh" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS入门学习title>
<script src="../public/js/angular.min.js">script>
head>
<body>
<div ng-controller="ctrl">
{{myname}}
div>
<script>
var app = angular.module('myApp', [])
app.provider('movie', function () {
var version
return {
setVersion: function (value) {
version = value
},
$get: function () {
return {
title: 'The Matrix' + ' ' + version,
}
},
}
})
app.config(function (movieProvider) {
movieProvider.setVersion('Reloaded')
})
app.controller('ctrl', function (movie) {
console.log(movie)
debugger
})
script>
body>
html>
注意这里config方法注入的是movieProvider，上面定义了一个供应商叫movie，但是注入到config中不能直接写movie，因为前文讲了注入的那个东西就是服务，是供应商提供出来的，而config中又只能注入供应商（两个例外是 p r o v i d e 和 provide和 provide和injector），所以用驼峰命名法写成movieProvider，Angular就会帮你注入它的供应商。