I am writing my first Electron/Angular/RequireJS single page desktop app. I started with the electron-boilerplate and it works great. However, I need to add AngularJs to the equation--the boiler plate already uses RequireJS. I've tried a number of solutions but I either get errors, or dependencies not being executed. So I tried to implement the simple example from a previous stack overflow question, "Simple requireJS with angularJS - angular is not defined". However, what I see is that the files are being parsed, but it never executes the code inside. It's almost like one or more of the dependencies are not met so they do not execute. My files are as follows--I have added some logging so I can easily see the execution path.
app.html -- The starting point that includes RequireJS.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Electron Boilerplate</title>
</head>
<body ng-app="ReqApp" ng-controller="GreetCtrl">
<h1>{{greeting}}!</h1>
<script data-main="require_config" src="vendor/require.js"></script>
</body>
</html>
require_config.js -- This contains the RequireJS configuration.
console.log("REQUIRE_CONFIG.JS-------------"+requirejs.version);
requirejs.config({
// alias libraries paths
paths: {
'domReady': './vendor/requirejs-domready',
'angular': './node_modules/angular/angular',
'GreetCtrl': './js/GreetCtrl',
'app': './js/app'
},
// angular does not support AMD out of the box, put it in a shim
shim: { 'angular': { exports: 'angular' }
},
// kick start application
deps: ['./bootstrap']
});
bootstrap.js -- File from the RequireJS deps to manually bootstrap AngularJS.
console.log("BOOTSTRAP.JS1-------------");
define([
'require',
'angular',
'app'
], function (require, ng, app) {
'use strict';
console.log("BOOTSTRAP.JS2+++++++++++++");
require(['domReady!'], function (document) {
console.log("BOOTSTRAP.JS+++++++++++++");
ng.bootstrap(document, ['ReqApp']);
});
});
./js/app.js -- This initializes the AngularJS module for the application.
console.log("APP.JS-------------"+requirejs.version);
define([
'angular',
'GreetCtrl'
], function (ng) {
'use strict';
console.log("APP.JS+++++++++++++");
return ng.module('ReqApp', [ 'ReqApp.GreetCtrl' ]);
});
./js/GreetCtrl.js
console.log("GREETCTRL.JS1-------------");
define(['angular'], function(angular) {
console.log("GREETCTRL.JS1+++++++++++++");
angular.module( 'ReqApp.GreetCtrl', [])
.controller( 'GreetCtrl', function GreetCtrl ($scope) {
$scope.greeting = "Hello World";
});
});
The console output from running this example is:
[16982:0917/115914:ERROR:browser_main_loop.cc(173)] Running without the SUID sandbox! See https://code.google.com/p/chromium/wiki/LinuxSUIDSandboxDevelopment for more information on developing with the sandbox on.
[17010:0917/115915:INFO:renderer_main.cc(200)] Renderer process started
[17014:0917/115915:INFO:renderer_main.cc(200)] Renderer process started
[16982:0917/115915:ERROR:browser_gpu_channel_host_factory.cc(146)] Failed to create channel.
[16982:0917/115915:INFO:CONSOLE(43)] "REQUIRE_CONFIG.JS-------------2.1.20", source: file:///home/swdev/projects/build/require_config.js (43)
[16982:0917/115915:INFO:CONSOLE(8)] "BOOTSTRAP.JS1-------------", source: file:///home/swdev/projects/build/bootstrap.js (8)
The pages output is:
{{greeting}}!
As you can see from the output it seems that only the require_config.js and bootstrap.js files are parsed but the code within the define is not executed. My questions are:
- Why is the bootstrap.js function never called?
- Why are the app.js and GreetCtrl.js files not even parsed?
- Since Electron uses node I have to use
requirejs, do I need to remove my use ofrequirefrom bootstrap.js and replace it withrequirejsas well? NOTE: I have tested changing this but it did nothing for my problem. - I did notice that the stack overflow example that I followed defines
ng-app="ReqApp"within the HTML body definition. My limited understanding is that this should be removed since we are manually bootstrapping AngularJS. What is the correct approach for my use case (Election(node)/RequireJS/AngularJS? NOTE: I have tested by removing the definition from the body definition and it did nothing for my problem.
I have spent a few days attempting to solve this problem, so any help would be much appreciated!
Additional Attempts: Played some more to simplify part of the problem. I can't seem to get RequireJS to execute or parse some dependencies. My simplification is:
./app.js
<!doctype html>
<html>
<head>
<title>Electron Boilerplate</title>
</head>
<body >
<script data-main="require_config" src="vendor/require.js"></script>
<h1>Hello World!</h1>
</body>
</html>
./require_config.js
console.log("REQUIRE_CONFIG.JS-------------"+requirejs.version);
requirejs.config({
paths: {
'app': './js/app'
},
// kick start application
deps: ['./bootstrap']
});
./bootstrap.js
console.log("BOOTSTRAP.JS1-------------");
define( ['app'], function (app) {
'use strict';
console.log("BOOTSTRAP.JS2+++++++++++++");
});
./js/app.js
console.log("APP.JS-------------");
define([], function () {
'use strict';
console.log("APP.JS+++++++++++++");
});
The resulting output is still the same as my original output above. boostrap.js and require_config.js are processed. The bootstrap.js define/function is never called and app.js is never parsed.
