Project Structure

[giorgiofellipe]

What do you guys think about this Folders-by-Feature Project Structure? Based on https://github.com/johnpapa/angular-styleguide#folders-by-feature-structure

www
├── app.module.js
├── app.config.js
├── index.html
├── img
│   └── ionic.png
├── css
│   ├── ionic.app.css
│   └── style.css
├── scss
│   ├── ionic.app.scss
│   └── style.scss
├── vendor
│   ├── ionic
│   ├── angular
│   └── angular-ui-router
├── components
│   └── calendar
│       ├── calendar.directive.js
│       └── calendar.directive.html
├── modules
│   └── states
│   │   ├── home
│   │   │   ├── home.controller.js
│   │   │   ├── home.config.js
│   │   │   └── home.html
│   │   └── playlists
│   │       ├── playlists.controller.js
│   │       ├── playlists.config.js
│   │       └── playlists.html
...

[alvarowolfx]

👍 will be great, I applied this structure on the https://github.com/alvarowolfx/front-in-cuiaba-app project as a example of following John Papa style guide

[giorgiofellipe]

Maybe instead of modules could be src, because we already have a modules folder, just like @alvarowolfx did on his app.

[felquis]

@giorgiofellipe I couldn't understand what means components is it like shared? And modules? Definitely isn't intuitive that inside of modules I have my app's routes and views.

I have no ideia what's better, but I'm sure it must be the same of that ideas to write better CSS code, previsible effect, no side effects, everything should be as it is not dependent of the context it is used.

src inside of www is a bit verbose, because in practice, www is our src folder for the moment, we have plans to change that to actually work in src and build optimized assets to www, which is the folder handled by Cordova. In this case, src shouldn't have css folders. Only index.html and a bootstrap file in the root of src. Given

I believe we should focus on states, because IONIC apps is all about states, and someone is hired, they check the routes, and they have a good ideia in how the app is structured.

Shared is so good, if we need to check the user factory, I'm sure this is in the folder shared/user/, just looking for the name of the injected module. I think this predictability is very important for a structure that will be used by a lot of people.

Remember, that #22 & #25 will/should also generated test case for everything it creates, and Angular-Seed uses it inside of each module, I think that is awesome.

This is what I thought

src
├── bootstrap.js
├── index.html
├── images
│   └── ionic.png
├── scss
├── ├── (Should we think in a Style Guide for CSS? I think so)
│   ├── main.scss
├── shared
│   ├── calendar
│   │   ├── calendar.directive.js
│   │   ├── calendar.directive.html
│   │   └── spec
│   │       └── calendar.directive.spec.js
│   └── follow-button
│       ├── follow-button.directive.js
│       ├── follow-button.directive.html
│       └── spec
│           └── follow-button.directive.spec.js
├── states
│   ├── home
│   │   ├── home.controller.js
│   │   ├── home.config.js
│   │   ├── home.html
│   │   └── spec
│   │       └── home.spec.js
│   └── playlists
│       ├── playlists.controller.js
│       ├── playlists.config.js
│       ├── playlists.html
│       └── spec
│           └── home.spec.js

About www folder

www
├── index.html
WAIT: This will be optmized

I think this is good, because, if anyone which is new in Ionic Garden, will ask "Where do I see the states of my app?" states folder. "Where do I find the user inject in that state controller?" Look for user at shared.

What do you think?

[giorgiofellipe]

@felquis Oh, I've forgotten the tests, but as you mentioned it should be in the same folder as the component.

Also, indeed it would be nice if we don't mess the things up into the www folder!

[vitormalencar]

I have this doubt , as the automation of tasks such as imgmin jade, these folders should be created out of the www , thinking about it
how would this structure ?

[felquis]

@giorgiofellipe First let's make our current stack work in src and build to www, something really simples as a copy task. Just to start.

[felquis]

This issue is related to #13

[cironunes]

I would have even the CSS (or .sass) files inside the components folder.

src
├── bootstrap.js
├── style.scss
├── index.html
├── components
│   ├── home
│   │   ├── home.tpl.html
│   │   ├── home.module.js
│   │   ├── home.controller.js
│   │   └── home.controller.spec.js
│   ├── calendar
│   │   ├── calendar.tpl.html
│   │   ├── _calendar.scss
│   │   ├── calendar.module.js
│   │   ├── calendar.directive.js
│   │   └── calendar.directive.spec.js
├── images
│   └── ionic.png

[felquis]

That's a good ideia, thanks @cironunes

[ivosantiago]

Like it a lot too! I would also point another thing from the style guide

Place unit test files (specs) side-by-side with your client code. 
Place specs that cover server integration or test multiple components in a separate tests folder.

[jayrmotta]

As it is still opened I think something between @felquis and @cironunes ideas would be nice! I really liked @cironunes approach since I've been work with many modern AngularJS projects based on John Papa style guide (mixing html, js, css, spec, etc) and it also follows Uncle Bob's ideas.

However /components are commonly used for things that may be reused, I don't think thats the case for home. There I'd agree with something like shared as @felquis proposed, although the word components is widely accepted for what I've been reading.