This repo is no longer maintained! We switched to React JS completely. Feel free to fork this repo.
An angular module for using the sails socket.io api in angular2 (@angular)
Read the full documentation at: Documentation @ gitbook.com
- Usage with angular-cli
- Installing
- Using it
- Working with it
- Example
- Example with async pipe
- Important notes to io.js (sails.io.js)
Angular-cli is a great angular2 app starter for creating fancy angular stuff.
Here I will describe on how to install and use it:
install the package with the node package manager (npm)
npm install --save angular2-sails
in app.module.ts import and register the angular2-sails module like that:
... import { AppComponent } from './app.component'; import {SailsModule} from "angular2-sails"; @NgModule({ declarations: [ AppComponent ], imports: [ ..., SailsModule.forRoot() ], bootstrap: [AppComponent] }) export class AppModule { }You inject the service by the constructor where you want to use it.
constructor(private _sailsService:SailsService) { }first you have to connect your service:
ngOnInit() { this._sailsService.connect() }you can pass in an Url or Options, where to connect to
ngOnInit() { this._sailsService.connect("http://localhost:1337"); // or letl opts = { url: "http://localhost:1337", transports: ['polling', 'websocket'], headers: {...}, ... } this._sailsService.connect(opts); }for more information, please visit sailsjs.org Documentation for SailsSocket Properties
this is handy, when you develop with angular-cli (localhost:4200) and the ng serve command and your sails app runs separately e.g on localhost:1337
The following methods are implemented in the SailsService and will always return you an Observable:
- get(path,data):Observable
- post(path,data):Observable
- put(path,data):Observable
- patch(path,data):Observable
- delete(path,data):Observable
- request(options):Observable
- on(eventEntity):Observable
for more information, please visit sailsjs.org Documentation for SailsSocket Methods
You then have to subscribe to that Observable, to get the data.
I was asked couple of times, why one gets an error like (io is not defined). So to clear things up a bit. The io library (sails.io.js) is not part of this module. So that's why you have to add io (sail.io.js) yourself to your project. Otherwise io will not be defined as a global varable and will not be accessible.
There are several ways to do so:
One is to link the sail.io.js in your index.html or layout.ejs as a simple script tag.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Sailsapp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root>Loading...</app-root> <!-- add the io library --> <script src="/assets/sails.io/sails.io.js"></script> </body> </html>When you are using angular-cli (what is my recommendation), then you can add the file to the scripts array of your angular-cli.json.
// ANGULAR_CLI_ROOT/angular-cli.json { "project": { ... }, "apps": [ { ... "styles": [ "styles.less" ], "scripts": [ "../path/to/sails.io.js" //this is where you may add the io library ], ... } ], ... }When you are using webpack, you also could add the sails.io.js file to your project by installing the library and requireing it.