Menu icon Foundation
Controller in separate file

Hi,
I have just started exploring Foundation4A.
It is interesting.

Though the set up can be done with few cli commands, I faced some issues.
1) Not much documentation about how we can create an angular.js controller or service.
2) Official app.js boilerplate is not available and ways of customizing it with proper explanation.
3) How to use Foundation4A without GULP or NODE?
4) How to create controllers and services in a separate file or folder in the client side?

Or is Foundation4Apps only better for prototyping rather than web apps? if so, how and where can we write our business logic without messing up the code structure?
I am struggling to get an official app.js template and to include custom angularjs controller and services in my project. I couldn't find much help in the net too.

Is it coming in the next version of the framework? when can we expect that?
Is it possible to just include the foundation ui to an existing angularjs project (which has proper folder structure)?

Basically,
I would like to create my views(templates), controllers with models in a custom folder structure and use it with Foundation4A. Can you please give me an step by step process?

Thanks.

CUSTOM CONTROLLERdocumentationtutorial

Hi,
I have just started exploring Foundation4A.
It is interesting.

Though the set up can be done with few cli commands, I faced some issues.
1) Not much documentation about how we can create an angular.js controller or service.
2) Official app.js boilerplate is not available and ways of customizing it with proper explanation.
3) How to use Foundation4A without GULP or NODE?
4) How to create controllers and services in a separate file or folder in the client side?

Or is Foundation4Apps only better for prototyping rather than web apps? if so, how and where can we write our business logic without messing up the code structure?
I am struggling to get an official app.js template and to include custom angularjs controller and services in my project. I couldn't find much help in the net too.

Is it coming in the next version of the framework? when can we expect that?
Is it possible to just include the foundation ui to an existing angularjs project (which has proper folder structure)?

Basically,
I would like to create my views(templates), controllers with models in a custom folder structure and use it with Foundation4A. Can you please give me an step by step process?

Thanks.

Aaron Saunders over 4 years ago

i have to admit that this documentation around integrating controllers is in need of some help, also I don't see how this approach will work or a large complex angular application with controllers and services.

if i understand correctly every time i add a file, I will need to update gulp and update app.'s?

Selva Ganesh over 4 years ago

Thanks. It worked.

Agustin Sevilla over 4 years ago

You can definitely write in your templates and angular logic!

Put your templates into the 'client/templates/' directory, following the structure explained here: http://foundation.zurb.com/apps/docs/#!/angular

You can start adding your services and controllers to the main app.js file, using method chaining, like this:

 //This already application module already exists in 'client/assets/js/app.js'
angular.module('application', [DEPENDECIES]) 
.service('myFancyService', [DEPENDECIES], function() {
})
.controller('myFancyCtrl', [DEPENDECIES], function() {
})

As for moving directories, I think you should be able to do this by modifying your gulpfile.js to make sure you include all the of your app's js - see line 43 - 46:

 // These files are for your app's JavaScript
var appJS = [
  'client/assets/js/app.js'
];

In the gruntfile you can also see where you will add your own template path, although I can't help you much there - I just put them in the directory that Foundation for Apps uses as default.

Hope that helps!