This repository was archived by the owner on Apr 12, 2024. It is now read-only.
- Notifications
You must be signed in to change notification settings - Fork27.4k
Dev Guide: Best Practices
Adrian edited this pageDec 20, 2017 ·1 revision
Related:Dev Guide: Anti-Patterns
- Namespace distributed code
You shouldn't worry about prefixing internal code, but anything you plan to OpenSource should be namespaced- The
ng-is reserved for core directives. - Purpose-namespacing (
i18n-orgeo-) is better than owner-namespacing (djs-origor-) - Checkoutui-alias to remove 3rd party prefixes
- The
- Only use
.$broadcast(),.$emit()and.$on()for atomic events
Events that are relevant globally across the entire app (such as a user authenticating or the app closing). If you want events specific to modules, services or widgets you should consider Services, Directive Controllers, or 3rd Party Libs$scope.$watch()should replace the need for events- Injecting services and calling methods directly is also useful for direct communication
- Directives are able to directly communicate with each other through directive-controllers
- Always let users use expressions whenever possible
ng-hrefandng-srcare plaintext attributes that support{{}}- Use
$attrs.$observe()since expressions areasync and could change
- Extend directives by using Directive Controllers
You can place methods and properties into a directive-controller, and access that same controller from other directives. You can even override methods and properties through this relationship - Add teardown code to controllers and directives
Controller and directives emit an event right before they are destroyed. This is where you are given the opportunity to tear down your plugins and listeners and pretty much perform garbage collection.- Subscribe to the
$scope.$on('$destroy', ...)event
- Subscribe to the
- Leverage modulesproperly
Instead of slicing your app across horizontals that can't be broken up, group your code into related bundles. This way if you remove a module, your app still works.- Checkoutangular-app/angular-app for a good example
app.controllers,app.services, etc will break your app if you remove a moduleapp.users,app.users.edit,app.users.admin,app.projects, etc allows you to group and nest related components together and create loose coupling- Spread route definitions across multiple module
.config()methods - Modules can have their own dependencies (including external)
- Folder structureshould reflect module structure
- Add NPM and Bower Support
This has become the standard for AngularJS so it's a good idea to familiarize yourself
