Forum Discussion

MikeAinOz's avatar
MikeAinOz
Helper V
7 years ago
Solved

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

  • v-viig's avatar
    v-viig
    7 years ago

    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

    [email protected]

9 Replies

    • MikeAinOz's avatar
      MikeAinOz
      Helper 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-viig's avatar
        v-viig
        Community 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

        [email protected]