Open giorgiofellipe opened 9 years ago
:+1: 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
Maybe instead of modules
could be src
, because we already have a modules folder, just like @alvarowolfx did on his app.
@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?
@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!
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 ?
@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.
This issue is related to #13
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
That's a good ideia, thanks @cironunes
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.
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.
What do you guys think about this Folders-by-Feature Project Structure? Based on https://github.com/johnpapa/angular-styleguide#folders-by-feature-structure