<fill-image></fill-image> generates place holder images for your prototype app. <fill-image></fill-image> is designed to be used with dynamic placeholder services like
Add a reference to fill-image.js file either by downloading the source file from here or by running
$ bower install fill-image --saveThen add FillImage module as a dependency to your awesome app
angular.module('myApp', ['FillImage']);Now you can start sprinkling around <fill-image></fill-image> tags. If no service attribute is provided, a random service from the above list will be used.
Feel free to add a new service or a PR to the existing code.
- Download/clone repo
cd fill-imageRunnpm install- To start developing
gulp watch
Docs are located on gh-pages branch.
- Switch branch
git checkout -b gh-pages - Update the docs & submit PR
- Clean up the code
- "Real" Rules engine
I started this directive to integrate all image place holder services and use a single directive to access all of them, depending on the "mood" of the app. As I started developing the directive, the complexity of structuring the code became complex, As each service has its own set of options/structure.
In v0.1.0, I tried to implement a rules engine (not really a rules engine, but a few utility methods that tell about the behavior of a service), which generates the output conditionally, depending on the service it is processing.
The next step is to come up with a more cleaner solution, which is very close to an actual rules engine. This "Rules Engine" takes in a service and a rule set and spits out the URL of the image tag. This kind of architecture may be helpful for other services, where the code base needs to interact with multiple data response in multiple formats & process them in the same way.