Code Monkey home page Code Monkey logo

angular-underscore's Introduction

An AngularJS module adapting underscore

This module exposes underscore's API into angular app's root scope, and provides some filters from underscore.

Filters

Whole Underscore's API for Collections, Arrays and Objects except decision API (e.g. functions return true|false), side effect guys, and _.range(not making sense as a filter).

For API details please check out http://underscorejs.org/

How to use

Install

After load angular.js and underscore.js:

<script type="text/javascript" src="angular-underscore.js"></script>

Load angular-underscore

Load whole stuff

angular.module('yourAwesomeApp', ['angular-underscore']);

Load API only

angular.module('yourAwesomeApp', ['angular-underscore/utils']);

Load filters only

angular.module('yourAwesomeApp', ['angular-underscore/filters']);

Load specific feature only

// load `shuffle` only
angular.module('yourAwesomeApp', ['angular-underscore/filters/shuffle']);

Usecase

From the Template

<script type="text/javascript">
  angular.module('example', ['angular-underscore']);
</script>

<body ng-app="example">
  <!-- generate 10 unduplicated random number from 0 to 9 -->
  <div ng-repeat="num in range(10)|shuffle">{{num}}</div>
</body>

From the Controller

angular.module('yourAwesomeApp', ['angular-underscore'])
.controller('yourAwesomeCtrl', function($scope) {
    $scope.sample([1, 2, 3]); // got 1, or 2, or 3.
    $scope._([1, 2, 3]); // underscore's chain, http://underscorejs.org/#chain
});

Local build

$ npm install uglify-js -g
$ uglifyjs angular-underscore.js > angular-underscore.min.js

License

(The MIT License)

Copyright (c) 2014 [email protected]

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

angular-underscore's People

Contributors

dariusk avatar floydwch avatar fraserxu avatar nvdnkpr avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-underscore's Issues

How to use it

Can you add an example and describe how to load the module.
Thanks

Make _.delay(), _.throttle(), and _.debounce() karma friendly

The three functions share the common trait that they use the native setTimeout function.

In angular, it's best practise to use $timeout instead. It offers the same signature, and on top of that it makes it possible to "short circuit time" from karma tests by calling $timeout.flush().

As far as implementation goes, I'm thinking of something along the lines of making the underscoreModule depend upon $timeout and including the three functions from underscore.js as shivs, replacing all instances of 'setTimeout' with '$timeout'.

If you approve of the idea, I could try to make it work and submit a pull request.

Sorry but...

You could just do:

myApp.filter('_', function(){
  return function() {
    var args = Array.prototype.slice.call(arguments, 0);
    var method = args.splice(1,1)[0];
    return _[method].apply(this, args);
  }
});
angular.forEach(_, function(method, name){
  // prefix all filters with '_' to prevent clobbering (such as $filter('filter') )
  myApp..filter('_'+name, function(){
    return method;
  });
});

Demo: http://plnkr.co/edit/Jq1Lg5v1GquxnqHe5hj2?p=preview

Newly introduced methods 'indexBy' and 'sample'

Hello floydsoft,

thank you for your work, especially the filter stuff works like a charm ;)
What I noticed is that your list of filters must be based on an earlier version (earlier than 1.5.2) of underscore because there are two new methods, introduced in version 1.5.2

Some of the newly introduced methods might possibly make no sense from an template view, but they still can be used as (per definition) filters in controllers using $filter (marked with an ๐Ÿ”บ )

Collections

Array

Utility

Consider a bower package?

I've been using this in my project, but we are using bower as the package manager. Have you consider to make it installable through bower?

BTW, in order to use this, I also have to include underscore in my bower.json file, I want something like angular-underscore in my json file, thanks!

Registering filters 3 times

Hello,

You are registring the filters in the underscore, the filters and the specific filter (per name) module. This means a filter with the same name is registered 3 times.
Of course you can choose what module you are loading as a dependency of an application.

I just wanted to mention that I think it's not good practice to load a filter with a certain name 3 times. And scripts like stop-angular-overrides are treating this as errors (which is good imho).

Best regards,
Tim

Uncaught ReferenceError: _ is not defined

when i import angular-underscore.js file and inject to angular module, it will have a error like this:
Uncaught ReferenceError: _ is not defined in angular-underscore.js line 157.
have any suggestion?

groupBy filter error

Error: 10 $digest() iterations reached. Aborting!

i get this when using groupBy as a filter on a small set of data (20-30 items)

<div id="container">
  <div class="item span4 well" ng-repeat="(place_type, places) in groupBy(model.places,'type')">
    <a href="#/discover/{{model.id}}/{{place_type}}"><h4>{{place_type}}</h4></a>
  </div>
</div>

More examples?

I really enjoy using Underscore and Angular together, and I was really stoked to use this for filters and whatnot, but could you toss up some more examples of how you're using it?

Gem?

Awesome. Has anyone packaged this module up as a ruby gem?

Error on minify

When we minify this code in our asset pipeline in rails, it causes an "unknown Provider eProvider" error. It looks like you might be missing the proper array notation to preserve dependency injection when names get mangled. Can you double-check this?

Problem with isolated scope

Methods which are added in to scope are not defined inside isolated scope. I previously had noticed some weird behaviour in "isSomething" methods, but now I was able to point the issue, when I had "range(1, 11)" used in ng-options. (now I know why "isEmpty" for example is not working in all of my views, reason is isolated scope.)

It worked previously when I wasn't using isolated scope, but when I made changes to the directive it stopped working. Finally I was able to narrow down the issue and made jsfiddle https://jsfiddle.net/RopoMen/sprgjnsm/

My own app is using Angular 1.2 series, but this fiddle is using 1.4.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.