Git Product home page Git Product logo

sailsjs-angularjs-bootstrap-example's Introduction

sailsjs-angularjs-bootstrap-example

A suite of examples written for Sails.js, AngularJS, and Twitter Bootstrap.

No Maintenance Intended

#Notice The master branch is currently using an older Sails 0.10 version. For a work-in-progress Sails 0.11 version, please see @nickdiego's sails-0.11 branch (PR #27).

Contents:

  • A REST API test page using Sails' transport agnostic routing (HTTP vs. Socket.io)
  • A "Todo List" app demo using Sails' Socket.io messaging and REST Blueprints
  • Passport middleware authentication integrated with Sails policies.
  • Twitter Bootstrap / Font Awesome custom LESS compiles (Grunt)
  • Cache busting JS/CSS for production (Grunt)

If there other examples you would like to see, feel free to create a GitHub issue.

Screenshots

APITestScreenshot

TodoAppScreenshot

LoginPageScreenshot

Notes

(as of May 5, 2014)

Updated to latest Sails.js version 0.9.16 and added some fixes for error handling.

The config/500.js file has changed to include a 4th parameter to notify express' middleware that it is an error handler. Several jade files have also been edited to remove the !!! deprecated doctype. This fixes the html views for 404 and 500 error pages, as well as the oddity I had seen in January with 500 errors on the API test page. The 403 forbidden errors are still inconsistent between HTTP and Socket modes (???).

(as of Jan 7, 2014)

Be wary, this repo has been quickly hacked together as a Sails.js/AngularJS learning project. Do not consider it as production-ready code.

REST API example page (see assets/linker/js/controllers/restCtrl.js)

This API test page was primarily made to exercise the error handling of REST calls between HTTP and Socket modes (404, 403, 500 errors). I am currently seeing some odd behavior when throwing 500 application errors, and when 403 forbidden errors are triggered from policy configurations. The results are not consistent between modes. More research is needed.

Todo List app demo (see assets/linker/js/controllers/todoCtrl.js)

This demo was written to explore how the socket.io connection, comet messages, and auto-subscriptions work in Sails. The AngularJS TodoMVC examples were used a bit for reference. The Sails socket.io code, which is provided during creation of a new Sails project, was refactored into an Angular service (see assets/linker/js/angular-sails.io.js). It contains custom retry logic that first sends a $http.get() request to the server for obtaining the security token cookie, otherwise you may encounter the 500 error: "handshake error" when restarting your local server (See bottom of: FAQ).

If you stop the server or cause a network disconnect when on the example pages, you should see some alert modals pop up. These are managed by SailsSocketCtrl (see assets/linker/js/controllers/sailsSocketCtrl.js) for reuse across examples.

Passport Integration

Credit goes to this gist and its many forks.

You can log in using the dummy user/pass: test/test123.

Here are the files that were touched:

api/controllers/PassportAuthController.js
api/models/User.js
api/policies/isPassportAuthenticated.js
config/bootstrap.js
config/express.js
config/policies.js
config/routes.js
views/passportauth/login.jade
views/passportauth/protected.jade

Grunt changes

