Example of using Angular with Node-red
Paul Dreslinski
Julian Knight
<!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>
Nasser Gonzalez Gonzalez
Julian Knight
<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
On Wednesday, 18 January 2017 22:39:39 UTC, Paul Dreslinski wrote:
