Have a modular directory structure: The directory structure is very important in organizing angular modules. This helps in not only organizing the code for everyone's understanding in team, but also good mainatinability and refactoring of code base. There are 2 mostly used app directory:
- Component wise directories: This pattern emphasizes on using one directory per component type i.e. 1 directory each for directives, services, controllers, filters etc.
- Module wise directories: This pattern emphasizes on using one directory per module. Every module will have sub-directory for services, controllers and directives. The common components can be moved to a common module
- Single responsibility principle: One file should do only one task at a time This gives us the advantage of finding the files easily and maintaining the code better. Also bugs are inevitable evils as part of development process. A better managed code with modules and components gives us advantage while debugging and triubleshooting for issues and fixing bugs.
- Strictly follow MVC's SOC: The Separation of Concern(SOC) is a topic which has been discussed much in detail but still people miss out on them while working on applications. SInce Angular provides a very explicit MVC architecture, with help of controllers, services, directives, config, routes etc. , we should be keeping the task of each component to themselves.
Avoid explicit digest cycles: Avoid using
$apply()method explicitly as they trigger a new digest cycle. Digest cycles evaluate all the scope variable for change in value i.e. dirty checking which in turn may trigger a sequence of digest cycles which is cost intensive in terms of app performance.
$watch: Watchers monitor change in values and can be costly for app performance.
Use angular's wrapper over DOM objects: Use angular's wrappers
$window, $document, $timeout, $intervaletc. instead of
window, document, setTimeOut, setInterval. This avoids explicit need of angular digest cycle to be called to apply changed scope values.
Use services to share values across controllers: Avoid using
$watch, $rootScopeto share values across controllers. The impact of using
$watchis mentioned in point above. Using
$rootScopeis like using a global variable across the app and should not be polluted.
- Keep controllers as thin as possible: Controllers represent the viewmodel for the view and should be kept as thin as possible.
- Move business logic and data fetching logic to services: Retrieving data and storing data should be moved to skeleton services. Since controllers are plugged/unplugged based on route changes, they should not hold persistent data.
ui-routerdepicts the actual hierarchical structure of an app and it also retains the parent view data while navigating to sub-view. This allows for a smooth transition between parent and child views.