Organizing Angular 2 projects by feature
This lessons shows one way to structure your project by feature and how all you need to do is update your import statements.
[00:00] For organization in Angular 2, we'll just create some folders by feature. We'll have something like a search folder. We can move our search box and our search pipe in there. Then, inside of there, create a components. That's where our search box would go, and a pipes where our pipe would go.
[00:28] Then we did break everything, so you just have to make sure when you move files around that you update your imports. The search box is now in search/components, and the search pipe is now in search/pipes, and then everything is back working.
[00:46] We can do the same thing with all the other files and create a to-do directory with a components, a pipes, and a services. Then just start moving files around, to do list, item rendered, inputs, status selector, for all the components. The model and service, we'll drop that in services. Then it's just a matter of going back and fixing all of our imports.
[01:23] [pause]
[01:23] You can organize your imports however you want. I like to keep them grouped together like to-do components group together, services group together, and all of the Angular 2 imports at the top. Then there's lots of other things to fix.
[01:53] [pause]
[02:09] Now everything should be back to working. We organized everything by just changing imports and the directories that they're in.
I think this is pretty good since it's obviously a tiny "app". My thoughts were a little different on organization though. Say if your app had a Home page. Top level may be app/home. Inside this folder you would have home-page.html and home-page.ts. Inside this folder you'd have a components folder, inside that you have a login folder with a login-component.html and login-component.ts and login-vm.ts (for the viewmodel). So I would keep the model file in with the component, not with the service folder. Then have a register folder, etc. Something like navigation bar, you could keep in app/shared, perhaps.