nodulator
Version:
Complete NodeJS Framework for Restfull APIs
309 lines (216 loc) • 7.8 kB
Markdown
Nodulator-Angular
=================
AngularJS implementation and facilities for Nodulator.
Needs:
- [Nodulator](https://github.com/Champii/Nodulator)
- [Nodulator-Assets](https://github.com/Champii/Nodulator-Assets)
- [Nodulator-Socket](https://github.com/Champii/Nodulator-Socket)
Released under [GPLv2](https://github.com/Champii/Nodulator-Angular/blob/master/LICENSE.txt)
## 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
- Automatic ResourceService instantiated for each Resources on server
- Automatic directive creation on template
- 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
___
## JumpTo
- [Installation](#installation)
- [Basics](#basics)
- [Client Side](#client Side)
- [Base](#base)
- [Services](#services)
- [Directives](#directives)
- [Factories](#factories)
- [Controllers](#controllers)
- [Extended](#extended)
- [Socket](#socket)
- [ResourceService](#resourceservice)
- [Coding Rules](#codingrules)
- [Project Generation](#project-generation)
- [TODO](#todo)
- [Changelog](#changelog)
___
## 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
```coffeescript
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 :
```coffeescript
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
Again, first argument is the directive name, and the latters are for dependencies injections.
By default, every directive is `{restrict: 'E'}`. You can override or add properties by passing an object somewhere in the dependencies list.
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...
```coffeescript
class TestDirective extends Nodulator.Directive 'test', 'testService'
foo: 'bar'
Foo: ->
@foo = 'bar2'
@testService.Test()
TestDirective.Init()
```
... become ...
```coffeescript
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.
```coffeescript
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 :
```coffeescript
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.
```coffeescript
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 :
```coffeescript
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) ->
```
___
### Coding Rules
One directive by file. This is important for the automatic directive creation based on template.
___
### 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
- Nodulator-Backoffice ?
- 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.
___
## Changelog
XX/XX/15: current
- Added capacity to override default Directive parameters
- Removed reference to UnderscoreJS
- InjectViews is now called from assets to fit invoked site
- Adaptation to work with the new 'site' functionality from Assets
- Auto added missing directive for given template
- Auto added missing resource service for given resource when invoked
15/02/15: v0.0.10
- Added Controller
07/01/15: v0.0.9
- Fixed bug in project generation
03/01/15: v0.0.8
- Updated README
02/01/15: v0.0.7
- Updated `exemples/todo`
02/01/15: v0.0.6
- Improved README
- Added `ng-app="app"` to `body` tag
- Adapted to `Nodulator-Assets` change