Forum Discussion
Using AngularJS in Custom Visual
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
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
9 Replies
- MikeAinOzHelper V
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 :-) )
- v-viigCommunity Champion
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