Awesome

FieldDB Angular

A library of Angular components which can be reused to create new widgets or dashboards that connect/display/interact with FieldDB data

Getting Started

In the browser

Install the module with: bower install fielddb-angular --save

Or, download the production version, optional vendor libraries, and the optional html templates.

In your app load the script.js and optionally:

vendor.js packages together all the dependancies for fielddb-angular, or you can use the copies in your own app if they are already there (see bower.json for a list of fielddb-angular's dependancies)
templates.js if you want to use use some or all of the default tempaltes, or you can declare your own in your own project as long as they have the same name (eg, a custom user.html):

<link rel="stylesheet" href="/bower_components/fielddb-angular/dist/styles/vendor.css" />
<link rel="stylesheet" href="/bower_components/fielddb-angular/dist/styles/main.css" />

<script src="bower_components/fielddb-angular/dist/scripts/vendor.js"></script>
<script src="bower_components/fielddb-angular/dist/scripts/scripts.js"></script>
<script src="bower_components/fielddb-angular/dist/scripts/templates.js"></script>

  angular
  .module('myAppWhichUsesFieldDB', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'fielddbAngularApp'
  ])
  .config(function($routeProvider, $locationProvider) {
    // $locationProvider.html5Mode(true);

    $sceDelegateProvider.resourceUrlWhitelist([
      // Allow same origin resource loads.
      'self',
      // Allow loading from outer domain.
      'https://*.example.org/**',
      'http://*.yourdomain.ca/**'
    ]);

    if (FieldDB && FieldDB.Router) {
      for (var when in FieldDB.Router.routes) {
        FieldDB.Router.routes[when].angularRoute.controller = 'FieldDBCorpusPagesController';
        $routeProvider.when(FieldDB.Router.routes[when].path, FieldDB.Router.routes[when].angularRoute);
      }
      if (FieldDB.Router.otherwise) {
        $routeProvider.otherwise(FieldDB.Router.otherwise);
      }
    }
  });

Examples

You can find more examples on how to use each component/directive in the specs directory.

To show a corpus's details:

<div data-fielddb-corpus json="corpus"></div>

To show a corpus term's of use:

<div data-fielddb-corpus-terms-of-use json="corpus"></div>

To show a team's profile:

<div data-fielddb-user json="team"></div>

To show a login/logout button:

<div data-fielddb-authentication json="authentication"></div>

To show an import widget:

<div data-fielddb-import json="{type: 'users'}"></div>

<div data-fielddb-import json="{type: 'participants'}"></div>

<div data-fielddb-import json="{type: 'datum'}"></div>

To show a document of any type (it will autoguess)

<div data-fielddb-doc json="doc"></div>

More directives....

More sample use of directives....

Contributing

Get the source code from https://github.com/OpenSourceFieldlinguistics/FieldDB. (https://github.com/OpenSourceFieldlinguistics/bower-fielddb-angular is only for hosting the bower compiled version)

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Also, please don't edit files in the "dist" subdirectory as they are generated via Grunt. You'll find source code in the "lib" subdirectory!

Release History

v2.14.0 iteration 2 of psycholinguistics dashboard (example at https://github.com/ProjetDeRechercheSurLecriture/DyslexDisorthGame/tree/master/angular_client)
v2.24.0 iteration 11 of psycholinguistics dashboard (example at https://github.com/ProjetDeRechercheSurLecriture/DyslexDisorthGame/tree/master/angular_client)