UNPKG

nodulator

Version:

Complete NodeJS Framework for Restfull APIs

309 lines (216 loc) 7.8 kB
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