Search code examples
javascriptangularjsforerunnerdb

AngularJS and ForerunnerDB binding


so I'm making a client/browserside only app. So I've got the ForerunnerDB into the rootscope as it says about in the Forerunnerdb documentation. I then load any stored data for a collection, and if not found then load some from a JSON file.

Now my issue is how to bind Forerunner and use it with AngularJS directives. I ideally don't want to have another object to hold everything a second time so I can use directives such as repeat with it then update the collection after dealing with the object.

I have seen Forerunner does have its own Binding/Wrapping, but that comes with its own templating whereas I would just prefer to use angular. Is there any way I can do this?

Thank you for your help.


Solution

  • ForerunnerDB supports AngularJS and you can bind directly to Angular (without using a different templating engine). Inside your controller where you are defining data in your $scope, you can tell ForerunnerDB to bind its data to the scope via a variable name. In the example below we have a collection called "item" that holds a bunch of items, then we ask ForerunnerDB to bind that data to the $scope.items variable:

    db.collection('item')
        .ng($scope, 'items');
    

    Now in your template you can access the items in the normal Angular way. Changes to the "item" collection will be automatically reflected in your Angular views.

    You can do the same for ForerunnerDB views as well e.g.

    db.view('item').ng($scope, 'items');
    

    P.S. Make sure you include the AngularJS ForerunnerDB plugin since Angular support is optional. The plugin (in ./js/dist/fdb-angular.min.js) should be included after loading the ForerunnerDB main file in your HTML.

    Source: I wrote ForerunnerDB