javascript - 尝试包含ngMaterial $ mdToast，$ animate时，Angular Material “[$injector:unpr] Unknown provider”错误

我正在尝试在此应用中使用ngMaterial:

Bower.json文件:

{
  "name": "x",
  "version": "0.0.0",
  "description": "x",
  "dependencies": {
    "bootstrap": "~3",
    "angular": "~1.4.7",
    "angular-resource": "~1.4.7",
    "angular-animate": "~1.4.7",
    "angular-mocks": "~1.4.7",
    "angular-bootstrap": "~0.13",
    "angular-ui-utils": "bower",
    "angular-ui-router": "~0.2",
    "angular-file-upload": "1.1.5",
    "angular-material": "~0.11.4"
  },
  "resolutions": {
    "angular": ">= 1.0.2"
  }
}

配置JS文件:

module.exports = {
  client: {
    lib: {
      css: [
        'public/lib/bootstrap/dist/css/bootstrap.css',
        'public/lib/bootstrap/dist/css/bootstrap-theme.css',
        'public/lib/bootstrap/dist/css/angular-material.css'
      ],
      js: [
        'public/lib/angular/angular.js',
        'public/lib/angular-aria/angular-aria.js',
        'public/lib/angular-resource/angular-resource.js',
        'public/lib/angular-animate/angular-animate.js',
        'public/lib/angular-material/angular-material.js',
        'public/lib/angular-ui-router/release/angular-ui-router.js',
        'public/lib/angular-ui-utils/ui-utils.js',
        'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',
        'public/lib/angular-file-upload/angular-file-upload.js'
      ],

应用配置:

// Init the application configuration module for AngularJS application
var ApplicationConfiguration = (function () {

  // Init module configuration options
  var applicationModuleName = 'x';
  var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload', 'ngMaterial'];

  // Add a new vertical module
  var registerModule = function (moduleName, dependencies) {
    // Create angular module
    angular.module(moduleName, dependencies || []);

    // Add the module to the AngularJS configuration file
    angular.module(applicationModuleName).requires.push(moduleName);
  };

  return {
    applicationModuleName: applicationModuleName,
    applicationModuleVendorDependencies: applicationModuleVendorDependencies,
    registerModule: registerModule
  };
})();

然后:

// Use Application configuration module to register a new module
ApplicationConfiguration.registerModule('core');
ApplicationConfiguration.registerModule('core.admin', ['core']);
ApplicationConfiguration.registerModule('core.admin.routes', ['ui.router']);

当我尝试在以下模块中引用ngMaterial，$ mdToast或$ animate时，它失败。如果没有下面的引用，则html md-引用没有错误，它们只是无法正常工作(它们将显示，但没有“实质性”功能)。

Controller JS文件:

angular.module('core').controller('HeaderController', ['$scope', '$state', 'ngMaterial', 'Authentication', 'Menus',
  function ($scope, $state, Authentication, Menus) {
// Add '$mdToast', '$animate',   $mdToast, $animate and the same error results

引发错误:

Error: [$injector:unpr] Unknown provider: ngMaterialProvider <- ngMaterial <- HeaderController
http://errors.angularjs.org/1.4.7/$injector/unpr?p0=ngMaterialProvider%20%3C-%20ngMaterial%20%3C-%20HeaderController
    at http://localhost:3000/lib/angular/angular.js:68:12
    at http://localhost:3000/lib/angular/angular.js:4289:19
    at Object.getService [as get] (http://localhost:3000/lib/angular/angular.js:4437:39)
    at http://localhost:3000/lib/angular/angular.js:4294:45
    at getService (http://localhost:3000/lib/angular/angular.js:4437:39)
    at Object.invoke (http://localhost:3000/lib/angular/angular.js:4469:13)
    at extend.instance (http://localhost:3000/lib/angular/angular.js:9136:34)
    at nodeLinkFn (http://localhost:3000/lib/angular/angular.js:8248:36)
    at compositeLinkFn (http://localhost:3000/lib/angular/angular.js:7680:13)
    at publicLinkFn (http://localhost:3000/lib/angular/angular.js:7555:30) <header data-ng-include="'/modules/core/views/header.client.view.html'" class="ng-scope" data-ng-animate="1">

最佳答案

ngMaterial是模块的名称，不能注入(inject)到 Controller 中。您必须从以下几行中将其删除:

angular.module('core').controller('HeaderController',
    ['$scope', '$state', 'ngMaterial', 'Authentication', 'Menus',
    function ($scope, $state, Authentication, Menus) {

相反，应在应用程序的模块依赖项中添加ngMaterial:

angular.module('appName', [..., 'ngMaterial', ...])

然后，您可以在 Controller 中注入(inject) Angular Material 成分，例如$mdToast。

关于javascript - 尝试包含ngMaterial $ mdToast，$ animate时，Angular Material “[$injector:unpr] Unknown provider”错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33585899/