# UI with template-node and Angular

**URL:** <https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432>\
**Category:** Dashboard\
**Tags:** uibuilder\
**Created:** [29 November 2022 11:01 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432 "2022-11-29T11:01:09Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![oliver](https://avatars.discourse-cdn.com/v4/letter/o/85f322/32.png) [@oliver](https://discourse.nodered.org/u/oliver)\
**Post date:** [29 November 2022 11:01 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/1 "2022-11-29T11:01:09Z")

</div>

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!

```auto
`<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>`

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [29 November 2022 11:03 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/2 "2022-11-29T11:03:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![oliver](https://avatars.discourse-cdn.com/v4/letter/o/85f322/32.png) [@oliver](https://discourse.nodered.org/u/oliver)\
**Post date:** [29 November 2022 11:10 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/3 "2022-11-29T11:10:22Z")

</div>

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](https://www.w3schools.com/angular/) for beginners but only the examples without module and controller seem to work. Are there limitations? Thx.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [29 November 2022 11:13 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/4 "2022-11-29T11:13:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![oliver](https://avatars.discourse-cdn.com/v4/letter/o/85f322/32.png) [@oliver](https://discourse.nodered.org/u/oliver)\
**Post date:** [29 November 2022 11:24 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/5 "2022-11-29T11:24:58Z")

</div>

And is this one [node-red-contrib-uibuilder (node) - Node-RED](https://flows.nodered.org/node/node-red-contrib-uibuilder) suitable for the old and/or new Angular framework with the option to use modules and controllers?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [29 November 2022 11:52 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/6 "2022-11-29T11:52:40Z")

</div>

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 🙂

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.

---

<div class="post-metadata">

**Author:** ![oliver](https://avatars.discourse-cdn.com/v4/letter/o/85f322/32.png) [@oliver](https://discourse.nodered.org/u/oliver)\
**Post date:** [29 November 2022 12:46 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/7 "2022-11-29T12:46:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [29 November 2022 13:12 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/8 "2022-11-29T13:12:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![oliver](https://avatars.discourse-cdn.com/v4/letter/o/85f322/32.png) [@oliver](https://discourse.nodered.org/u/oliver)\
**Post date:** [29 November 2022 13:14 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/9 "2022-11-29T13:14:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![oliver](https://avatars.discourse-cdn.com/v4/letter/o/85f322/32.png) [@oliver](https://discourse.nodered.org/u/oliver)\
**Post date:** [4 December 2022 20:35 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/10 "2022-12-04T20:35:52Z")

</div>

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](https://groups.google.com/g/node-red/c/y0wuiRGJHkM) Julian talks about scope. Thx

```auto
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>

```

---

<div class="post-metadata">

**Author:** ![oliver](https://avatars.discourse-cdn.com/v4/letter/o/85f322/32.png) [@oliver](https://discourse.nodered.org/u/oliver)\
**Post date:** [4 December 2022 20:41 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/11 "2022-12-04T20:41:40Z")

</div>

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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [4 December 2022 21:03 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/12 "2022-12-04T21:03:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![oliver](https://avatars.discourse-cdn.com/v4/letter/o/85f322/32.png) [@oliver](https://discourse.nodered.org/u/oliver)\
**Post date:** [4 December 2022 23:08 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/13 "2022-12-04T23:08:19Z")

</div>

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.

 ![scope_and_id](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/2/a27c4767fbe746a4d32f3b853f0e2c6b982c0759.jpeg)

---

<div class="post-metadata">

**Author:** ![oliver](https://avatars.discourse-cdn.com/v4/letter/o/85f322/32.png) [@oliver](https://discourse.nodered.org/u/oliver)\
**Post date:** [4 December 2022 23:10 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/14 "2022-12-04T23:10:42Z")

</div>

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

```auto
Is scope the same as $scope?

Do you know why the $id is 92?  

```

Thx!

 ![scope_and_id](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/2/a27c4767fbe746a4d32f3b853f0e2c6b982c0759.jpeg)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 December 2022 01:02 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/15 "2022-12-05T01:02:42Z")

</div>

> [@oliver](#):
>
> `Is scope the same as $scope?`

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

> [@oliver](#):
>
> why I have to use scope instead of $scope in node-red

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

> [@oliver](#):
>
> `Do you know why the $id is 92? `

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

---

<div class="post-metadata">

**Author:** ![oliver](https://avatars.discourse-cdn.com/v4/letter/o/85f322/32.png) [@oliver](https://discourse.nodered.org/u/oliver)\
**Post date:** [5 December 2022 12:01 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/16 "2022-12-05T12:01:41Z")

</div>

> [@TotallyInformation](#):
>
> > [@oliver](#):
> >
> > `Is scope the same as $scope?`
> 
> It is not the same. I already explain that in the original post.

[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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 December 2022 16:05 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/17 "2022-12-05T16:05:26Z")

</div>

> [@oliver](#):
>
> difference

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)](https://it.knightnet.org.uk/kb/nr-qa/dashboard-template-examples/) 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](https://stackoverflow.com/questions/19288586/angularjs-scope-vs-scope)

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [5 December 2022 16:35 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/18 "2022-12-05T16:35:12Z")

</div>

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

```auto
<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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![oliver](https://avatars.discourse-cdn.com/v4/letter/o/85f322/32.png) [@oliver](https://discourse.nodered.org/u/oliver)\
**Post date:** [5 December 2022 21:42 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/19 "2022-12-05T21:42:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [3 February 2023 21:42 UTC](https://discourse.nodered.org/t/ui-with-template-node-and-angular/71432/20 "2023-02-03T21:42:38Z")

</div>

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