Foundation for apps: Creating separate files for angularjs controllers, services etc

Question

I just got started with Foundation for Apps, but I was having trouble adding my angular controllers in a separate folder and using them.

I have this current structure in my assets' js folder:

js/
   app.js //this has all the controllers etc. by chaining

but I want it to be

js/
   app.js
   controllers/
       home.controller.js
       main.controller.js

I don't want to keep a single large js file developed by chaining my controllers, services etc. I want a more modular structure as specified.

When I changed it to the modular structure, I got following 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". at the point where I am 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 solve this I tried adding my controller reference in gulpfile.js by referring this

I also referred this but I still cannot get it to work. Any idea what I am doing wrong?

Answer 1

Inside gulpfile.js check this line. You'll see that only client/assets/js/app.js is used when coupling your minimized file. You need to make it copy all your controller's .js files too :

// These files are for your app's JavaScript
appJS: [
    'client/assets/js/app.js',
    './client/assets/js/controllers/*.js',
]

You can also use an angular module to hold all your controllers & services then injecting it to your app module. This is how I'm using it here and this is how it is also done in this great ready to use Fork : https://github.com/CreativityKills/foundation-apps-template

• Note: remember to restart gulp after each modify of its config file and check if your code has been well included in the built JS file ( by default is /build/assets/js/app.js )