npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-once

v0.1.9

Published

angular-once =====================

Downloads

766

Readme

angular-once

One time bindings for AngularJS.

Why?

AngularJS is a great framework with many superb features, but when it is used to display large amounts of data, it can become quite slow due to it's binding mechanism.

When you bind data via {{ }} or ng-bind directives, angular sets up watch under the cover which is being executed every time an angular event loop triggers (for example after $http request, or keypress). It's fine when the number of bindings (pieces of dynamic information you want to display) is relatively small up to a few hundred, but when that number increases, page can become unresponsive; expecially on low-end devices (it was Surface RT in my case, and reason to create that project, it was painfully slow even for 200 bindings).

There isn't much you can do about it, except displaying less data (via paging for example), but it's not always the case. Should we wait till browsers implement Object.observe and AngularJS will use it so we get 40x speed-up? We could, but when your data is readonly (and in many cases it is) you can use this project which sets up one time bindings and doesn't create any watchers which is incredibly fast!

bottom line: If you use AngularJS, have performance issues and need to display lots of readonly data, this project is for you!

Installation

$ bower install angular-once

or copy once.js file.

Usage

Prerequisites
  • reference once.js file
  • add once module as adependency to your app (angular.module('yourApp', ['once']))

Lets look at this standard AngularJS code snippet:

<ul>
	<li ng-repeat="user in users">
	  <a ng-href="{{ user.profileUrl }}">{{ user.name }}</a>
		<a ng-href="{{ user.profileUrl }}"><img ng-src="{{ user.avatarUrl }}"></a>
		<div ng-class="{'formatted': user.description}" ng-bind="user.description"></div>
	</li>
</ul>

Now given 100 users (600 watchers), the list is not the only information on the page in most cases. If user's data needs to be only displayed, and not edited inline, we don't need to set up watchers in a ng-repeat directive, especially as the user goes back and forth within the app many times as the list is being refreshed on each display as controller in angular are transient.

Let's look at the same example using angular-once:

<ul>
	<li ng-repeat="user in users">
	  <a once-href="user.profileUrl" once-text="user.name"></a>
		<a once-href="user.profileUrl"><img once-src="user.avatarUrl"></a>
		<div once-class="{'formatted': user.description}" once-text="user.description"></div>
	</li>
</ul>

Number of watchers? 0 (actually 1 as angular uses a separate watch for the ng-repeat directive itself).

IMPORTANT: Built in angular ng-href and ng-src directives support interpolation ({{ }} notation), angular-once doesn't due to performance reasons (avoid setting up watchers).

API

List below contains comparison of angular-once directives ( one time bindings ) with built in angular directives ( two-way bindings ).

| angular-once | native angular equivalent | example usage | | ------------- |:-------------:|:-----:| | once-text="value" | ng-bind or {{ }} |<ANY once-text="user.name"></ANY>| | once-html="value" | ng-bind-html |<ANY once-html="user.description"></ANY>| | once-src="value" | ng-src |<img once-src="user.avatarUrl" />| | once-href="value" | ng-href |<a once-href="user.websiteUrl" ></a>| | once-title="value" | ng-attr-title |<ANY once-title="user.name"></ANY>| | once-alt="value" | ng-attr-alt |<img once-alt="user.name" />| | once-id="value" | ng-attr-id |<ANY once-id="user.name" /></ANY>| | once-if="condition" | ng-if |<ANY once-if="user.isAdmin" /></ANY>| | once-class="name:cond" | ng-class |<ANY once-class="{'p': user.admin}" /></ANY>| | once-style="value" | ng-style |<ANY once-style="{color:blue}" /></ANY>| | once-show="condition" | ng-show |<ANY once-show="user.isAdmin" /></ANY>| | once-hide="condition" | ng-hide |<ANY once-hide="user.isAdmin" /></ANY>| | once once-attr-*="value" | ng-attr-* |<ANY once once-attr-tooltip="user.name" /></ANY>|

Important:

One important thing to note is that when using angular-once and bound data is undefined, it creates a watch which waits until the data is available (promise is resolved). Once the promise is resolved, the watch is removed. Reason for that is to be able to use it with data which is not yet available, but still readonly.

In case bound data contains static and dynamic part, for example once-src="'http://placekitten.com/'+ kitty.size" and kitty-size isn't immediately available, you can use the once-wait-for directive to wait untill kitten.size is fetched, so it will look like: once-src="'http://placekitten.com/'+ kitty.size" once-wait-for='kitty.size'

Credits

Thanks both to @Pasvaz for bindonce and @abourget for $watch fighters, as both modules were inspiration and starting point for creating this module.

Similar projects

  • bindonce - similar, but requires additional bindonce directives which wrap other bindonce directives.
  • watch fighters - similar, but doesn't handle case when there is no data yet to bind, simply binds nothing, so doesn't work with promises.

License

WTFPL