Where do HTML files go for controllers?
andreasmpet opened this issue · comments
With the alternative below, where do the HTML pages go?
I assume they go in the controllers and directives folders?
├── app
│ ├── app.js
│ ├── common
│ │ ├── controllers
│ │ ├── directives
│ │ ├── filters
│ │ └── services
│ ├── page1
│ │ ├── controllers
│ │ │ ├── FirstCtrl.js
│ │ │ └── SecondCtrl.js
│ │ ├── directives
│ │ │ └── directive1.js
│ │ ├── filters
│ │ │ ├── filter1.js
│ │ │ └── filter2.js
│ │ └── services
│ │ ├── service1.js
│ │ └── service2.js
│ └── page2
│ ├── controllers
│ │ └── ThirdCtrl.js
│ ├── directives
│ │ ├── directive2.js
│ │ └── directive3.js
│ ├── filters
│ │ └── filter3.js
│ └── services
│ └── service3.js
├── lib
└── test
They should be folder called partials. I'll update the style guide in a minute.
Ok, thanks :)
In one of the samples shown, html files live next to their directives, any specific reason for not having the html files live next to their controllers?
You can reuse given template with different controllers, while directives are tightly coupled with their templates.
@mgechev - It will be great if you can also add Google's Angular Best Practices to readme. According to this style guide, app is broken down to components where all the artifacts live (including html) which is kind of enterprise oriented.
I did not submit a pull request for this minimal change. I have few pointers as well which I want to collate and add as pull request.
@dmahapatro thanks for pointing out the Google's Angular Best Practices. It is worth to take a look at it, later this week I'll include it into the project.
You are very welcome to submit a PR, it will be greatly appreciated!
This is a really interesting discussion!
Although I've seen the "external partials approach" in some guides, and I used it at the beginning, I found it to be problematic when trying to reuse code in bigger projects.
For instance, if common were a module that you expect to reuse in a new application, placing templates for the controllers in the partials directory means that you don't have all the components inside the common directory. And you need to cherry pick the HTML files that you need from the partials directory for your new project.
My approach is:
├── app
│ ├── app.js
│ ├── common
│ │ ├── controllers
│ │ ├── directives
│ │ ├── filters
│ │ ├── templates
│ │ ├── tests
│ │ └── services
Using templates or partials as the name of the folder does not really matter, but I found having the HTML templates inside my module directory very useful. We have ~15 modules reused in 4 applications. I found this structure to be cleaner.