Anglejs 서비스를 사용하는 방법은 무엇입니까? Anglejs 서비스 사용에 대한 구체적인 소개
- 寻∝梦원래의
- 2018-09-08 11:54:53919검색
이 글에서는 주로 angularjs 서비스에 대한 세부 사항과 Anglejs 내장 서비스의 사용법을 소개합니다. 이 글을 함께 살펴보시죠
서비스의 본질은 데이터와 객체를 제공하는 싱글톤 객체입니다.
두 가지 주요 카테고리:
1내장 서비스
scope
window 내장된 메소드를 사용하세요. in service:
첫 번째 단계는 필요한 서비스를 function(location) 에 삽입하는 것입니다. 두 번째 단계는 서비스에서 제공하는 메소드 데이터를 호출하는 것입니다. . 사례: 내장된 $interval을 통해 캐러셀 차트 만들기
<!DOCTYPE html><html ng-app="myApp"><head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script></head><body><p ng-controller="myCtrl">
<img ng-src="img/{{imgList[index]}}" alt=""/>
<h1>{{count}}</h1></p><script>
var app = angular.module('myApp', ['ng']);
app.controller('myCtrl', function ($scope,$interval) {
$scope.count = 0;
timer = $interval(function () {
$scope.count++; if($scope.count > 20)
{
$interval.cancel(timer)
}
},500)
$scope.index = 0;
$scope.imgList = ['1.jpg','2.jpg','3.jpg']
$interval(function () {
$scope.index++; if($scope.index > 2)
{
$scope.index = 0;
}
},1000)
});</script></body></html>②맞춤 서비스서비스의 목적은 비즈니스 로직을 캡슐화하고 코드 재사용률을 높이는 것입니다
app .factory ('서비스 이름', function(){//일반 메서드 반환 {}})
app.service('서비스 이름', function(){//Constructor})app.constant(' 서비스 이름', {})//상수 서비스 생성 app.value ('서비스 이름', {}) // app.factory를 통해 변수 서비스 생성
('서비스 이름', function() { // 일반 메서드 return {}}) 서비스 생성
<!DOCTYPE html><html ng-app="myApp"><head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script></head><body><p ng-controller="myCtrl">
<button ng-click="handleClick()">clickMe</button></p><script>
var app = angular.module('myApp', ['ng']); //创建自定义服务
app.factory('$output', function () {
return {
print: function () {
console.log('func in $output is called');
}
}
})
app.controller('myCtrl', function ($scope,$output) {
$scope.handleClick = function () {
//调用自定义服务所提供的方法
$output.print();
}
});</script></body></html>app.service('service name', function(){//constructor})를 통해 서비스 생성
<script>
var app = angular.module('myApp', ['ng']); //自定义服务
app.service('$student', function () {
this.study = function () {
console.log('we are learning...');
} this.name = "zhangSan";
})
app.controller('myCtrl', function ($scope, $student) {
$student.study();
});</script></body></html>** app.constant를 통해 서비스 생성
app.value('服务名称'，{})//创建变量服务**<script> var app = angular.module('myApp', ['ng']); //创建常量服务
app.constant('$Author',{name:'KKK',email:'**@163.com'}) //创建变量服务
app.value('$Config',{version:1})
app.controller('myCtrl', function ($scope,$Author,$Config) {
console.log($Author.email);
console.log($Config.version);
});
</script>** ('서비스 이름' , {})//상수 서비스 생성<body><p ng-controller="myCtrl">
<button ng-click="start()">开始</button>
<button ng-click="stop()">结束</button></p><script>
var app = angular.module('myApp', ['ng']); //通过service方法去创建自定义服务
app.service('$HeartBeat', function ($interval) {
this.startBeat = function () {
promise = $interval(function () {
console.log('beat...');
},1000);
} this.stopBeat = function () {
$interval.cancel(promise);
}
})
app.controller('myCtrl', function ($scope,$HeartBeat) {
$scope.start = function () {
$HeartBeat.startBeat();
}
$scope.stop = function () {
$HeartBeat.stopBeat();
}
});</script>참고: 맞춤형 서비스는 다른 서비스의 메서드를 사용해야 합니다
rrreee좋아, 이 글은 여기까지입니다. (자세한 내용을 보려면 다음으로 이동하세요. 여기 PHP 중국어 웹사이트AngularJS 사용자 매뉴얼
위 내용은 Anglejs 서비스를 사용하는 방법은 무엇입니까? Anglejs 서비스 사용에 대한 구체적인 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!