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.
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.
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>
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.
[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
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.
