Angular——自定義服務
阿新 • • 發佈：2018-02-08
常量 demo 模塊 html 追加 返回 ron 我們 $scope
基本介紹
之前我們介紹了angular內置的幾種服務，這裏我們介紹如何自己定義自己的服務，主要是通過三個方法：factory、service、value
基本使用
factory：可以返回對象，也可以返回一個函數
<!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body ng-controller="DemoController"> <h1>{{now}}</h1> <script src="../libs/angular.min.js"></script> <script> var App = angular.module(‘App‘, []); App.factory(‘showTime‘, [‘$filter‘, function ($filter) { return function () { var now = new Date(); return $filter(‘date‘)(now, ‘yy-MM-dd‘); } }]); App.controller(‘DemoController‘, [‘$scope‘, ‘showTime‘, function ($scope, showTime) { $scope.now = showTime(); }]); </script> </body> </html>
<!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body ng-controller="DemoController"> <h1>{{now}}</h1> <script src="../libs/angular.min.js"></script> <script> var App = angular.module(‘App‘, []); App.factory(‘showTime‘, [‘$filter‘, function ($filter) { var now = new Date(); return { now: $filter(‘date‘)(now, ‘yy-MM-dd‘) } }]); App.controller(‘DemoController‘, [‘$scope‘, ‘showTime‘, function ($scope, showTime) { $scope.now = showTime.now; }]); </script> </body> </html>
service：和上面的factory有些區別，service裏面可以用this追加屬性和方法
<!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body ng-controller="DemoController"> <h1>{{now}}</h1> <script src="../libs/angular.min.js"></script> <script> var App = angular.module(‘App‘, []); App.service(‘showTime‘, [‘$filter‘, function ($filter) { var now = new Date(); this.now = $filter(‘date‘)(now, ‘yy-MM-dd‘); }]); App.controller(‘DemoController‘, [‘$scope‘, ‘showTime‘, function ($scope, showTime) { $scope.now = showTime.now; }]); </script> </body> </html>
value：類似於常量，和最開始初始化應用模塊的ng-init十分相似，全局都可以訪問
<!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body ng-controller="DemoController"> <h1>{{text}}</h1> <script src="../libs/angular.min.js"></script> <script> var App = angular.module(‘App‘, []); App.value(‘text‘, ‘Hello World!‘);//定義一個常量，相當於ng-init App.controller(‘DemoController‘, [‘$scope‘, ‘text‘, function ($scope, text) { $scope.text = text; }]); </script> </body> </html>
Angular——自定義服務