The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

AngularJS Architecture: File Structure

AngularJS Architecture: File Structure

5:51
Let's talk about the importance of having a good file structure and how it is is very much like good code in that it is self documenting and friendly to extension. We will introduce the file structure that will serve as the foundation for the rest of the series as we refactor Eggly.
Watch this lesson now
Avatar
egghead.io

Let's talk about the importance of having a good file structure and how it is is very much like good code in that it is self documenting and friendly to extension. We will introduce the file structure that will serve as the foundation for the rest of the series as we refactor Eggly.

Avatar
Fang

I really appreciate that you spent time in discussing file structure. From the past experience, just by looking at it, it might tell you if a project is going to fail or not.

In your video, you mentioned that you favor organizing by features and not by type. This is very true. You treat each angularJS module as a feature, and inside it you continue use submodule approach. However it's still a mixed model, ex. asset and data folder as well as your common/models folder. It's not 100% by-feature structure.

While this approach may be very effective for very large application which can have submodule inside module. But a typical application might be better in the following way.

First use module to organize functionalities. And we have a folder for all modules (there'll be dependency, but we won't track them by embedding one inside another one).

Inside each module, we'll organize by type, ex. template, script, data, model etc.

This two layer of file structure, by feature first and then by type serves me well for medium size application. For small application, i just organize by type or not organize at all.

This approach also scales well, because it's essentially flat except it's grouped by feature (which is a tag to the type folder inside).

In reply to egghead.io
Avatar
Joel

You make great points Feng. For even smaller applications, we might not need folders at all! ;)

I love this explanation.

In reply to Fang
Avatar
Fang

I re-watched this video, so this video is talking about making directory structure for large applications that want to share not only feature (or sub-feature) but also micro features (like create / edit).

However the fact that model is not stored in these folders makes me wonder if each folder can be called a feature.

The other thing is that you have to consider, for large applications, there's absolutely a front-end engineering for the look or theme, which is not necessarily the angularJS guy, which is more like front-back guy. In order for this guy to work efficiently, it's better to have a single folder for templates, at least for each feature. Ex.

bookmarks
---- templates
---- scripts
---- styles
---- models

just to reproduce the most of the folders from the root folder, I think this way, you might have a better chance to call it a feature as well as the flexibility to have other expertise on the same project.

I know i might be saying the similar things as my previous post, but after couple of month practice, I realized that a good structure is definitely a good thing to have at the first place, and it also needs some flexibility for other people to contribute.

Avatar
Steve

Excellent series, many thanks for the excellent work. Just at a level that I could follow. Could you please share how the "resources are pasted into the bottom of the index.HTML file (last few seconds of the video.
Steve

Avatar
Lukas

Hi, Steve - thanks for the compliment!

If I understand the question correctly, I am just pasting standard script tags pointing to the JavaScript resources that we started to flesh out. I figured pasting them was way more awesome than watching me type them.

Let me know if that answered your question or I totally misunderstood. #highFive

In reply to Steve
Avatar
Victor Alfonso Hazbun Anuff

why at https://github.com/eggheadio/egghead-angularjs-eggly-architecture/blob/master/src/app/eggly-app.finish.js you still have $scope.categories = bunch of objects in array? the same for $scope.bookmarks it does not make sense to me because they are in the data folder as json. Please explain.

Avatar
Arnold

Hello, Please how are you able to copy all the files into webstorm memory for quick pasting/import in the index.html

Avatar
Lukas

@Arnold, unfortunately there was no Webstorm magic here. I just copied the script tags as text and pasted them in the video, simply to cut down the typing time.

In reply to Arnold
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?