HyphenJs

HyphenJs, an Angular module made to simplify data model creation for Angular app.

Installation

If you'd like to use npm, it's as easy as:

npm install hyphen-js --save

bower install hyphen-js --save

or download source code with minified version from git hub: [source code] (https://github.com/blazejgrzelinski/hyphen-js)

Add HyphenJs script to your html file, usually it should looks like below (when installed with npm)

<script src="node_modules/hyphen-js/dist/hyphen-js.js"></script>

Prerequisites

Hyphen JS require Angular 1.x and Underscore.

Add Hyphen dependency to Angular app

var exampleApp = angular.module('example', ['jsHyphen']);

Defining example Hyphen models

jsHyphen.factory('Users', [function () {
    var User = function (data) {
    };

    User.prototype.getFullName = function () {
        return this.user_first_name + " " + this.user_last_name;
    };

    return User;
}]);

jsHyphen.factory('Projects', [function () {
    var Project = function () {

    };

    return Project;
}]);

jsHyphen.factory('Teams', [function () {
    var Teams = function () {

    };

    return Teams;
}]);

Hyphen rest calls and models configuration

var hyphenConfiguration = {
 "Teams": {
     model: "Teams",
     key: "_id",
     rest: [{name: "getAll", url: "/teams", method: "get"}],
 },
 "Users": {
     model: "Users",
     key: "_id",
     embedObjects: {projects: "Projects", teams: "Teams"},
     rest: [
         {name: "signIn", url: "/users/login", method: "post"},
         {name: "update", url: "/users/update", method: "put"},
         {name: "create", url: "/users/create", method: "post"},
         {name: "getAll", url: "/users", method: "get"},
         {name: "delete", url: "/users/:id", method: "delete"},
         {name: "getOne", url: "/users/:id", method: "get"},
         {name: "getUserWithParams", url: "/users/:userId/project/:projectId?age=:age", method: "get"},
         {name: "getUserTwoParams", url: "/users/:id/project/:projectId", method: "get"},
         {name: "removeAll", url: "/users/remove_all", method: "post"},
         {name: "getUserProjects", url: "/users/user_projects", method: "get"},
         {name: "getUserProjectsTeams", url: "/users/user_projects_teams", method: "get"},
         {name: "getUserComplexParams", url: "/users/1/project/3?name=blazej&age=100", method: "get"},
     ],
 },
 "Projects": {
     model: "Projects",
     key: "_id",
     embedObjects: {teams: "Teams"},
     rest: [
         {name: "create", url: "/projects/create", method: "post"},
         {name: "getAll", url: "/projects", method: "get"},
         {name: "removeAll", url: "/projects/remove_all", method: "post"},
     ],
 }
};

* model - point the model for the entity
* key - key field
* embedObjects - hyphen js will traverse the data and automatically populate the models

For example for following json which is User entity, it will create one user, two projects and one team

 {
             "_id": 1,
             user_email: "[email protected]",
             user_first_name: "Blazej",
             user_last_name: "Grzelinski",
             projects: [{_id: 100, name: "Hyphen project tests"}, {
                 _id: 200,
                 name: "Hyphen projects",
                 teams: [{_id: 10, name: "testTeam"}]
             }]
         }

Initializing Hyphen

  Hyphen.initialize({
    model: hyphenConfiguration,
    baseUrl: "",
});

• baseUrl is prefix added to all api calls

Calling api rest methods and binding to data

Getting all users

     Hyphen.Users.api.getAll().save();
     //save method saves the result in data model

Binding to model data

     <!--getting user with id=1-->
     <div>{{Hyphen.Users.provider.findOne({_id: 1})}}</div>
     
     <!--displaying user full name (getFullName method is defined on user model)-->
     <div>{{Hyphen.Users.provider.findOne({_id: 1}).getFullName()}}</div>
    

Updating user with _id=1

     Hyphen.Users.api.update({_id: 1}, user).save();

Get users and save them in Users collection

    Hyphen.Users.api.getUsers().save("Users");

Getting all users with name 'Alex'

     <div>{{Hyphen.Users.provider.where({'name': 'Alex'})}}</div>

For more examples please check test folder.

To start tests please run:

• karma start

You can bind to Hyphen "findOne" and "where" as the data are indexed and will not slow down your app.