nooljs ( Beta)

Introduction

Full stack JavaScript framework built using the famous open sources libraries.. Nodejs, Angularjs, expressjs, npm, socket-io.

• Easy to build complex data driven JavaScript applications with minimum coding.
• Support multiple data connections suck as ms-sql, MySQL, PostgreSQL, and Mondodb.
• Real time framework build top of Express-js and socket-io
• The client side is powered by the Angularjs. The layout can be built using the Angularjs tags and elements.
• Modularized layout to simplify the comlex web pages.
• Can be mixed both Express-js and socket-io

Quick Start

1. Install nooljs with npm

$ npm install nooljs -g

2. Create new nooljs project by running command $ nooljs It will ask project name. enter the project name( example testprj). It will create new folder for the project and sample application.
3. Go the new project folder

$ cd testproj

4. Update the npm dependency packages

npm update

5. Run the application

node app.js

Tutorials & Blogs

Tutorials & Blogs are available at https://nooljs.blogspot.ca/

Source Code

Source codes can be downloaded from https://github.com/nooljs/nooljs

API Document

For the full document please visit http://nooljs.github.io/nooljs/

Folder Structure

* config -- Configuration folder
* layout - Contains all the layout files
* public -- Public files ( js, image)
* server -- All the server side JavaScript files 
* servermethod -- Put all the server methods here 

Layout

The Layout is heart of the nooljs project. Each page/module of the application can be defined as layout. It should be keep inside the layout folder.

 <nl-template id="store-edit-template" nl-permission="store-edit" nl-parent="main-content" >
 </nl-template>
<nl-server-script>
</nl-server-script>
<nl-client-script>

The layout file contains three parts :

• nl-template - Html template for the module
• nl-server-script - Sever side javascript code for this module
• nl-client-script - Client side javascript code for this module

nl-template

nl-template contains all the html for the given module. It can be easily injected into html page or layout file.

The sample layout is shown below:

<nl-template id="store-edit-template" nl-permission="store-edit" nl-parent="main-content" >
<button class="button button-block button-positive"  id="item-edit-back"
	  nl-click-redirect="{'url':'store-template'}" >    Back
</button>
<h1 >{{store.StoreName}}  Edit</h1>
 <ion-content class="has-header  has-footer">
<ion-list nl-server-data="getStore"  nl-post-client="assignStoreName">	
 <ion-item>
   <label class="item-input">
    <span class="input-label">Store name</span>
    <input type="text" ng-model="store.StoreName" />
  </label>
   <ion-item>
   <label class="item-input  item-select">
    <span class="input-label">Country</span><div nl-db-data="exec  dbo.usp_GetCountries"   nl-db-model="countries"  nl-cahche="sessionStorage">
      <select ng-model="store.Country"   >
						 <option  ng-repeat="country in countries" value="{{country.CountryCode}}"  ng-selected="country.CountryCode==store.Country">{{country.CountryName}}</option>
       </select>
	   </div>
  </label>
   </ion-item> 
</ion-list>
 </ion-content>
</nl-template>
<nl-server-script>
{
  getStore:
  {
	model:"store",
    db:
	{
		query:"exec Admin_GetStoreInfo {{StoreId}}",
		resultType:"single"
	}
  }
}
</nl-server-script>
<nl-client-script>
{
  assignStoreName:function ($scope)
  {
	console.log(" enter assignDefaultStore  function ");
	$scope.$root.storeName = $scope.store.StoreName;
  }
  }
</nl-client-script>