Angular 1.5 Component - dependency injection

Question

My goal was to use dependency injection of a constant value (the base URL) to use in defining the component's templateUrl property. Nothing so far has worked. The code below is in Typescript

Some explanation: app.core.Iconstants holds the baseUrl value. app.core.AngularGlobals.appCoreConstants is the string representing "app.core.Constants".

Mind you, I'm just cutting my teeth of Angular.

namespace donationEntry.Components{ "use strict";

class test1 implements ng.IComponentOptions {
    public static id: string = AngularGlobals.donationEntry + ".test1";
    bindings: any;
    controller: any;
    templateUrl: string;

    constructor(clientContext: app.core.IConstants) {
        this.bindings = {
            textBinding: '@',
            dataBinding: '<',
            functionBinding: '&'
        };
        this.controller = TestController;
        this.templateUrl = clientContext.baseUrl + "Areas/ng/app/fundraising/donationEntry/components/test1/test1.html";
    }
}

// register the controller with app
angular.module(AngularGlobals.donationEntry)
    .component("test1", [app.core.AngularGlobals.appCoreConstants, (c) => new test1(c)]);

}

When I run this, I end up with the following error:

angular.js:61 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:modulerr] Failed to instantiate module donationEntry due to: TypeError: t.charAt is not a function

Says you are calling charAt on an object that doesn't have charAt, but I don't see charAt anywhere in the snippet you provided, are you sure this is where the problem is? — ed'
– ed', Commented May 18, 2016 at 14:32
Having circumvented the problem, I never dug deeper, however it seems related to the shortcut injection syntax I used. — KM Tolan
– KM Tolan, Commented May 18, 2016 at 18:11

KM Tolan · Accepted Answer · 2016-05-18 14:58:55Z

This appears to work, though I wouldn't call it the most eloquent of answers. Again, written in Typescript:

namespace donationEntry.Components{ "use strict";

class test1 implements ng.IComponentOptions {
    public static id: string = AngularGlobals.donationEntry + ".test1";
    bindings: any;
    controller: any;
    templateUrl: string;


    constructor(clientContext: app.core.IConstants) {
        this.bindings = {
            textBinding: '@',
            dataBinding: '<',
            functionBinding: '&'
        };
        this.controller = TestController;
        this.templateUrl = clientContext.baseUrl + "Areas/ng/app/fundraising/donationEntry/components/test1/test1.html";
    }
}

// register the controller with app
var clientContext = <app.core.IConstants>angular.injector(['ng', app.core.AngularGlobals.appCore]).get(app.core.AngularGlobals.appCoreConstants);
angular.module(AngularGlobals.donationEntry)
    .component("test1", new test1(clientContext));

}

httpete · Accepted Answer · 2016-05-18 15:04:39Z

0

I try to stay away from Angular's injection or module mechanism whenever I can, preferring straight ES6.

You can do:

//clientContext.ts
export = { baseUrl: 'whateva' }

And then import like this:

import clientContext from './path/to/clientContext'

answered May 18, 2016 at 15:04

httpete

3,02330 silver badges35 bronze badges

1 Comment

KM Tolan Over a year ago

Thanks. That would be great, however even the client context path itself would be subject to needing a dynamic base literal (our clients would have a different one than us). Certainly understand your dislike for injection, heh.

Collectives™ on Stack Overflow

Angular 1.5 Component - dependency injection

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related