Just starting out with Foundation for Apps, I encountered an issue when trying to organize my angular controllers in a separate folder and use them.
In the js folder of my assets directory, I currently have this structure:
js/
app.js //contains all controllers by chaining
but what I want is:
js/
app.js
controllers/
home.controller.js
main.controller.js
Instead of having one large js file with chained controllers and services, I prefer a more modular structure as described above.
After switching to the modular structure, I encountered three errors:
1. 'HomeCtrl' not defined.
2. Uncaught SyntaxError: Unexpected token < at the 1st line of home.controller.js
3. Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8079/assets/js/home.controller.js". when including 'home.controller.js' in index.html
Here's my template:
---
name: home
url: /
controller: HomeCtrl
---
<div class="grid-container">
<h1>Welcome to Foundation for Apps!</h1>
<p class="lead">This is version <strong>1.1 Weisshorn</strong>.</p>
</div>
home.controller.js:
app.controller('HomeCtrl', ['$scope', function($scope) {
$scope.temp = 'hello';
}]);
app.js:
var app = angular.module('application', [
'ui.router',
'ngAnimate',
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations'
])
.config(config)
.run(run)
;
config.$inject = ['$urlRouterProvider', '$locationProvider'];
function config($urlProvider, $locationProvider) {
$urlProvider.otherwise('/');
$locationProvider.html5Mode({
enabled:false,
requireBase: false
});
}
function run() {
FastClick.attach(document.body);
}
To resolve this issue, I attempted adding the controller reference in gulpfile.js following this guide.
I also looked into this resource but still cannot get it to work. Any insights on what I might be missing?