Skip to content
This repository has been archived by the owner. It is now read-only.

Controller in Separate File #582

ryanburnett opened this issue Apr 15, 2015 · 3 comments


Copy link

commented Apr 15, 2015

I'm running FA 1.1 and understand how to create a new controller in app.js.

My question is, how can I create a controller in a separate file?

For example, I want to create 'HomeCtrl' in this location:

Here's what I've tried:

  • Include the file in index.html:
    <script src="/assets/js/controllers/home.js"></script>
  • Add the controller at the top of home.html and add ng-controller to grid-container:
name: home 
controller: HomeCtrl 
url: / 


<div class="grid-container" ng-controller="HomeCtrl">
  • Add the file path to the appJS array in gulpfile.js:
appJS: [ 
  • Create home.js with the controller code:
  .controller('HomeCtrl', HomeCtrl)
HomeCtrl.$inject = ['$scope', '$stateParams', '$state', '$controller'];
function HomeCtrl($scope, $stateParams, $state, $controller) {
  angular.extend(this, $controller('DefaultController', {$scope: $scope, $stateParams: $stateParams, $state: $state}));
  $scope.hello = "World";

Unfortunately {{hello}} is not binding to "World" (or anything).

Any ideas how I can create a controller in a separate file?


This comment has been minimized.

Copy link

commented Apr 21, 2015

I too am trying to figure out how to use external Javascript files (/assets/js/*/.js) to house controllers, filters, services, etc. Any guidance would be greatly appreciated as I am finding my app.js file to be too bulky now.


This comment has been minimized.

Copy link

commented Apr 28, 2015

Hey @ryanburnett -

It's working for me using the latest version of the Foundation for Apps CLI client.

Here are the steps I took:

  1. I made a new file "home.js" under client/assets/js/controllers and copied line for line the snippet you provided.
  2. I went into gulpfile.js and added client/assets/js/controllers/home.js to the appJS array.
  3. I went to my home template and set the front-matter parameter "Controller" to "HomeCtrl" and added the scope variable {{hello}} to the page.
  4. I ran foundation-apps watch. You can also run the commands npm start or gulp to build the app.

I did NOT include the home.js file in my index.html, because that already gets included and compiled in your build folder into app.js (lines 132-143 in gulpfile.js).

Let me know if that works for you.


This comment has been minimized.

Copy link

commented May 6, 2015

@jeanieshark Thank you! Stopping and restarting npm start did the trick!

@ryanburnett ryanburnett closed this May 6, 2015

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
4 participants
You can’t perform that action at this time.