Geek Answers Handbook

R brilliant work of AngularJS

I am creating a panel with R and D3 working with a library (brilliant).

This works great, and now I want to turn D3 code into modular objects, which will save me a lot of coding and make it suitable for others to use. My idea is:

<r-d3-gauge id="G1" data="[1,2,3]"></r-d3-gauge> <r-d3-gauge id="G2" data="[4,5,6]"></r-d3-gauge>

And I have two sensors that I can position with CSS or just paste them into shiny ones with HTML (....). Well, that should be simple using AngularJS.

But I can't get AngularJS to work in R brilliant. I did this test code: (www folder with d3.js and angular.min.1.4.3.js next to server.r / ui.r)

ui.r

 library(shiny) shinyUI(fluidPage( tags$head(tags$script(src = "d3.js")) ,tags$head(tags$script(src = "angular.min.1.4.3.js")) ,htmlOutput("JS") ,htmlOutput("HTML") ))

server.r

 library(shiny) shinyServer(function(input, output) { # HTML output$HTML <- renderUI({ html <- '' html <- paste0(html,' <p>Input something in the input box:</p> <h4>Name: <input type="text" ng-model="name"></h4> <h4 ng-bind="name"></h4> <h4>Name: <input type="text" ng-model="name2"></h4> <h4>You wrote: {{name2}}</h4> ') HTML(html) }) # JS output$JS <- renderUI({ html <- "<script language='JavaScript'>" html <- paste0(html,' if(typeof angular == "undefined") { console.log("angular == undefined"); } else { console.log("angular == defined"); console.log(angular.version.full) } if (window.jQuery) { console.log("jQuery == defined"); console.log(jQuery.fn.jquery); } else { console.log("jQuery == undefined"); } d3.select("body") .attr("ng-app","") $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script>') HTML(html) }) })

This creates a brilliant html code application that is great, the test shows that

 angular == defined 1.4.3 jQuery == defined 2.1.4

So there are no problems. jQuery works fine (you can click "Enter something in the input field:" and it is hidden), but if I enter text, it will not appear. If I try something like:

 <p>Name: <input type="text" ng-model="name2"></p> <p>You wrote: {{ name2 }}</p>

it wil show You wrote: {{name2}} without a subset of the {{name2}} part.

+4
source share
1 answer

OK this works:

ui.r

 library(shiny) shinyUI(bootstrapPage(includeHTML("static.html")))

server.r

 library(shiny) shinyServer(function(input, output) {})

static.html

 <!DOCTYPE HTML> <html> <head> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script> </head> <body> <script language='JavaScript'> if(typeof angular == "undefined") { console.log("angular == undefined"); } else { console.log("angular == defined"); console.log(angular.version.full) } if (window.jQuery) { console.log("jQuery == defined"); console.log(jQuery.fn.jquery); } else { console.log("jQuery == undefined"); } d3.select("body").attr("ng-app","") </script> <p>Input something in the input box:</p> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> <h4>Name: <input type="text" ng-model="name2"></h4> <h4>You wrote: {{name2}}</h4> </body> </html>

Et voila, Up and Running !: ^)

+9
source

More articles:


All Articles