View on GitHub

NorJS

AngularJS / NodeJS project template


NorJS

NorJS is a full stack AngularJS / NodeJS project template for commercial projects.

Features

Click titles below for more details.

Development environment. Full working development setup.

You can instantly start writing your app instead of boilerware to run your app.

Pre-configured Webpack, Babel, ES6, NodeJS, Mocha, Jasmine, etc.

Automatic reload from changes in the file system for fast development cycle.

Unit test environment. Well designed unit testing environment.

Karma & Jasmine pre-configured.

Including both unit & system tests.

REST backend and micro services. Sample architecture and usable micro services.

Multiple REST API services available and ready to use.

ExpressJS + NodeJS example. Sample REST service.

Authentication backend using standard Node.js and ExpressJS.

Usable Micro Services. Ready to use production ready micro services.

Working micro services built with Sendanor Cloud-Backend.

Email Authentication Service Verify and authenticate users using only their email addresses.

Verify and authenticate users into your system using only email addresses.

SMTP Service Send email messages.

Simple REST interface to a SMTP server for sending email.

Good practices demostrated. Example implementations for ES6, AngularJS and NodeJS.

Learn how to take full advance from ES6 while writing AngularJS and NodeJS.

We also provide easy to use utilities like abstract classes, interfaces, views, components, and services which automate common tasks for all classes.

Data model implementation. Shallow-CoW data models.

Our implementation for JSON-configurable, shallow copy on write, data models – with web based interface to manage it.

You may create your own data models using traditional abstract classes in ES6 or use our dynamic JSON-style configuration file, which comes with a web interface to edit it.

These models have immutable getters and optional setters for properties.

These setters will create shallow copies of the original object and only from the parts that actually changed. We gurantee that the original data object passed to the Model class will not be changed, and only shallow copies are made when inner properties change.

Interface support. Protocols style implementation for ES6.

Our utilities rely on our implementation of object interfaces. It is similar to the proposed Protocols feature in EcmaScript, which also uses Symbols.

const listInterface = Interface.create({
  name: 'list', // This is just for prettier error messages.
  methods:{

    // Function arguments are not verified yet. As of now there can be anything here. 
    // You can also use your own Symbol here.
    getList: 'function (arg1, arg2)'

  }
});

class FooList {

  [listInterface.getList] (arg1, arg2) {
    return [];
  }
  
}
Interface.assert(listInterface, FooList);
Component library. Build apps with our well designed, fast and scalable components.

Easy to use UI components for most general use cases.

Table view. Generic component for pageable table views.

This is a generic view component to create pageable table UI views for any resources implementing our interfaces.

You start by implementing a service – like our modelService – which implements pageableInterface and tableRowInterface for items, and then only thing left for you to do is to configure a state like:

{
    "name": "models",
    "options": {
      "url": "/models",
      "component": "tableView",
      "resolve": {
        "content": "modelService"
      }
    }
}

You may also use it directly as a component:

<table-view content="$ctrl.modelService"></table-view>
Navigation component. Easy menu component.
<nr-nav collection="$ctrl.nav.items" options="$ctrl.nav"></nr-nav>
$onInit () {
    super.$onInit();
    this.nav = {
      items: [
        {
          id: "main",
          icon: "home",
          label: "Home",
          isVisible: () => this.hasSession()
        }
      ],
      isVisible: item => item.isVisible()
    };
  }
Input components. Common input components.

All of our input components require AngularJS ng-model, so you can use ng-disabled, ng-readonly, etc.

<nr-form submit="$ctrl.login($ctrl.model)">
    <section>
        <nr-text label="Username" ng-model="$ctrl.model.username"></nr-text>
    </section>
    <section>
        <nr-password label="Password" ng-model="$ctrl.model.password"></nr-password>
    </section>
    <section>
        <nr-submit-button label="Login"></nr-submit-button>
        <nr-reset-button label="Reset"></nr-reset-button>
    </section>
</nr-form>
Text input component. Text input component.
<nr-text label="Username" name="username" ng-model="$ctrl.model.username"></nr-text>
Textarea input component. Textarea component.
<nr-textarea label="Description" name="description" ng-model="$ctrl.model.description"></nr-textarea>
Password input component. Password input component.
<nr-password label="Password" name="password" ng-model="$ctrl.model.password"></nr-password>
Checkbox input component. Checkbox input component.
<nr-checkbox label="Remember me" name="checkbox" ng-model="$ctrl.model.rememberMe"></nr-checkbox>
Icon component powered with Font-Awesome.

Create icons with <nr-icon type="home 2x"></nr-icon>.

Custom components. Your specification, our implementation.

We can implement custom components for your specific needs. Contact us.

Event-based directives. Like AngularJS directives, but without watchers.

Scope event based equivalent of ng-if, ng-show, ng-class, etc.

Our versions will not need watchers to operate when an event name is configured.

Usage:

<div nr-if="$ctrl.hasData()"
     nr-if-on="$ctrl.HAS_DATA_EVENT"
     nr-if-scope="$ctrl.$scope"></div>
  • nr-if="..." – This expression works exactly like ng-if but supports additional opt-in features.
  • nr-if-on="eventName" – You can opt-in to use Scope event listener instead of Scope watcher to detect when the expression must be evaluated again. The expression will be evaluated once when the directive is first initialized and again only when this event is broadcast on the scope.
  • nr-if-scope="$ctrl.$scope" – You can specify where this listener or watcher is installed
Improve performance with faster digest loops. Suspend watchers for hidden scopes.

This is a equivalent of ng-show and ng-hide, which will suspend scope watchers for this element if it is hidden, and resume watchers after the element becomes visible again.

<div ng-if="true"
     nr-show="$ctrl.hasData()"
     nr-show-on="$ctrl.HAS_DATA_EVENT"
     nr-show-scope="$ctrl.$scope"
     nr-show-suspend-watchers></div>

Note! You need to create a child scope with ng-if="true", otherwise this would suspend current scope (eg. parent).

Project website sample. Publish and blog about your project using Github Pages.

Project website sample using Github Pages and jekyll.

Push your changes to the master branch and your project website is automatically updated and hosted at Github. (It’s actually this website.)

No vendor lock-in. Everything is published with a free open source license.

The project template (client, server and the website) material is provided under a MIT license.

Please contact us for other licensing options.

Agile development. You can participate, too.

This project is in active development. We have a small team of professionals working on it.

Our customers can also participate on Github and affect the path we’re taking.

Commercial support. We are available to help you.

We have years of experience working on world class AngularJS applications and we can help you, too.

Without a general agreement contract our hourly fee is 200 euros/hour.