标签: angularjs-injector

我对角度相当新,并将其与JSON api文件一起使用.为了测试,我正在尝试使用免费的github api(我的函数名称是针对不同的json api,我将在稍后使用).我只是想看看我的功能是否正常console.log(),但我在控制台中收到此错误.

未捕获错误:[$ injector:modulerr]由于以下原因无法实例化模块MesaViewer:错误:[$ injector:nomod]模块'MesaViewer'不可用!您要么错误拼写了模块名称,要么忘记加载它.如果注册模块,请确保将依赖项指定为第二个参数.

我MesaViewer在两者中拼写完全相同,并且在第二行中看到了依赖关系!

var app = angular.module("MesaViewer");
var MainController = function($scope, $location, $http, $routeParams) {

我做错了什么？这是我的插件:http: //plnkr.co/edit/sZPaFbzbOB6AmVCLL1vq

这是我的Angular代码中的普通ES5函数,它可以工作:

app.run(function($templateCache){ $templateCache.put('/some','thing') });

我想将它转换为ES6箭头功能

app.run($templateCache => $templateCache.put('/some','thing'));

但它给出了错误

Uncaught Error: [$injector:unpr] Unknown provider: '/some'Provider <- '/some'
http://errors.angularjs.org/1.4.6/$injector/unpr?p0='%2Fsome'Provider%20%3C-%20'%2Fsome'
REGEX_STRING_REGEXP  @ angular.js:68
(anonymous function) @ angular.js:4287
getService           @ angular.js:4435
(anonymous function) @ angular.js:4292
getService           @ angular.js:4435
invoke               @ angular.js:4467
(anonymous function) @ angular.js:4297
forEach              @ angular.js:336
createInjector       @ angular.js:4297
doBootstrap          @ angular.js:1657
bootstrap            @ angular.js:1678
angularInit          @ angular.js:1572
(anonymous function) @ angular.js:28821
trigger              @ angular.js:3022
eventHandler         @ angular.js:3296

ES6箭头功能是否与Angular不兼容？

编辑:我想也许Angular无法推断名称$templateCache,因此无法注入它,但后来我将其记录到控制台,它确实显示正确:

app.run($templateCache=>console.log($templateCache));
// => 
//  Object {}
//      destroy: function() …

您好我正在尝试手动引导角度应用程序,但有一些业务需要首先处理.该文章中提到我感兴趣的技术.

当我注入这个:

 var $injector = angular.injector(["ng"]);
 var $http = $injector.get("$http");

它工作正常,但这:

var $injector= angular.injector(["ng", "myApp"]);
var $location = $injector.get("$location");

引发以下错误.

Uncaught Error: [$injector:unpr] Unknown provider: $rootElementProvider <- $rootElement <- $location <- $location

是否有可能在angular.bootstrap之前获得$ location？

万分感谢!

我有2页(我不使用angular's routing- 这个约束).

在其中一个中我想使用ui-grid该演示中的指令:

var app = angular.module('myApp', ['ui.grid']);
app.controller('mainCtrl', function($scope) {
  $scope.myData = [
    {
        "firstName": "Cox",
        "lastName": "Carney",
        "company": "Enormo",
        "employed": true
    },
    {
        "firstName": "Lorraine",
        "lastName": "Wise",
        "company": "Comveyer",
        "employed": false
    },
    {
        "firstName": "Nancy",
        "lastName": "Waters",
        "company": "Fuelton",
        "employed": false
    }
  ];
});

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">

<div ng-app="myApp">
  <div ng-controller="mainCtrl">
    <div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
  </div>
</div>

我的问题是,如果有办法ui-grid在任何情况下都不向应用程序注入依赖项,但仅在我需要它时.

就像是:

app.controller('mainCtrl', function($scope) { …

我有一个使用Angular Google Maps来显示位置的应用程序.一开始我能够显示地图,但是一段时间(可能是我修改了一些东西)我收到以下错误:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[NgZone]: 
StaticInjectorError[NgZone]: 
NullInjectorError: No provider for NgZone!
at _NullInjector.get (core.js:923)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveNgModuleDep (core.js:10585)
at NgModuleRef_.get (core.js:11806)
at resolveDep (core.js:12302)
at _NullInjector.get (core.js:923)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveNgModuleDep (core.js:10585)
at NgModuleRef_.get (core.js:11806)
at resolveDep (core.js:12302)
at resolvePromise (zone.js:824)
at …

我还在学习AngularJS,并对他们的依赖注入风格有疑问.例如,假设我有一个DataProcessor服务,它有一个processData接受uri参数的方法,它需要读取该数据(可能是xml,json等),然后对它执行一些操作.该DataProcessor构造函数接受一个的实现DataReader,它知道如何读取某个文件类型的接口.以下是我所说的一些示例服务:

// implementations of the DataReader interface
myApp.service('XmlDataReader', function() {
    this.readData = function(uri) {
        // read xml data from uri
    }
}]);

myApp.service('JsonDataReader', function() {
    this.readData = function(uri) {
        // read json data from uri
    }
}]);

// data processing service that takes in an implementation of a DataReader
myApp.service('DataProcessor', ['DataReader', function(DataReader) {

    this.processData = function(uri) {
        var readData = DataReader.readData(uri);

        // process data and return it
    }
}]);

从典型的依赖注入角度来看, …

今天我发现,$injector注入配置或提供商不同于$injector注入服务,工厂或控制器.

而get()从这个$喷射功能的工作方式不同.

$injector从配置或提供商,不能get()任何服务!$injector.get('myService')抛出Error: [$injector:unpr] Unknown provider: myService,但$injector.has('myService')返回真实.这非常奇怪.

$injector 从服务或控制器正常工作.

以下是一个代码示例,以便更好地理解:

angular.module('app', [])

        .provider('myProvider', function ($injector) {
            this.$get = ['$injector', function (serviceInjector) {
                return {
                    providerInjector: $injector,
                    serviceInjector: serviceInjector
                };
            }];
        })

        .service('myService', function () {})

        .controller('myCtrl', function ($scope, myProvider) {
            var providerInjector = myProvider.providerInjector;
            var serviceInjector = myProvider.serviceInjector;

            console.log(providerInjector === serviceInjector); // -> false

            console.log(serviceInjector.has('myService')); // `serviceInjector` has `myService`
            console.log(getMyService(serviceInjector)); // `serviceInjector` can get `myService` …

我试图在app bootstrap之后加载并注入一个模块.例如,假设我的初始模块是:

angular.module('mainApp', []);

后来我意识到用户需要所有可用的路由secondaryApp来打开它们.所以现在我需要我的模块看起来像这样:

angular.module('mainApp', ['secondaryApp']);

我成功地lazyLoading secondaryApp js文件,但我无法将其添加到mainApp.我已经尝试将它添加到requires数组,即

var app = angular.module('mainApp');
app.requires[app.requires.length] = 'secondaryApp';

这会将模块名称添加到requires数组,但mainApp仍然无法访问提供的路由/状态secondaryApp.

有没有人有什么建议？我已经被困在这一段了一段时间了.

谢谢!

我正试图从AngularJS调用WebAPI.这是一个简单的GET请求,我在服务器上启用了CORS.

我收到$ injector:unpr未知提供程序错误.

我有一个名为raterModule.js的角度模块:

var raterModule = angular.module('rater', []);

一个名为corsService.js的服务,它使用了enable-cors.org中的代码段:

raterModule.factory("corsService",
function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    // Check if the XMLHttpRequest object has a "withCredentials" property.
    // "withCredentials" only exists on XMLHTTPRequest2 objects.
    if ("withCredentials" in xhr) {
        xhr.withCredentials = true;
        xhr.open(method, url, true);
    }
    // Otherwise, check if XDomainRequest. XDomainRequest only exists in IE, and is IE's way of making CORS requests.
    else if (typeof XDomainRequest != …

根据Angular文档,我们只能在配置块中注入Providers(而不是实例). https://docs.angularjs.org/guide/module#module-loading-dependencies

但与此相反,Angular允许您注入$provide或$inject尽管它们是单例服务实例.

https://docs.angularjs.org/api/auto/service/$provide