zoukankan      html  css  js  c++  java
  • Angular Service入门

    1.Angular内置service

    Angular为了方便开发者开发,本身提供了非常多的内置服务。可以通过https://docs.angularjs.org/api/ng/service查看AngularJS提供的内置服务。在企业级开发中,常用的服务有以下这些:

    • $cacheFactory 缓存服务
    • $compile 编译服务
    • $filter 通过 $filter 服务可以格式化输出数据,也可以对数据进行过滤操作
    • $http AngularJS内置的核心的服务,主要和后台请求相关
    • $location 基于window.location的Angular版本,功能更强大。比如路由地址的切换: $location.path('/home')
    • $log 开发过程中用到的多,输入错误和调试日志。和Chrome浏览器的console.log()、console.debug()等类似
    • $q 服务主要是用于异步函数返回一个promise,在路由中resovle属性用的较多
    • $rootScope 一个应用只有一个 $rootScope,该服务可以用于每个页面都需要使用的公共数据或者变量,但是开发过程中,建议尽量少用 $rootScope,调试起来不方便。因为它是一个全局变量。

    2.Angular自定义Service

    可以通过多种方式方式定义Service,常用的使用factory来定义一个service。代码如下:

    app.factory('dataService', function () {
        var appVerison = "1.0";
        var showVersion = function () {
            return appVerison;
        };
    
        return {
            appTitle: "Decorators Demo",
            showVersion: showVersion
        }
    });

    3.在控制器之间共享数据使用Service

    控制器和控制器之间共享数据也有多种方式,将变量或者函数绑定$rootScope是一种常见的方式,但是不推荐。常见的情况是使用Service来共享多个controller之间的数据。一个记录图书阅读的系统,需要记录最后一次编辑的图书信息。
    BooksController.js里面读取currentUser服务,在编辑的页面给currentUser服务里面的lastBookEdited对象赋值。

    定义currentUser服务

    angular.module('app')
        .factory('currentUser', function () {
            var lastBookEdited = {};
            return {
                lastBookEdited: lastBookEdited
            }
            
        });

    在EditController.js

    dataService.getBookByID($routeParams.bookId)
                .then(function (response) {
                    vm.currentBook = response;
    //将当前编辑的图书对象赋值给lastBookEdited
                    currentUser.lastBookEdited=vm.currentBook;属性
                })
                .catch(function (response) {
                    $log.error(response);
                });

    BooksController.js

    vm.currentUser=currentUser;

    模板books.html

    <div>
        {{books.summaryData.bookCount}} Books --
        {{books.summaryData.readerCount}} Readers --
    
        {{books.summaryData.grandTotalMinutes}} Total Minutes Read
    </div>

    4.Decorators(修饰)在Angular Service的使用

    在实际开发过程中,我们需要对自己的服务进行增加一下方法,或者对引入的第三方服务增加一下方法,开发者可以不需要修改之前的源代码,而是可以在运行时为Service增加方法。这里需要用到Decorator-修饰。修饰模式是软件设计里面一种经典设计模式,在高级的面向对象语言,比如Java、C#等都有实现。AngularJS代码举例:

    var app = angular.module('app', []);
    
    app.controller('MainCtrl', function ($scope, dataService) {
        $scope.app = dataService;
    });
    
    
    app.factory('dataService', function () {
        var appVerison = "1.0";
        var showVersion = function () {
            return appVerison;
        };
    
        return {
            appTitle: "Decorators Demo",
            showVersion: showVersion
        }
    });
    
    app.config(function ($provide) {
        $provide.decorator('dataService', function ($delegate) {
            $delegate.sayHello = function () {
                return "a new function of 'dataService'";
            };
    
            return $delegate;
        });
    });
    

    项目地址:https://github.com/cmssfe/angular-js-path/tree/master/angularjs-services-in-depth/BookLogger

    参考网址

  • 相关阅读:
    牛客小白月赛12 D 月月给华华出题 (欧拉函数,数论,线筛)
    牛客小白月赛12 F 华华开始学信息学 (分块+树状数组)
    牛客小白月赛12 C 华华给月月出题 (积性函数,线性筛)
    牛客小白月赛12 I 华华和月月逛公园 (tarjian 求桥)
    Tourist's Notes CodeForces
    Educational Codeforces Round 71 (Rated for Div. 2) E XOR Guessing (二进制分组,交互)
    Tunnel Warfare HDU
    蓝桥杯第三届总决赛
    HDU 1695(数论,筛选+素因子分解+容斥)
    lightoj 1248 Dice (III)(几何分布+期望)
  • 原文地址:https://www.cnblogs.com/chaoyuehedy/p/8085667.html
Copyright © 2011-2022 走看看