Structure Files for an AngularJS Application

InstructorLukas Ruebbelke

Share this video with your friends

Send Tweet

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.

Fang
~ 9 years ago

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.

Steve
~ 9 years ago

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

Lukas Ruebbelkeinstructor
~ 9 years ago

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

Victor Hazbun
~ 8 years ago

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.

Arnold
~ 8 years ago

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

Lukas Ruebbelkeinstructor
~ 8 years ago

@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.