I’ve had to come up with a better strategy recently for making custom directives that didn’t involve make subtle changes in the browser, save file, refresh, go to said feature, check it. Mess with things in Chrome Dev Tools. See what it does, etc. That sucked.
So, I did what anyone with a problem does. Try and solve it. I knew that some of the custom directives I needed would require certain server api data (list of customers, customer detail, etc.), so that had to be figured out, but then I still needed an isolated way that was also very organized for making custom directives. From this, I stumbled upon one of my favorite time savers.
Custom Directive Library In Isolation
1) Open Google Chrome.
2) Go to the Chrome Developer Tools and click on Network.
3) Navigate to the page you need data from or use an extension to make the API call.
4) Locate the API call in the Network activity list.
5) Right click the call and select Copy Response.
You now have a server replica of the exact data and format that would come from the server to mess with, in the next steps. I take this and assign it to a JavaScript variable and can forget about having to always have memorized the data format coming from the server.
Next you need an online all-in-one editor. There are many out there, I happen to prefer Plunker (http://plnkr.co/) because it has version control built-in, it makes it super easy to add whatever libraries and frameworks you need. You could make a default template for your project and just fork it every time you need to start a new custom directive, giving you the perfect boilerplate code to jump right into the actual coding and not start off with having to do the same boring setup routine every single time.
Before you know it, you’ll have around 10-20 custom directives for use either in a single project or multiple. Customizing a single directive for a different project is extremely simple with forking, but best of all, it saves all of your directives in a single, sharable (and hopefully organized) repository.
I’ve found that with this technique, I’ve cut my custom directive development time by 40-60% depending on where I’m creating it in the application (inside of a page, after you login and click on item ABC, to find a feature in the modal popup…. :/) and probably increasing my custom directive development enjoyment by as much, if not more.
Hopefully this tip helps you as much it has helped me.