The Sails.js asset grunt tasks have been reconfigured to allow Twitter Bootstrap and Font Awesome custom compiles (see /assets/linker/styles/*.less). The grunt copy task has also been reconfigured to include other Bower-managed client-side libraries.

You may also like...

sailsCasts : A great series of screencasts showing you how to use Sails.js.

The levid/angular-sails-socketio-mongo-demo repo may also be of interest for Sails v0.8 users.

Maarten de Boer is working on a Sails v0.10 and AngularJS tutorial: maartendb/angular-sails-scrum-tutorial

Utilizes...

Requirements

Node v0.10.x (brcypt is failing to compile in v0.12 at the moment)

Installation

Ensure that sails and bower are installed:

sudo npm -g install sails bower

Clone this repo:

git clone https://github.com/cgmartin/sailsjs-angularjs-bootstrap-example.git

Run npm and bower to install all dependencies:

cd sailsjs-angularjs-bootstrap-example
npm install ; bower install

Lift the server:

sails lift

And then visit (http://localhost:1337/) to run the examples.

License

MIT License Copyright © 2014 Christopher Martin

sailsjs-angularjs-bootstrap-example's People

Contributors

cgmartin avatar gaboesquivel avatar marco4net avatar nmcclay avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sailsjs-angularjs-bootstrap-example's Issues

Inconsistent behavior with REST 403/500 errors

Seeing odd behavior in Sails v0.9.8 when throwing 500 application errors, and when 403 forbidden errors are triggered from policy configurations where a controller/action is false. The results are not consistent between Socket and HTTP modes. More research is needed.

To reproduce,

  1. Visit http://localhost:1337/rest-examples.
  2. Click the HTTP and Socket buttons for 403: Forbidden and 500: Internal Server Error
  3. Compare the results.

updating the repo?

hello, sailsjs is now in version 0.10... and some other dependencies as well.
Update would be great!!!
Kind regards,
Sven

Bootstrap less files seem to be incomplete

I am getting grunt error messages when trying to run the application. We use sails quite a bit however starting to look at using client side framework and this looked promising. Can you include all the dependent files? I wasn't sure what version of bootstrap as I tried adding the files it was looking for from bootstrap and font-awesome however didn't seem to work for me. Many thanks for putting this together.

sails lift
info:
info:
info:    Sails.js           <|
info:    v0.9.16             |\
info:                       /|.\
info:                      / || \
info:                    ,'  |'  \
info:                 .-'.-==|/_--'
info:                 `--'-------'
info:    __---___--___---___--___---___--___
info:  ____---___--___---___--___---___--___-__
info:
info: Server lifted in `/Development/clients/TrekSav/sailsjs-angularjs-bootstrap-example`
info: To see your app, visit http://localhost:1337
info: To shut down Sails, press <CTRL> + C at any time.

debug: --------------------------------------------------------
debug: :: Sat May 24 2014 11:45:37 GMT-0400 (EDT)
debug:
debug: Environment  : development
debug: Port     : 1337
debug: --------------------------------------------------------
error: Grunt :: Warning: Error compiling assets/linker/styles/bootstrap.less Use --force to continue.
 Running "less:bootstrap" (less) task

>> FileError: 'mixins.less' wasn't found in assets/linker/styles/bootstrap.less on line 3, column 1:
>> 2 @import "bs-variables";
>> 3 @import "mixins.less";
>> 4

Warning: Error compiling assets/linker/styles/bootstrap.less Use --force to continue.


error: Grunt ::
Aborted due to warnings.
 Running "less:bootstrap" (less) task

>> FileError: 'mixins.less' wasn't found in assets/linker/styles/bootstrap.less on line 3, column 1:
>> 2 @import "bs-variables";
>> 3 @import "mixins.less";
>> 4

Warning: Error compiling assets/linker/styles/bootstrap.less Use --force to continue.


error: *-> An error occurred-- please fix it, then stop and restart Sails to continue watching assets.

bcrypt dependencies

I've installed bcrypt v0.8.1 (in other directory) but when I install this project it still tells me bcrypt is v0.7.7 and fail to find the openssl file. I tried to copy the latest bcrypt and still failed. How can I solve this problem?

Error message:
fatal error C1083: Cannot open include file: 'openssl/rand.h': No such file or directory [\sailsjs-angularjs-bootstrap-example\node_modules\bcrypt\build\bcrypt_lib.vcxpro
j](there is no)
....
npm ERR! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node-gyp rebuild'.

Seems like this project breaks sailsjs default error handling

If I call next({error: "Error"}) within any controller i'd expect sails to handle it by the default error (500) middleware. However in this project this doesn't happen, instead I get an [object Object] output.

Any ideas what may be causing this misbehaviour?

Thanks!.

bcrypt dependencies

Thanks very much for this example.
I had trouble with bcrypt dependencies,
upgrading to 0.8 seems to solve these issues though requires
node version >= 0.11.x

non jade

Would love to have an example using html files instead of jade.

Thanks

Can you create a version for Sails 0.10?

Right now lots of locations and the way grunt file is being used (with /tasks) changed everything.

WOuld you plesae update it to the latest version of sails? Thank you!

CRUD Example

If I have enough time I'll do it. Either way, this example is a must.

Is there a way to protect the index page?

I've tried setting '*': 'isAuthenticated' in the policies.js file but for some reason the index.jade view does not get protected.

Is there an easy way to do this?

Thanks!.

Can't get started

Steps:

  1. Fork & clone yout git
  2. Goto the directory
  3. npm install
  4. bower install
  5. node app.js

Result:

~/sailsjs-angularjs-bootstrap-example/node_modules/bcrypt/node_modules/bindings/bindings.js:79
        throw e
              ^
Error: ~/sailsjs-angularjs-bootstrap-example/node_modules/bcrypt/build/Release/bcrypt_lib.node: failed to map segment from shared object: Operation not permitted
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at bindings (~/sailsjs-angularjs-bootstrap-example/node_modules/bcrypt/node_modules/bindings/bindings.js:74:15)
    at Object.<anonymous> (~/sailsjs-angularjs-bootstrap-example/node_modules/bcrypt/bcrypt.js:1:97)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)

ps. I've tried too the sudo npm install -g sails with sails lift, but same result.

Q:
Were the step I did alright?
How to fix this?

Thanks a lot Martin.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.