Nodulator-angular NPM

Nodulator-Angular

AngularJS implementation and facilities for Nodulator.

Needs:

Released under GPLv2

Concept

Provides class for angular's directives, services, controllers and factories. Allow inheritance of angular behaviour, and automatic link between services and Nodulator.Resources thanks to Nodulator-Socket (socket-io)

Features

Give CoffeeScript style classes for each angular functions
Socket-io implementation for angular
Nodulator.ResourceService to link Nodulator.Resource to angular as a service
Automatic adding of views as templates
Automatic link between directives and templates (template file must have same name as directive)
Automatic appending of ng-app="app" to body tag

Installation

You can automaticaly install Nodulator, Nodulator-Angular and every dependencies by running

$> sudo npm install -g Nodulator
$> Nodulator install angular

Or you can just run npm :

$> npm install nodulator nodulator-assets nodulator-socket nodulator-angular

Basics

    Nodulator = require 'nodulator'
    Socket = require 'nodulator-socket'
    Assets = require 'nodulator-assets'
    Angular = require 'nodulator-angular'

    # Default config, can be omited
    Nodulator.Config
      servicesPath: '/client/services'
      directivesPath: '/client/directives'
      controllersPath: '/client/controllers'
      factoriesPath: '/client/factories'
      templatesPath: '/client/views'

    # Required for Angular module to work
    Nodulator.Use Socket

    Nodulator.Use Assets

    Nodulator.Use Angular

    Nodulator.Run()

When main page is loaded, main Nodulator scripts adds ng-app="app" to body tag in order to initialize angular application.

Client side

Base

Services

Services can be created easely. First Nodulator.Service() argument is the service name. Nodulator will append 'Service' at the end of this name. For a service name 'test', its real name will be 'testService' Latter arguments are for dependency injection. Each one will be added to class :

    class TestService extends Nodulator.Service 'test', '$http'

      Test: ->
        console.log 'Test'
        @$http.get(...);

    #Init only if you want to actualy create the service.
    #Omit if you only want to inherit from it.
    TestService.Init()

Directives

For the moment, every directive is {restrict: 'E'}, and cannot be manualy configurated. (Except if you want to override Directive._Body() behaviour) Again, first argument is the directive name, and the latters are for dependencies injections.

For directive test, it will look for template in config.viewPath for file of same name (test.jade for exemple)

The context of the class will be attached to angular scope. This way, the following directive...

    class TestDirective extends Nodulator.Directive 'test', 'testService'

      foo: 'bar'

      Foo: ->
        @foo = 'bar2'
        @testService.Test()

    TestDirective.Init()

... become ...

    app.directive 'test', ['testService', (testService) ->
      return {

        restrict: 'E'

        templateUrl: 'test-tpl'

        link: (scope, element, attrs) ->

          scope.testService = testService

          scope.foo = 'bar'

          scope.Foo = ->
            scope.foo = 'bar2'
            scope.testService.Test()

      }
    ]

Nice uh ? Beware, don't put to many things ~~in your sister~~ in the injections, they will all be injected in the scope ! (You probably don't want this, and a solution is currently in the pipe.)

You can also use compile instead of link by defining a @Pre() and/or a @Post() method.

    class TestDirective extends Nodulator.Directive 'test'

      Pre: ->
        @name = 'test'

      Post: ->
        @foo = ''

        @test = ->
            @foo = 'bar'

    TestDirective.Init()

Factories

Just as Services, factories are easy to declare :

    class TestFactory extends Nodulator.Factory 'test', '$http'

      Test: ->
        console.log 'Test'
        @$http.get(...);

    TestFactory.Init()

Controllers

Just like directives, Controllers have their context binded to the $scope.

    class TestController extends Nodulator.Controller 'test', '$http'

      foo: 'bar'

      Test: ->
        console.log 'Test'
        @foo = 'bar2'

    TestFactory.Init()

Extended

Socket

A socket is a Nodulator.Factory implementing Socket.io For the moment, a socket is always instanciated in each project. Future configuration will be disponible.

A socket has 2 methods : @On() and @Emit(), and apply changes to scope automaticaly.

ResourceService

A Nodulator.ResourceService inherits from Nodulator.Service and inject automatically $http and socket. Also, it binds the socket to listen to the server Resource with the same name. It provides 5 methods :

    class TestService extends Nodulator.ResourceService 'test'

        OnNew: (item) ->
          # Called when a new resource instance is created

        OnUpdate: (item) ->
          # When a resource instance is updated

        OnDelete: (item) ->
          # When a resource is deleted

        List: (done) ->
          # Put every records in @list

        Fetch: (id, done) ->
          # Fetch particular model and put it in @current

        Delete: (id, done) ->
        Add: (blob, done) ->
        Update: (blob, done) ->

Project Generation

By calling $> Nodulator init with this module installed,

It creates the following structure if non-existant:

client
├── controllers
├── directives
├── factories
├── index.coffee
├── services
└── views

And it gets AngularJS from official website and puts it in /client/public/js

TODO

Implement Nodulator.Controller
Find a way to don't attach angular object ($http, $rootScope,...) to local directive scope
Remove socket.io hard essential link, and make it more modular.