Skip to content

An angular module for using the sails socket.io api in angular2 (@angular)

License

Notifications You must be signed in to change notification settings

joeherold/angular2-sails

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

76 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

important

This repo is no longer maintained! We switched to React JS completely. Feel free to fork this repo.

angular2-sails

An angular module for using the sails socket.io api in angular2 (@angular)

Read the full documentation at: Documentation @ gitbook.com

INDEX

Usage with angular-cli

Angular-cli is a great angular2 app starter for creating fancy angular stuff.

Here I will describe on how to install and use it:

1. Installing

install the package with the node package manager (npm)

npm install --save angular2-sails

back to top

2. Using it

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 { }

back to top

working with it

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.

back to top

IMPORTANT NOTES

io (sails.io.js)

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:

by script tag

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>

angular-cli (webpack version)

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
      ],
      ...
    }
  ],
  ...
}

plain webpack

When you are using webpack, you also could add the sails.io.js file to your project by installing the library and requireing it.

back to top

About

An angular module for using the sails socket.io api in angular2 (@angular)

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published