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-360-no-scope

v0.1.2

Published

$watch your controllerAs controller's data without injecting $scope

Downloads

4

Readme

angular-360-no-scope

What

$watch your controllerAs controller's data, without injecting $scope.

How do I use it

  • npm install angular-360-no-scope
  • Include angular-360-no-scope.js in your app
  • Add a dependency on angular-360-no-scope to your app module.
  • Write your controller as usual, but avoid $scope
  • Utilize this.$watch() as needed

Why

Preface

When using angular's controllerAs, a controller is given a name and a reference to the controller is placed on the $scope. When writing the logic for the controller, data is typically stored directly on the controller itself, not on the $scope. When referencing the data from a template, the data is namespaced by the controllerAs name.

This provides various benefits, which help us write cleaner, more maintainable code. See the style guides by Todd Motto and John Papa for more details.

Still need $scope capabilities

One oddity of writing ControllerAs code is that we no longer tend to have the $scope reference handy. Besides being a tempting dumping ground for data, $scope also provides some important funtionality that we occasionally need such as $watch (and $on, $broadcast, and $emit`).

A simple mechanism to provide those functions is to inject $scope into the controller function. Then you may do something like: $scope.$watch(function() { return ctrl.someData }, callback) to watch your controller's data. This is a little clunkier than watching scope data, i.e., $scope.$watch("some.scope.variable", callback). Additionally, if you want to watch nested attributes whose parents may or may not be initialized, we might need to add yet another dependency on $parse so we may do $scope.$watch(function() { return $parse("some.controller.variable")(ctrl); }, callback);.

360-no-scope makes this easier

With 360-no-scope, your controllers are decorated, and augmented with a $watch function. The $watch function is bound to the controller instance. This allows you to write ctrl.$watch("some.controller.variable", callback) much like the simple $scope.$watch you are already familiar with.

Sample Controller

app.controller("MyController", function () { // HERE, no $scope is necessary
  var ctrl = this;
  ctrl.watchCount = 0;
  ctrl.foo = {};
  
  // Here is the "scope-less" watch registration.  Watching "ctrl.foo.bar.baz"
  ctrl.$watch("foo.bar.baz", callback);  // <-- HERE, $watch something on the controller
  function callback (newVal, oldVal) { console.log("WatchCount: " + ctrl.watchCount++, newVal, oldVal); }
}

How does it work?

This lib decorates $controllerProvider.register and the $controller service. When a controller is registered with $controllerProvider, or when a controller is instantiated with the $controller() service, the controller fn passed in is augmented with a $watch function (as well as with $on, $broadcast, and $emit).

360-no-scope augments the controller fn by wrapping it in a surrogate controller which is executed instead. The surrogate is annotated with the same injectable dependencies as the real controller fn. Then, $scope is added to the dependency list. When angular instantiates the controller surrogate, the surrogate always gets $scope. It then builds the $scope passthrough functions and adds them to the real controller's prototype. Finally, it instantiates and returns the real controller.