topic Re: Using AngularJS in Custom Visual in Custom Visuals Development Discussion

Using AngularJS in Custom Visual

MikeAinOz — Wed, 26 Sep 2018 04:52:21 GMT

I'm trying out AngularJS in a custom visual. I've got the AngularJS modules library in and building and not I'm trying to build a test app.

I've created some html in the constructor:

                const ang_app: HTMLElement = document.createElement("div");
                ang_app.setAttribute('ng-app',"myapp");
                ang_app.setAttribute('ng-controller',"tableController");
                const ang_tr: HTMLElement = document.createElement("tr");
                ang_tr.setAttribute('ng-repeat',"row in dataSet");
                ang_app.appendChild(ang_tr);
                const ang_td: HTMLElement = document.createElement("td");
                ang_td.appendChild(document.createTextNode("{{row[0]}}"));
                ang_app.appendChild(ang_td);
                this.target.appendChild(ang_app);

and checked the resulting HTML, which looks OK:

<div ng-app="myapp" ng-controller="tableController">
<tr ng-repeat="row in dataSet"></tr><td>{{row[0]}}</td></div>

I'm using angular in the Update method like this:

           var app = ng.module("myapp",[]);
            app.controller("tableController", ['$scope', function ($scope) {
                $scope.dataSet = options.dataViews[0];
            }],
            );

So it looks fairly close, but I'm obviously missing something. Does any one have a suggestion or is there sample code I can look at?

I'm getting this error:

SCRIPT5022: SCRIPT5022: [$injector:modulerr] Failed to instantiate module myapp due to: Error: [$injector:nomod] Module 'myapp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. https://errors.angularjs.org/1.7.4/$injector/modulerr?p0=myapp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'myapp'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttps%3A%2F%2Ferrors.angularjs.org%2F1.7.4%2F%24injector%2Fnomod%3Fp0%3Dmyapp%0A%20%20%20at%20Anonymous%20function%20(Unknown%20script%20code%3A2806%3A11)%0A%20%20%20at%20ensure%20(Unknown%20script%20code%3A2727%3A5)%0A%20%20%20at%20module%20(Unknown%20script%20code%3A2804%3A7)%0A%20%20%20at%20Anonymous%20function%20(Unknown%20script%20code%3A5533%3A11)%0A%20%20%20at%20forEach%20(Unknown%20script%20cod

Re: Using AngularJS in Custom Visual

v-viig — Wed, 26 Sep 2018 06:31:50 GMT

Have not tried Angular but we have small sample for React.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Using AngularJS in Custom Visual

MikeAinOz — Thu, 27 Sep 2018 03:23:24 GMT

Hey Ignat thanks for that, it's an interesting alternative, I'll let you know how it works out (you might get another question for react 🙂 )

Re: Using AngularJS in Custom Visual

v-viig — Thu, 27 Sep 2018 07:08:47 GMT

Happy to help.

Current samplkes does not look good since it does not use modern ES2015 features such as modules but we're working on webpack based pbiviz to bring new features to developers.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Using AngularJS in Custom Visual

MikeAinOz — Fri, 28 Sep 2018 00:12:30 GMT

Ignat, I can't figure out how to get the dataView into the React Component.

I'm doing this is in Update:

ReactDOM.render(React.createElement(App, options), this.element);

but what do I do in the App.tsx? I've managed to pass a test string, but how to pass the VisualUpdateOptions object?

Having had a play with React, it looks like a good way to create Custom Visuals

Re: Using AngularJS in Custom Visual

v-viig — Fri, 28 Sep 2018 07:23:04 GMT

Your code above is almost correct. You can also learn how to pass props in React Doc.

ReactDOM.render(React.createElement(App, {options}), this.element);

You should also add options as props into App.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Using AngularJS in Custom Visual

MikeAinOz — Mon, 01 Oct 2018 05:54:20 GMT

I'm having some trouble getting that working. I've run out of time to work on it, but I was thinking of getting a programmer to get the example working for me. Is it worth doing that or will there be something else coming along?

Re: Using AngularJS in Custom Visual

v-viig — Mon, 01 Oct 2018 07:20:17 GMT

We have not plans to implement Angular/React sample for Power BI but it's on our backlog (no ETA).

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Using AngularJS in Custom Visual

MikeAinOz — Wed, 10 Oct 2018 00:04:54 GMT

I found using Chrome to debug I culd see inside the object more easily using console.log. The props were being passed just fine, it was a user problem 😞

Re: Using AngularJS in Custom Visual

v-viig — Thu, 11 Oct 2018 07:40:49 GMT

Awesome.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com