zoukankan      html  css  js  c++  java
  • Angular——自定义服务

    基本介绍

    之前我们介绍了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>
  • 相关阅读:
    2016.07.13-map的使用(以leetcode1-Two Sum为例)
    2016.6.26——Maximum Depth of Binary Tree
    centos7下docker发布第一个微服务应用(Eureka)
    centos7下快速安装Nginx服务器
    java队列Queue及阻塞队列
    JConsole连接远程linux服务器配置
    mysql时间与字符串之间相互转换
    Tomcat启动报错:org.apache.catalina.LifecycleException: Failed to start component...java.util.zip.ZipException: error in opening zip file
    java post请求的表单提交和json提交简单小结
    wagon-maven-plugin实现自动打包部署到服务器
  • 原文地址:https://www.cnblogs.com/wuqiuxue/p/8432052.html
Copyright © 2011-2022 走看看