When building large Angular Apps, you’ve to care about how to structure your project. I can imagine, John Papa will, of course, provide a new style guide soon 🙂 (no pressure here, we’ve our own for Angular.JS and Angular).
But already in those early days, you’ve to care about the project structure. Refactoring an entire project structure is hard 💩. So think about it, before you start coding.
That said and the fact that we always structure our apps by components (also Angular1 apps) I ended up with the following structure.
Source files go into a dedicated
src folder, and there is no in place transpiling, so all transpiled bits are moved to
For Angular Components, we’re arranging them by use-case or feature-area like
product/detail. Other building blocks like
pipes go to the corresponding folders.
Take the following list of files and folders as an example.
/src /src/app /src/app/components /src/app/components/app /src/app/components/app/app.ts /src/app/components/login /src/app/components/login/login.ts /src/app/components/product /src/app/components/product/list /src/app/components/product/list/list.ts /src/app/components/product/detail /src/app/components/product/detail/detail.ts /src/app/services /src/app/services/logger.service.ts /src/app/services/product.service.ts /src/app/pipes /src/app/pipes/user.displayname.ts /src/app/pipes/product.displayname.ts /src/app/models /src/app/models/product.ts /src/app/models/user.ts /src/app/boot.ts /src/index.html /src/styles/ /src/styles/variables.less /src/styles/main.less /dist ( -> ignored in git) /gulpfile.js /package.json
I’ve removed some folders like
.temp also, some configuration files here because they don’t matter at this point.
By using this structure, I can quickly
gulp all things to
dist and use the transpiled Angular app to build
Cordova apps or it as a web app.
No golden rule tells you how to structure your Angular app. However, it’s essential to get the setup right at first place. Apps grow quickly, and Angular will become the next big thing for enterprise developers. That said, having a robust and meaningful source code structure is essential.