anaular中的自定義服務

ITzhongzi發表於2017-04-04


1. 自定義服務的五種方法

自定義服務( 5 種方法 )
        1> factory
        2> service
        3> constant
        4> value        -> module.value( '服務名', 值 )
        5> provider

        factory: （最常用）
        module.factory( '服務名', [ '...', function ( ... ) {
            return ...
        }] )

#自定義指令的例項demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../angular.js"></script>
</head>
<body ng-app="mainApp">
    <input type="text" ng-model="k"> <br>
    <input type="text" ng-model="v"> <br>
    <button ng-click="save()"> 儲存 </button> <br>
    <button ng-click="read()"> 列印 </button> <br>
</body>
<script>
    angular.module( 'mainApp', [] )
        .factory( 'myStorage', [ '$window', function ( $window ) {
            // 需要一個物件 可存可取

            // $window.localStorage.setItem( k, v )
            var storage = {
                data: function ( key, value ) {
                    if ( value ) { // 不嚴謹
                        // 傳入了 value 要設定
                        $window.localStorage.setItem( key, value );
                    } else {
                        // 沒有傳入要獲取
                        return $window.localStorage.getItem( key );
                    }
                }
            };

            return storage;
        }])
        .run( [ '$rootScope', 'myStorage', function ( $rootScope, myStorage ) {
            $rootScope.save = function () {
                myStorage.data( $rootScope.k, $rootScope.v );
            };

            $rootScope.read = function () {
                alert( myStorage.data( $rootScope.k ) );
            } ;
        }]);

</script>
</html>

相關文章