Newbie question about angular and node-red
629 views
Skip to first unread message
Paul Dreslinski
Jan 17, 2017, 3:07:07 PM1/17/17
to Node-RED
Please be gentle since I'm fairly new to angular being used with node-red. I'm taking a working example if I just server it on another web server but I'm not sure why I'm having this problem. Any help is greatly appreciated.
I've got the following HTML:
<!DOCTYPE html>
<html ng-app=app>
<head>
<title>The Application</title>
<meta charset=utf-8>
<script src="http://{{req.headers.host}}/js/angular.min.js"></script>
<script src="http://{{req.headers.host}}/js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-app="appOne">
<h1>Multiple apps on the same page</h1>
<div id="one" ng-controller="controllerOne">
<div>
<p>{{text}}</p>
</div>
</div>
<div id="two">
<div ng-view></div>
</div>
<div id="three" ng-controller="controllerThree">
<div>
<p>{{text}}</p>
<fishandchips></fishandchips>
<d data-fishandchips=""></d>
</div>
</div>
</body>
</html>
and I have the following app.js:
/**
* Create the app
*/
var appOne = angular.module('appOne', ['ngRoute']);
/**
* Configure routing - so controllerTwo runs
*/
appOne.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
template: '<p>{{text}}</p>',
controller: 'controllerTwo'
}).
otherwise({
redirectTo: '/'
});
}]);
/**
* Controllers
*/
appOne.controller('controllerOne', function($scope) {
$scope.text = '1';
});
appOne.controller('controllerTwo', function($scope) {
$scope.text = '22';
});
appOne.controller('controllerThree', function($scope) {
$scope.text = '333';
});
/**
* Directives
*/
appOne.directive('fishandchips', function() {
return {
restrict: 'AE',
template: 'Fish and <chips></chips> - Yamm'
};
});
appOne.directive('chips', function() {
return {
restrict: 'AE',
template: 'chips!'
};
});
Here is my flow:
[{"id":"29bd8c67.6e9464","type":"http in","z":"4ba1fb80.ec60a4","name":"","url":"/testme","method":"get","swaggerDoc":"","x":289,"y":155,"wires":[["e4aaf9f1.7e98a8"]]},{"id":"e4aaf9f1.7e98a8","type":"template","z":"4ba1fb80.ec60a4","name":"","field":"payload","fieldType":"msg","format":"handlebars","template":"<!DOCTYPE html>\n<html ng-app=app>\n <head>\n <title>The Application</title>\n<meta charset=utf-8>\n <script src=\"http://{{req.headers.host}}/js/angular.min.js\"></script>\n <script src=\"http://{{req.headers.host}}/js/angular-route.min.js\"></script>\n <script type=\"text/javascript\" src=\"app.js\"></script>\n </head>\n <body ng-app=\"appOne\">\n <h1>Multiple apps on the same page</h1>\n <div id=\"one\" ng-controller=\"controllerOne\">\n <div>\n <p>{{text}}</p>\n </div>\n </div>\n <div id=\"two\">\n <div ng-view></div>\n </div>\n <div id=\"three\" ng-controller=\"controllerThree\">\n <div>\n <p>{{text}}</p>\n <fishandchips></fishandchips>\n <d data-fishandchips=\"\"></d>\n </div>\n </div>\n </body>\n</html>","x":461,"y":140,"wires":[["b30cc9f2.4fe208"]]},{"id":"b30cc9f2.4fe208","type":"http response","z":"4ba1fb80.ec60a4","name":"","x":619,"y":218,"wires":[]}]
I keep getting an inject error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=app&p1=Error%3A%20%…20Bc%20(http%3A%2F%2F167.3.196.230%3A1880%2Fjs%2Fangular.min.js%3A21%3A179)
at angular.js:38
at angular.js:4640
at q (angular.js:321)
at g (angular.js:4601)
at cb (angular.js:4523)
at c (angular.js:1758)
at Bc (angular.js:1779)
at fe (angular.js:1664)
at angular.js:31763
at HTMLDocument.b (angular.js:3207)
(anonymous) @ angular.js:38
(anonymous) @ angular.js:4640
q @ angular.js:321
g @ angular.js:4601
cb @ angular.js:4523
c @ angular.js:1758
Bc @ angular.js:1779
fe @ angular.js:1664
(anonymous) @ angular.js:31763
b @ angular.js:3207
Sf @ angular.js:3497
d @ angular.js:3485
Anybody have any idea on what I'm doing wrong?
Librae
Jan 19, 2017, 2:34:41 AM1/19/17
to node...@googlegroups.com
Hi Paul,
If you take a look at node-red-dashboard source code, you should see that all stuff are sharing one controller.
So if you are defining controllers, they won't work.
BTW, I am new to angular, either, please correct me if the answer is not proper.
Librae
--
http://nodered.org
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/d290c044-b2c6-48bb-86bc-1d5d51c32c28%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Julian Knight
Jan 21, 2017, 12:10:55 PM1/21/17
to Node-RED
You are correct I think. You don't get access to the internals of Angular when using Dashboard. For example, you can't access $scope either and have to use $watch.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
Julian Knight
Jan 21, 2017, 12:14:14 PM1/21/17
to Node-RED
If you want full access to Angular, I'd possibly recommend doing it yourself with a simple HTTP in/out node set. Use Node-RED's static capability to serve up the Angular and other libraries.
The one thing you loose is the automatically created websocket which is really nice to have but you can do it yourself anyway. I've been trying to find some time to create a VueJS simplified output node as these kinds of issues seem to be very common (and Vue is a lot simpler to work with than Angular I think) - but there just aren't enough hours in the week.
Reply all
Reply to author
Forward
0 new messages