Question

我想整合＆＃39; toastr＆＃39;库（https://github.com/CodeSeven/toastr）并且无法理解如何在角度中使用它。

当我尝试在服务中定义依赖项时，收到followinf错误消息：

Error: error:unpr
Unknown Provider
Unknown provider: toastrProvider

的index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <link rel="icon" type="image/png" href="assets/images/favicon.ico">
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <base href="/">
    <title>Todo App</title>

    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
    <script src="app.js"></script>
    <script src="app.routes.js"></script>
    <script src="app.constants.js"></script>
    <script src="blocks/logger.js"></script>
    <script src="todo/todo.controller.js"></script>
    <script src="todo/todo.factory.js"></script>

</head>

<body ng-app="app">

<section id="main">
    <div class="container">
        <ng-view></ng-view>
    </div>
</section>

</body>
</html>

logger.js

'use strict'

angular
    .module('app')
    .factory('logger', logger);

logger.$inject = ['$log', 'toastr'];

function logger($log, toastr) {
    var service = {
        showToasts: true,

        error: error,
        info: info,
        success: success,
        warning: warning,

        log: $log.log
    }

    return service;

    function error(message, data, title) {
        toastr.error(message, title);
        $log.error('Error: ' + message, data);
    }

    function info(message, data, title) {
        toastr.info(message, title);
        $log.info('Info: ' + message, data);
    }

    function success(message, data, title) {
        toastr.success(message, title);
        $log.success('Success: ' + message, data);
    }

    function warning(message, data, title) {
        toastr.warning(message, title);
        $log.warning('Warning: ' + message, data);
    }
}

如果我要移除＆＃39; toastr＆＃39;依赖和所有toastr方法调用，应用程序将正常工作。在AngularJS中使用第三方库我做错了什么？

如何在AngularJS中为第三方库正确定义依赖关系

0 个答案: