Giter VIP home page Giter VIP logo

angular-data-depend's Introduction

angular-data-depend

Build Status

A toolkit for implementing complex, data heavy AngularJS applications.

Features

dataDepend allows you handle complex data dependencies via data providers and data observers.

  • It allows you to make data dependencies in explicit
  • It takes care of resolving only the required data in the correct order
  • It updates dependent data upon changes
  • It gives you feedback on the load state of the data

Overview

Use dataDepend to structure your application into providers and observers and let the library do all the rest.

function MyController($scope, Article, Comment, Authentication, dataDepend) {

  var $data = dataDepend.create($scope);

  // providers ///////////

  $data.provide('articleId', 22);
  $data.provide('currentUser', Authentication.currentUser());

  $data.provide('article', ['articleId', function(id) {
    return Article.get({ id: id }).$promise;
  }]);

  $data.provide('recommendations', ['article', 'currentUser', function(article, comments, currentUser) {
    return Article.queryRecommended({ article: article, user: currentUser }).$promise;
  }]);

  // consumers ///////////

  function updateView(article, recommendations) {
    // update current scope
  }

  // $scope.view keeps track of current loading state 
  // and provides access to loaded variable
  $scope.view = $data.observe(['article', 'recommendations', updateView]);
}

Resources

Usage

Create a new data container:

var $data = dataDepend.create($scope);

Providers

Providers compute, fetch or statically supply the application with a named data items. Register a data provider via #provide(name, definition | value). The simples provider is the static one, producing a primitive or object value:

$data.provide('articleId', 22);

The values produced by static providers may be updated via $data.set(name, value);

A dynamic provider is a function that returns either the value or a promise:

$data.provide('articleFromBackend', function() {
  return $http.get('/the-one-and-only-article').then(function(response) {
    return response.data
  });  
});

Dynamic providers may declare dependencies on other data items (in a $injector compatible format):

$data.provide('article', ['articleId', function(id) {
  return $http.get('/articles/' + id).then(function(response) {
    return response.data
  });
}]);

Observers

Observers get notified whenever a set of data items change. They track the load status of these items, trigger their evaluation and should be used as the end points to bind data items to the view scope.

Register an observer via #observe(definition):

var handle = $data.observe(['article', 'articleDetails', function(article, articleDetails) {
  $scope.article = article;
  $scope.articleDetails = articleDetails;  
}]);

Registering an observer via #observe() returns a handle to the created observer. The handle can be used to query the status of the observed data:

handle.$loaded; // false if any of the required data elements are currently loading
handle.$error;  // error if any occured during loading the observed dependencies

Notes

To re-use a data container in a child scope, a child instance bound to the specific scope should be created:

var $childData = $data.newChild(childScope);

This ensures that all observer and producer bindings registered in the child scope are properly cleaned up.

Building the Project

  1. Fork + clone the repository.
  2. Install dependencies via npm install.
  3. Build the library via grunt.

License

Use under terms of MIT license.

angular-data-depend's People

Contributors

nikku avatar romansmirnov avatar

Stargazers

 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

angular-data-depend's Issues

Deal with circular dependencies

A user may create a circular dependency by chance.
Instead of blocking or live-locking the browser window if that happenes, the dependency should be detected and an error should be thrown.

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.