Using Electron and AngularJS to implement basic functionality. Currently adding a header and footer that will be displayed on every page. Here is the structure in app.js:
'use strict';
let app = angular.module('marks', ['ngRoute']);
app.controller('ctrl', ($scope) => {})
.config(($logProvider, $routeProvider) => {
$logProvider.debugEnabled(true);
$routeProvider
.when('/', {
templateUrl: 'html/home.html'
})
.when('/login', {
templateUrl: 'html/login.html'
})
.when('/teachers', {
templateUrl: 'html/teachers.html'
})
.when('/students', {
templateUrl: 'html/students.html'
})
.when('/404', {
templateUrl: 'html/404.html'
})
.otherwise({ redirectTo: '/404' });
});
footer.controller.js:
angular.module('marks').controller('MarksFooterController', ['$scope', ($scope) => {}]);
footer.directive.js:
angular.module('marks').directive('marksFooter', () => {
return {
restrict: 'EAC',
controller: 'MarksFooterController',
templateUrl: '../html/marks-footer.html'
};
});
marks-footer.html:
<div>
<h3>2017</h3>
</div>
Similar setup for the header.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="../../bower_components/angular/angular.js"></script>
<script src="../../bower_components/angular-resource/angular-resource.js"></script>
<script src="../../bower_components/angular-route/angular-route.js></script>
</head>
<body ng-app="marks">
<div class="tile is-ancestor is-12">
<div class="tile is-vertical is-parent is-9">
<ng-view></ng-view>
</div>
</div>
<script>
require('./app.js');
</script>
</body>
</html>
After running the app, the directives are empty despite receiving parameters. Troubleshooting revealed potential issues with controllers.
For more help, check out this answer. Any assistance is appreciated.
UPDATE
Progress has been made in loading templates, but the app cannot locate them. DevTools -> Sources shows no html folder (screenshot). How can I resolve this issue?
SOLVED
The solution involved:
- Importing all controllers and directives within the
<head>of index.html - Updating the templateUrl path relative to index.html
Exploring methods to minimize imports within .html files.