本篇文章介紹2種自定義服務的方式,一種是用factory,一種是用service
一、首先介紹使用factory來進行自定義服務
1.html
<div ng-app="module" ng-controller="ctrl"> <table border="1" width="600"> <tr> <td>網站名稱</td> <td>網址</td> </tr> <tr ng-repeat="v in data"> <td>{{v.name}}</td> <td>{{v.url}}</td> </tr> </table></div><script> var m = angular.module('module', []); //factory定義服務videoServer m.factory('videoServer', ['$http', function ($http) { return { /* 第一種方式 get: function (callback) { $http({url: '1.php'}).then(function (response) { callback(response); }); }*/ //第二種方式 all: function () { return $http({url: '1.php'}); } }; }]); //在控制器中使用videoServer服務,與自帶的服務使用方式一樣 m.controller('ctrl', ['$scope', 'videoServer', function ($scope, videoServer) { /*第一種方式 videoServer.get(function (response) { $scope.data = response.data; }); */ //第二種方式 videoServer.all().then(function (response) { $scope.data = response.data; }); }]);</script>1.php
<?php$data = [ [ 'name' => '百度', 'url' => 'www.baidu.com' ], [ 'name' => '谷歌', 'url' => 'google.com' ],];echo json_encode($data,JSON_UNESCAPED_UNICODE);
二、使用service來進行自定義服務
2.html
<div ng-app="module" ng-controller="ctrl"> <table border="1" width="600"> <tr> <td>網站名稱</td> <td>網址</td> </tr> <tr ng-repeat="v in data"> <td>{{v.name}}</td> <td>{{v.url}}</td> </tr> </table></div><script> var m = angular.module('module', []); //service自定義服務videoServer m.service('videoServer', ['$http', function($http){ this.get=function(){ return $http({method:'get',url:'2.php'}).then(function(response){ return response.data; }) } }]) //在控制器中使用videoServer服務,與自帶的服務使用方式一樣 m.controller('ctrl', ['$scope', 'videoServer', function ($scope, videoServer) { videoServer.get().then(function (data) { $scope.data = data; }); }]);</script>2.php
<?php$data = [ [ 'name' => '百度', 'url' => 'www.baidu.com' ], [ 'name' => '谷歌', 'url' => 'google.com' ],];echo json_encode($data,JSON_UNESCAPED_UNICODE);
以上這篇對angularJs中2種自定義服務的實例講解就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選