UI with template-node and Angular

Hi I am looking for examples to understand what is possible with the ui template dashboard node in combination with angular and or angularjs.

Is this ui template node supporting only AngularJS or also the newer versions of Angular?

For example below code with and without script in the head does not work, why not? Any examples available? Thx!

`<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});

</script>

</html>`
1 Like

the dashboard is built on the old (now unsupported) Angular v1 library only.

Thanks, and does it support the controller and module as in the example? I tested that example but it does not work with node-red, only in the browser when it is in a html page.
I found a simple tutorial on AngularJS Tutorial for beginners but only the examples without module and controller seem to work. Are there limitations? Thx.

The dashboard itself has the controller so no you don't :slight_smile:

And is this one node-red-contrib-uibuilder (node) - Node-RED suitable for the old and/or new Angular framework with the option to use modules and controllers?

It is suitable for either Oliver. You can use any framework with uibuilder. And, yes, you get full access to the framework.

uibuilder simply acts as a helper to deliver front-end packages and to facilitate communications to/from Node-RED.

We don't have any examples for Angular and uibuilder I'm afraid but would welcome contributions :slight_smile:

You can also create your own templates which reside in your own GitHub repository. That can be really helpful if you need to be able to create multiple sites from the base design.

Ok sounds good :slight_smile: we will try to find examples and test it....

Feel free to reach out. I don't use Angular myself but always happy to help if I can.

Thanks, I will try it, if stuck will ask help again ..

Hi again , .. do you know what is the difference between $scope and scope?
In the tutorials I studied this weekend they talk about $scope and $rootScope in AngularJS, but below in an example of https://groups.google.com/g/node-red/c/y0wuiRGJHkM Julian talks about scope. Thx

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>

Hi, scope.$id below, what is $id? The id of the node in the flow sending the message or something else? Thx.

<script>
(function(scope) {
    let min = 0;
    let max = 100;
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
        const v = Math.floor(((msg.payload - min) / (max - min)) * 100);
        document.getElementById('gauge_'+scope.$id).style.setProperty('--gauge-value', v);
        document.getElementById('gauge_val_'+scope.$id).innerText = v;
    }
   
  });
})(scope);
</script>

Sorry, I've not used Angular for a long time. Just note that Dashboard uses Angular v1 so if you are checking online tutorials make sure they relate to that version.

yes I watched the v1 tutorials.

I not understand where the $id = 92 comes from and why we use scope and not $scope in node-red.

Hi Do you know why I have to use scope instead of $scope in node-red?

Is scope the same as $scope?

Do you know why the $id is 92?  

Thx!

It is not the same. I already explain that in the original post.

$scope is hidden by the way that Dashboard was constructed. scope is a passed argument.

Your images are too small to see properly. Please post code as pre-formatted text.

[quote="oliver, post:14, topic:71432"]
Is scope the same as $scope?
[/quote]

It is not the same. I already explain that in the original post.
Where did you explain what the difference is between scope and $scope exactly? I can not find that. Thx

I didn't explain the difference because I can't remember exactly. I explained that there IS a difference.

I published Node-RED Dashboard Template Examples (AngularJS) | Much Ado About IT (knightnet.org.uk) at the start of 2018 but I was already working on uibuilder and running down any use of Dashboard and Angular at that point.

As always, an Internet search shows the way: Angularjs: $scope vs scope - Stack Overflow

You have not included the HTML part of this example. Somewhere there you will find a line like;

<button id =  "{{'button' + $id}}"
>{{btnText}}</button>

When you inspect the item on a page with the Dev Tools in your browser you will see that this has been transposed to something like id="button1800"

$id is an Angular instruction to the browser to use an auto generated number so that the id is unique. It will also not always be the same number. So for example if you reloaded the page the $id as you have shown may be a different number, hence why it is referred to in the as 'gauge_'+ scope.$id (the browser knows what number to refer to.) I think it is associated with the scope but so far a Google search on the subject has turned up nothing. In reality if you have a lot of id's to create you are better of generating your own unique id.

The body of the Dashboard page starts with

<body id="nr-dashboard" ng-app="ui" ng-controller="MainController as main" layout="column" style="background: " class="nr-dashboard-theme layout-column" ng-swipe-right="onSwipeRight();" ng-swipe-left="onSwipeLeft();" ng-attr-ng-swipe-disable-mouse="{{main.allowSwipe !== 'mouse' ? '' : undefined}}" ng-swipe-disable-mouse="">

which explains why you do not need ng-app or ng-controller, they have already been defined.

Thank you for your help! Very useful and interesting information that helps to understand all!!!

In the last post with an image I just used an inject node to inject the timestamp without any html.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.