Angular JS - Advanced Design Patterns and Best Practices
Keep your code organized
As developers we often struggle with code organization when scaling an application.It gets messy and we start losing times searching for files.
The piles on the floor
In this example from Angular-Seed project , objects of the same nature are regrouped into a single file. This demonstrate poor code organization and will lead to humongous files in no time. Another downside of this approach is losing useful insight provided by source control technologies like Git.Inspired from this great article wrote by Cliff Meyers: Code Organization in Large AngularJS and JavaScript Applications
The socks drawer
The next logical pass at organizing JavaScript involves creating a directory for some of the archetypes and splitting objects into theirown files. This is works better for small project but once you've reach more than 10 files per directory you start losing time again.Drawers doesn't provide any insight about application architecture, we know that controllers are there but still need to dig tounderstand their dependencies.
Modularity
With a modular organization is not just directory structure, it's architecture. Any random developer can now open the top-level folder and immediately gain insight into what the application does. Objects in the same folder now express their relationship and their dependencies to others.
KEEP CONTROLLERS SIMPLE
CONTROLLERS ARE MEANT TO DEFINE YOUR SCOPE VARIABLES AND ENCAPSULATE VIEW RELATED LOGIC. PLEASE DON’T USE CONTROLLERS FOR DOM INTERACTIONS OR DATA MANIPULATION.
ANGULAR IS MISSING TWO CRITICAL THINGS.
- STRUCTURED CLASS APPROACH
- CLASS INHERITANCE
Implement inheritance pattern using Class.js utility
ClassUtility by John Resig ~ http://ejohn.org/blog/simple-javascript-inheritance/
Keep your scope uncluttered
Angular dirty check each properties when it thinks some values changed. Every $digest or $apply will trigger this check. Carefully selecting what is available on $scope and minimizing logic view bound functions is the key to build snappy applications.
USE DIRECTIVES
ANY DOM MANIPULATION SHOULD TAKE PLACE INSIDE A DIRECTIVE, AND ONLY DIRECTIVES. ANY CODE REUSABILITY SHOULD BE ENCAPSULATED (BEHAVIOURAL AND MARKUP RELATED) TOO.
DOM manipulation
DOM manipulation should be done inside the link method of a directive.
Bad:
Good:
Communication between Directives
- Custom directives can communicate with each other- Directives are easy to create.
- Directives have their own scope
- Directives can communicate with the outside world via HTML attributes
- Directives encourage loose coupling
- Directives encourage reuse and UI consistency
- Directives are easy to test (well, this is a future article)
- Controllers can use directives with zero coupling
Index.html
App.js
Read the full article here: http://thesmithfam.org/blog/2012/12/17/communicating-between-directives-in-angularjs/
BUSINESS LOGIC BELONGS TO MODELS
DATA PROCESSING SHOULD ALWAYS BE KEPT IN MODELS, THAT WAY THEY CAN EASILY BE SHARED BETWEEN CONTROLLERS AND OTHER SERVICES. PLUS IT'S EASIER TO WRITE UNIT TEST FOR THEM.
Sharing model with providers
It's also possible to write providers that returns a new instance of the model each time instead of sharing it.
CREATE FACADE TO INTERACT WITH SERVERS
KEEP IT SIMPLE, SEPARATE SERVER INTERACTION AND ERROR HANDLING FROM THE MODEL. THAT WAY MODEL ONLY HANDLE DATA PROCESSING AND CODE IS EASIER TO MAINTAIN
This can be injected in any model that needs to interact with slides RESTful API
LEVERAGE PROVIDER CONFIGURATION
ANGULAR GIVES DEVELOPERS THE ABILITY TO CONFIGURE PROVIDERS BEFORE THEY ARE INJECTED INSIDE OTHER OBJECTS IN OUR APPLICATION. USE THAT TO YOUR ADVANTAGE AND HANDLE GLOBAL EVENTS LIKE SERVICE ERRORS FROM THAT LEVEL.
Configuring $httpProvider to intercept all requests
SHARE A NOTIFICATIONS SERVICE
WHILE IT'S A GOOD SOLUTION TO BRIDGE GAPS BETWEEN DIRECTIVES, CONTROLLERS AND MODELS WE ENCOURAGE YOU TO USE $SCOPE.$EMIT() AND $SCOPE.$BROADCAST WHEN POSSIBLE. DON'T OVERUSE IT.
How to use Notifications
A basic notifications class is included in the source code here
AUTOMATE YOUR WORKFLOW
ANGULARJS ECOSYSTEM IS GROWING FAST. EACH MONTH NEW TOOLS ARE RELEASED. USE THEM TO BUILD YOUR OWN BOILERPLATE AND USE THAT FOR YOUR PROJECTS.
Yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks that you might need for your build.
Grunt is used to build, preview, and test your project.
Bower is used for dependency management so that you no longer have to manually download and manage your scripts.
Credits: The content in this has been collated from the following sources: