Example of using Angular with Node-red

4661 views
Skip to first unread message

Paul Dreslinski

unread,
Jan 18, 2017, 5:39:39 PM1/18/17
to Node-RED
Does anyone have an example web site where they developed a single page app using Angular and controllers?  I've been trying everything but is not working as I expect it to because of the mustache templates I suppose.  Any examples of using multiple controllers would be great.

Thanks in advance.

Julian Knight

unread,
Jan 21, 2017, 12:09:02 PM1/21/17
to Node-RED
If you want to use a Node-Red template to feed into a Dashboard template, you need, as you suggest, to change the Angular delimiters from the default to something else.

Here is an example from a previous discussion, you can put this in a Node-Red template and pass the output to a Dashboard Template.:

<!DOCTYPE html>

<html ng-app="ngApp">

<head>

</head>

<body ng-controller="ngCtrl">

   

    <h1>Topic: {[{topic}]}</h1>

    <pre>

{[{payload | json }]}

    </pre>

 

 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>

    <script>

        var ngApp = angular.module('ngApp', []);

       

        ngApp.config(function($interpolateProvider) {

            $interpolateProvider.startSymbol('{[{');

            $interpolateProvider.endSymbol('}]}');

        });

       

        ngApp.controller('ngCtrl', ['$scope', function($scope) {

            // Need to wrap with TRY in case not valid JSON

            $scope.payload = JSON.parse(decodeEntities('{{payload}}'));

            $scope.topic = '{{topic}}';

        }]);

       

        function decodeEntities(encodedString) {

            var textArea = document.createElement('textarea');

            textArea.innerHTML = encodedString;

            return textArea.value;

        }

    </script>

</body>

</html>


Look for the interpolate part.

Also note that, in a Dashboard template, you don't get access to Angular's $scope object. You have to make use of $watch instead.

Nasser Gonzalez Gonzalez

unread,
Jan 28, 2017, 9:47:15 AM1/28/17
to Node-RED
Hi Julian and everybody, sorry for jumping in the conversation but I have been looking some information about the use of Dashboard template, to be able to create some kind of widget for myself, and I think that i'm not getting the idea of the use of the Dashboard template. Also, seems that my almost null knowledge of angularjs does not help neither. I'm trying to learn a bit of angularjs at the same time but I don't know how to match the things that I'm learning. I was trying to extrapolate from the example that you gave in the previous post but I failed miserably.

So, I would like to ask a few questions and probably the questions are a bit dummy, sorry for that.

According to the documentation we can have any angular angular material directive there, and make our own widget. So I looked for a very simple example, and try to reproduce the same code using the dashboard template. The example is This example

What I tried: 

- First, copy paste the code in the template. Just that. The code works in a normal html but not in the template. In the DT (DT for DashboardTemplate) I have an error in the web browser console saying that the switchController is not registered. So I checked the previous comment and try to use the same approach. All the code in a Template and from there to a DT. I can see the text, but nothing else.

- Second: I tried to move the code around, separate the headers, the js and the body, nothing seemed to work neither. I though that maybe was because I was using the $scope and I needed to use $watch, so I just changed that but the result was the same. 

So, i'm now stuck. I just don't know how to proceed. I was wondering, if someone could provide me a working example of the example that i linked (or any other example that use angular material components and javascript) So i could have a base example to be able to interpolate and have and idea of what I should be doing.


Regards,

Nasser Gonzalez

Julian Knight

unread,
Jan 28, 2017, 12:19:14 PM1/28/17
to Node-RED
Not dummy at all! What you need to understand is that Dashboard is wrapped around Angular in such a way that you don't get access to everything in Anglular.

So there are some gotcha's. The main one being that you don't get full access to $scope. Also you cannot create your own app/controller.

Here is a quick example that works in a Dashboard Template node that may help to illustrate things:

<div ng-bind-html="msg.payload"></div>

<script>
//console.dir(scope) // this works
//console.dir(scope.msg) // This doesn't because scope.msg doesn't yet exist

// Lambda function to access the Angular Scope
;(function(scope) {
   
//console.log('--- SCOPE ---')
   
//console.dir(scope) // this works but you only get it once (on startup)
   
//console.dir(scope.msg) // Doesn't work for  because scope.msg doesn't yet exist

   
//Have to use $watch - as we can't directly access $scope - so we pick up new, incoming msg's
    scope
.$watch('msg.payload', function(newVal, oldVal) {
        console
.log('- Scope.msg -')
        console
.dir(scope.msg)
   
})

})(scope)

</script>


In addition, I think some tweaks have been made to Angular Material to make it fit in the Dashboard layout. So some visuals might not be quite the same.


It is just my opinion but I feel that, while Dashboard is really helpful to get quick output to web, eventually you run into so many walls and issues, you are better off hand-crafting your own pages. This is fairly easily done with the httpin/out nodes. 


The great thing that Dashboard gives you (other than the pre-canned UI widgets) is an automatic websocket for 2-way communications with Node-RED. Doing your own thing means that you have to build a websocket connection for each web page. 


It would be really nice if the http nodes could be extended to be able to automatically create a matching websocket. I've been thinking about creating something but I don't have the time to do it justice right now. That would give something in-between the simplicity of the normal http in/out nodes and the hand-holding Dashboard nodes.

Nasser Gonzalez Gonzalez

unread,
Jan 28, 2017, 12:43:16 PM1/28/17
to Node-RED
Thank you a lot, and thanks for the example, It helped me to understand a bit more the problem that I was having. I think that I am going to rethink what I wanted to do vs what i can do with Dashboard and play a bit more with angular before try a httpin/out template with angular. As you said, losing the sockets will be an inconvenience, but...A man can dream :).

Again, thanks a lot for your quick answer, I'm going to take a step back and check a few other post to learn a bit more before jumping to the code again.

Have a nice day.


On Wednesday, 18 January 2017 22:39:39 UTC, Paul Dreslinski wrote:

Dave C-J

unread,
Jan 28, 2017, 1:18:21 PM1/28/17
to node...@googlegroups.com

The websocket nodes can also be used for your own pages. 

Julian Knight

unread,
Jan 28, 2017, 5:33:11 PM1/28/17
to Node-RED
Sorry, I should have said that. What I mean of course was that you don't automatically get a websocket with an http in/out though that would be a nice option as it would give people the option of having the integrated socket (being able to pass the msg to/from the front-end web page) but be able to create their own front-ends without the necessary cruft that comes with the Dashboard.

Don't get me wrong, the Dashboard is great, especially to be able to quickly build a UI, but it isn't for everything.
Reply all
Reply to author
Forward
0 new messages