angular-yahoo-pipes | A ng-directive to fetch and display Yahoo Pipes

angular-yahoo-pipes directive


Stars : 10

Forks : 10

Created by Dmytro Yarmak

bower install angular-yahoo-pipes

Demo Download GitHub


An angular.js directive to fetch and display Yahoo Pipes!

This directive dedicated to be reusable and very extensible.

The directive has been built with modularity and testability in mind. It consists of different services that has it's own and only one responsability and doing it well.


If you want to look at demo or example of using you can download the project and open example/index.html in you browser or you can just use this link:

Demo (Warning: Sometimes Yahoo Pipes API is working unstable and can failed or return zero items for used pipe)

How to use

To use this directive in your project you should:

  1. Copy dist directory to your project's assets or install angular-yahoo-pipes using Bower:

    bower install angular-yahoo-pipes
  2. Add script file from dist directory to your application:

    <script src="path_to_library/dist/angular-yahoo-pipes.js"></script>
  3. Add dyYahooPipes module as dependency to your application:

    angular.module('myApp', ['dyYahooPipes']);
  4. You can write your own CSS styles or use the existing theme:

    <link rel="stylesheet" href="../dist/angular-yahoo-pipes.css">
  5. Just insert directive anywhere you want:

    <div class="container">
    <dy-yahoo-pipes pipe-id="IDwA0nTK2xGv8oU0JhOy0Q"></dy-yahoo-pipes>


The code of the directive has ngDoc documentation. You can see it in src/angular-yahoo-pipes.js file. Generating HTML documentation is planned as a improvement for this project.


The code of angular-yahoo-pipes directive is covered by unit tests. Tests are written using Jasmine and angular-mocks. Karma is using as test runner for unit tests. To run tests you can use karma-cli or grunt task (make sure that you install node modules and bower components before):

grunt test


Grunt is used as task manager for this project. To run tests or build project you need to have node.js installed in your environment. After that nessessary npm modules and bower components should be installed:

npm install
bower install

Also you should install grunt-cli globally to use grunt in your console:

npm install -g grunt-cli

After that you can use all grunt tasks. For example: - grunt build to build js and less to dist folder - grunt test to run unit tests using karma

Improvement plan

  • [ ] pass parse functions as attribute to directive to overwrite or decorate default parsers
  • [ ] improve default parser functions to manage more types of pipes
  • [ ] improve error managing and logging
  • [ ] add chosing of pipe to example
  • [ ] write second CSS theme
  • [ ] add chosing of theme to example


Javascript plugin