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
Add HyphenJs script to your html file, usually it should looks like below (when installed with npm)
Prerequisites
Hyphen JS require Angular 1.x and Underscore.
Add Hyphen dependency to Angular app
var exampleApp = angular;
Defining example Hyphen models
jsHyphen; jsHyphen; jsHyphen;
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: "test1@email.com" 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;
- baseUrl is prefix added to all api calls
Calling api rest methods and binding to data
Getting all users
HyphenUsersapi; //save method saves the result in data model
Binding to model data
<!--getting user with id=1--> {{Hyphen.Users.provider.findOne({_id: 1})}} <!--displaying user full name (getFullName method is defined on user model)--> {{Hyphen.Users.provider.findOne({_id: 1}).getFullName()}}
Updating user with _id=1
HyphenUsersapi;
Get users and save them in Users collection
HyphenUsersapi;
Getting all users with name 'Alex'
{{Hyphen.Users.provider.where({'name': 'Alex'})}}
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.