- Organize your app by feature ** One folder for each feature *** Each folder contains templates, controllers, and directives for each feature
- Most apps have some top level UI features ** Create a Main folder *** Within Main folder, use a top level controller to handle some of the global elements like navigation
- Services that need to be shared across controllers ** Putting these services in a Common folder *** Create Models and Services folders that will contain directives or anything that needs to be shared across features **** model is anything that communicates with the server or a service that will hold state (something that communicates with a backend service and is holding or managing state or data model) **** service - something that is just performing some functionality for the app but is not based around a particular data model or object
- Choose a convention your team can agree on and stick with it - It is better to be consistent than 'right'
- Your file structure should be self-documenting - it should clearly convey intention
Angular App Composition compared to a city:
- File structure is your city
- Modules are your suburbs
- Routes are the highways to the burbs (modules or particular functionality with the app)
- Angular modules are logic containers to organize your code
- Modules will oftentimes mirror your file structure if done correctly
- Promote reuability
- Modules promote re-usability as well as an a la carte dev experience
- Routes allow us to directly navigate to a specific state within our app
- ngRoute is fine for simple routing but ui-router is exponentially more powerful ** Can only use ngRoute or ngView 1 time in your app so you cannot have named views or nest your views *** This leaves you with a one to one relationship with your views and controllers - for simple things that's fine
- ui-router actually turns your app into a state machine ** recommend stop using ngRoute and start using ui-router ** ui-router gives discrete stable states within your app that are not necessary controlled strictly by URL *** eg click on a particular item but not refresh entire page *** spotify - when you click a particular track, just update the player at the bottom - can target just the named view in page to update the track
Pro Tip: Do not initialize your app in the it does not work