Angular——自定义服务

最新推荐文章于 2019-07-15 00:08:21 发布

weixin_30781107

最新推荐文章于 2019-07-15 00:08:21 发布

阅读量128

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wuqiuxue/p/8432052.html

版权

基本介绍

之前我们介绍了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>

转载于:https://www.cnblogs.com/wuqiuxue/p/8432052.html

weixin_30781107

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular——自定义服务

基本介绍之前我们介绍了angular内置的几种服务，这里我们介绍如何自己定义自己的服务，主要是通过三个方法：factory、service、value基本使用factory：可以返回对象，也可以返回一个函数<!DOCTYPE html><html lang="en" ng-app="App"><head> <meta ...
复制链接

扫一扫