Question

我正在学习角度，这就是为什么有一段时间我不理解代码。我有一个角度定制服务的代码。首先看代码。

angular.module('yourModule').factory('alertService', function() {
    return {
        showError : function() {
            $.bigBox({
                title: title,
                content: content == null ? "An error occurred.<br /><br />If this error    persists, please contact support." : content,
                color: "#C46A69",
                //timeout: 6000,
                icon: "fa fa-warning shake animated",
                //number: "1",
                timeout: 3000
            });
        }
    };
});

然后你可以将它注入任何控制器并使用它：

angular.module('yourModule').controller('yourController', function($scope, alertService) {
   someFunction().success(function (result) {
       // great!
   }).error(function (error) {
       // call standard error message function
       alertService.showError("Update Failed"); // use default error message
   });
});

问题1

当注入内置服务时，我们使用$ sign这样的方式 $ scope或$ window等但是当注入自定义服务时，只需编写服务名称而不用$ sign为什么？

如果我们需要使用$ sign注入我自己的服务，那么会出现任何问题吗？对于$ sign，我是否需要使用任何特定代码模式创建服务？

问题2

showError : function() {

}

我们可以像这样声明上面的函数名吗

this.showError = function() {

  };

$scope.showError = function() {

    }

如果我的理解有问题，请纠正我。

Answer 1

问题＃1 $ sign用于角度内置服务，因此您可以区分核心服务和内置服务。建议您不要将$用于自己的服务

问题＃2：没有。您正在返回一个对象，showError是对象的键，函数是值。对象键始终定义为

{
   showError: function (){
   }
}

以下模式通常与控制器一起使用，而不是服务。

this.showError = function() {
};

$scope.showError = function() {
}

Answer 2

因为角度服务的名称中包含$，而您的服务没有。这是一个使用angular的约定，以确保框架服务名称不会与您自己的服务名称冲突。如果用$命名自己的服务，就会毁了它。因此，请勿使用领先的$。
没有。服务不能注入范围，因为服务是应用程序的全局服务，而不是特定于特定页面的服务。使用this.showError会将函数绑定到工厂，而不是将其绑定到工厂返回的对象（即正在定义的服务）。如果您使用this.showError方法而非service()方法声明服务，则可以使用factory()。请阅读the documentation，了解有关定义服务的各种方法的说明。

Answer 3

//creating the module ,controller and registering with the module all done in one line
//Use the method chaining mechnism as show below:
var myApp = angular.module('myModule', []).controller("myController",function($scope,stringService){
	console.log("Hi");
	$scope.transformString = function(input){
		
		console.log("Hello");
		$scope.output = stringService.processString(input);
	}

	
});

//Above is Controller file//
//below is custom service.You can put into separate file and reuse it another Controller //
myApp.factory('stringService',function(){
	 return {
	 	processString:function(input){
	 		if(!input){
				return input;
			}
			var output ="";
			for(var i = 0; i<input.length;i++){
				if(i > 0 && input[i] == input[i].toUpperCase()){
					output = output + " ";
				}
				output = output + input[i];
			}
			return output;

	 	}
	 }
});

table{
	border-collapse: collapse;
	font-family: Arial;
}
td{
	border: 1px solid black;
	padding: 5px;
}
th{
	border:1px solid black;
	padding: 5px;
	text-align: left;
}

<!DOCTYPE html>
<html>
<head>
	<title>Angularjs- Custom Services in Angular</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
	<script type="text/javascript" src="script.js"></script>
	<script type="text/javascript" src="StringService.js"></script>
	<link rel="stylesheet" href="style.css">
</head>
<body >
<p> What is a services in an Angular Application?<br>
	Why do we need services in an angular application?
	<br>
	What are the benefits of using services?
  
</p>
<div ng-app="myModule">
	<div ng-controller="myController">
	
	
	<table border="1">
		
		<tbody>
			<tr>
				<td>Your String</td>
				<td><input type="text" ng-model="input" ></td>
			</tr>
			<tr>
				<td>Result</td>
				<td><input type="text" ng-model="output" ></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="button" value="Process String" ng-click="transformString(input)" ></td>
			</tr>

		</tbody>
	</table>
	
</div>

</div>

</body>
</html>

Answer 4

您可以使用AngularJs提供的自定义服务。使用服务：

var module = angular.module('myapp', []);

module.service('userService', function(){
    this.users = ['John', 'James', 'Jake'];
});

您也可以使用工厂方法。

module.factory('userService', function(){

    var fac = {};

    fac.users = ['John', 'James', 'Jake']; 

    return fac;

});

供参考：http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

AngularJS自定义服务注入

问题1

问题2

4 个答案: