Menu icon Foundation
AngularJS Controllers and Services

Now that I have Foundation Apps installed and functional, I have looked at the documentation and have commenced porting a simple AngularJS application and have come up against issues getting the controllers and services recognised correctly.

The FA documentation briefly mentions overriding default controllers but offers no details as to where these controllers defined..

It would help immensely to get started with FA to have something that outlines what are the "adjustments" required from standard AngularJS development..to incorporate exisitng services, controllers and directives into a FA project.

controllerservicesAngularJS

Now that I have Foundation Apps installed and functional, I have looked at the documentation and have commenced porting a simple AngularJS application and have come up against issues getting the controllers and services recognised correctly.

The FA documentation briefly mentions overriding default controllers but offers no details as to where these controllers defined..

It would help immensely to get started with FA to have something that outlines what are the "adjustments" required from standard AngularJS development..to incorporate exisitng services, controllers and directives into a FA project.

Hans McMurdy almost 5 years ago

This is probably the only thing I've been having serious issues with myself...

First off I think their repo may help as they define define a controller in the motion-ui.html template
https://github.com/zurb/foundation-apps/blob/master/docs/templates/motion-ui.html
and they use it (line 52):
https://github.com/zurb/foundation-apps/blob/master/docs/assets/js/angular.js

They also use the default NavController.

However in terms of building a template from the cli tool I haven't had much success...

Hans McMurdy almost 5 years ago

You also may want to watch this video by Antonin Januska, one of the angular developers for FA:
https://www.youtube.com/watch?v=UmUE_-LE-0k

Adrian P almost 5 years ago

Have watched the video...whilst informative it did not really explore custom services and controllers.

It seems that there was an issue in the repo regarding the order of files that prevented angular code to be executed in app.js. executing foundation-apps update fixed that so now a controller can be specified in app.js

After many hours of "wresting' with code I am still having trouble with custom services. Defining them in app.js causes the rendering of the page to halt but strangely no errors show in the browser console.

What I am endeavouring to do is port a simple, functioning AnjularJS app that uses the Foundation Angular add-on to use Foundation for Apps.
A straight forward task one would think. It was easy to change out the directives in the templates.. no problem at all... controllers were sorted by updating the repo... but trying to get (unsuccessfully) the services code to work has been very frustrating.

Additionally code included in app.js is "minified" which makes debugging more difficult than it should be..

It would be great if there was some guidance for developers as to how to translate a traditional AngularJS app structure for use with Foundation for Apps. maybe even a development mode for the CLI that preserves a more traditional AngularJS structure to ease development.

Todd Hickerson almost 5 years ago

I would second Adrian's request. It would be really helpful if a partial template in the template app had a controller that used a resource that called a restful service or returned static data. I'm having trouble injecting 'ngResource' into my controller since it was not injected into the angular.module('application') when Foundation initialized it.

In order to use the ui-routing, it seems that we need to use the 'application' module already created. Yet, to do that, how do we inject other things that were not initialized?

Thanks in advance!

James Stone almost 5 years ago

I approached this by modifying the gulp.js file and creating my own app.js based on the foundation app.js in bower_components/foundation-apps/js/angular/app.js.

If anyone has a better idea of how to accomplish this please let me know. Here is the full repo (note: checkout the fire branch)

https://github.com/jamesstoneco/foundation-for-apps-live-reload/tree/fire

Antonin Januska almost 5 years ago

Hello everyone,
First of all, thanks for sharing my video. I'll definitely make another with a tutorial on how to incorporate FA into an existing app.

As far as all the concerns go:

The best way right now to create an application really is copying the app.js and using only the specific stuff you want to use. Here's the file: https://github.com/zurb/foundation-apps/blob/master/js/angular/app.js There ARE a couple of files tied specifically to the application module (DefaultController is one) and the basic config in the app.js, but again, you can just copy/paste that.

This will allow you to use your own dependency injection and specify all your own settings.

That was the way it was designed (the app.js either to work as is or serve as a template for angular developers).

However, I've been working on a branch with a major refactor (https://github.com/zurb/foundation-apps/pull/282) that will allow you to just import foundation module and foundation.dynamicRouting for routing and foundation.dynamicRouting.animations for routing animations.

I feel like that will solve all of these problems. I'm hoping to get these out for v1.1

Adrian P almost 5 years ago

Thanks Antonin

I look forward to v 1.1.

Salem Ouerdani almost 5 years ago

I look forward to v 1.1 too, thanks Antonin for the great refactor, but for the moment & while 1.1 is not yet released, i would like to point to Fedil Grogan's great work (https://github.com/ukneeq/foundation-apps-seed) trying to incorporate the best practices for AngularJS within foundation-apps. i like the flexible architecture :

src/
app/ --> all of the source files for the application
app.css --> default stylesheet
components/ --> all app specific modules
version/ --> version related components
version.js --> version module declaration and basic "version" value service
version_test.js --> "version" value service tests
version-directive.js --> custom directive that returns the current app version
version-directive_test.js --> version directive tests
interpolate-filter.js --> custom interpolation filter
interpolate-filter_test.js --> interpolate filter tests
view1/ --> the view1 view template and logic
view1.html --> the partial template
view1.js --> the controller logic
view1_test.js --> tests of the controller
view2/ --> the view2 view template and logic
view2.html --> the partial template
view2.js --> the controller logic
view2_test.js --> tests of the controller
app.js --> main application module
index.html --> app layout file (the main html template file of the app)
karma.conf.js --> config file for running unit tests with Karma
e2e-tests/ --> end-to-end tests
protractor-conf.js --> Protractor config file
scenarios.js --> end-to-end scenarios to be run by Protractor

& he even followed his work by a great series of tutorials starting here : http://fedil.ukneeq.com/technology/tutorial-foundation-for-apps-setup-with-angularjs-best-practices/

Adrian P over 4 years ago

I assume that now v1.1 is out this has been addressed?
It is not obvious in any of the documentation

Any update or information would be greatly appreciated.

Rafi Benkual over 4 years ago

We've made lots of changes to the project since this post. Updating to the latest is recommended.

Adrian P over 4 years ago

I have updated to v1.1 and found I have the same issues.

Is ther a way of using Foundation Apps without using "faoundation-apps watch" to compile changes ?
Can you just inject the modules into app.js of my existing AngularJS application? If so is there a document that outlines this way of working with FA?

Salem Ouerdani over 4 years ago

a great article about setting up your own controllers within app.js and defining new modules dependencies by Stephen Saucier :

http://asisolve.com/foundation-for-apps-the-undocumented-process-for-a-dynamic-web-app/

Adrian P over 4 years ago

Thank Salem for surfacing this article.
It not only explains a few key things it also reinforces my own understanding and has allowed me to determine how I will proceed.