April 26, 2015 Uncategorized

SailsJS and AngularJS Applications with generator-angular-crud

In this video we are going to see how generator-angular-crud will allow us creating very quickly and very easy new entities for our AngularJS application and automatically will allow us managing our new entities with CRUD operations.

generator-angular-crud is based on John Papa’s generator generator-hottowel de John Papa and uses his style guides for developing AngularJS applications.

For developing an application with generator-angular-crud, at first place we are going to develop our backend, and, after that, we are going to develop our frontend. We are going to develop the backend with SailsJS and the frontend with generator-angular-crud.

Developing the REST API with SailsJS

generator-angular-crud will create only the frontend. However, we need a backend to save information into our database. For now, generator-angular-crud is automatically integrated with a Sails backend. I have decided to integrate this generator with SailsJS becaus it’s a contrasted framework an it’s very easy and very quick developing an REST API with it.

However, we have a little problem developing our API with Sails. When we retrieve a list of our entities, Sails sends us an array of objects, but it doesn’t send us the total number of objects. We need the total number of objects in order to paginate our information in a table, so we need to override the find blueprint to adapt Sails.

Sails, by default, send us this information:

But we need this information:

To get this information, we will copy the file sails/api/blueprints/find.js into ROOT_PROJECT/api/blueprints/find.js.

Next, I’m going to expose the steps that we have to follow to create our REST API with Sails:

  1. sails generate new <ApplicationName>
  2. cd ApplicationName
  3. sails generate api <EntityName>
  4. add properties to the entity
  5. copy the find.js blueprint
  6. npm install lodash –save
  7. update the file config/models to set this parameter: migrate: ‘alter’
  8. update the file config/cors to set these parameters: allRoutes: true and origin: ‘*’
  9. sails lift

Following these steps we will create our REST API with SailsJS.

Developing the frontend with generator-angular-crud

To create the frontend we are going to use generator-angular-crud. It’s going to create our application skeleton and will allow to create new entities that are going to be displayed in an HTML table. From this table we are going to be able to create new objects, update and delete. Also, we will be able to filter our data information, sort and paginate this data. We will have available all these operations automatically if we use generator-angular-crud.

These are the steps that we have to follow to create our frontend application:

  1. npm install -g generator-angular-crud
  2. yo angular-crud: create our application skeleton
  3. yo angular-crud:feature <EntityName>: create a new entity
  4. Add properties to the entity updating the following file:  src/client/app/feature-name/services/feature-name.form.client.service.js
  5. Add columns to the HTML table that displays our entity’s properties, updating the following file: src/client/app/feature-name/views/list.html
  6. gulp serve-dev: run the application

Following these steps we will create our frontend application.

As you see, using generator-angular-crud for developing our applications we get automatically a set of operations that we use to develop manually, so, finally we get a productivity improvement.

  1. Liran Tal says:

    Hey Jose,

    Thanks for this great effort on integrating SailsJS with AngularJS.

    I’m wondering if you had a look at the angular-fullstack generator prior to working on this and if so then why did you end up deciding on going with SailsJS integration instead of the fullstack skeleton?

  2. jl_monteagudo says:

    Hello Liran,

    Yes, I knew angular-fullstack generator quite time ago, although I was using mean.js (http://meanjs.org/) instead of angular-fullstack. In fact, I adapted mean.js generator (https://github.com/jlmonteagudo/generator-meanjs-table), so you can manage your entities and CRUD operations automatically.

    Although I liked mean.js, I think that developing your applications with a generator like angular-crud is much more versatile because you are not tied to any backend. It’s true that I integrated angular-crud with SailsJS, but it’s very easy to use a different backend instead of SailsJS. Furthermore, I plan to create adaptors for other well known backends.

    Why I think that this approach is much more versatile? I think that the backend generated by angular-fullstack or by mean.js never will be as powerful as an explicit server. Normally, explicit servers will incorporate much more features and will be much more robust than those servers generated by generators.

    Furthermore, if you prefer, with angular-crud you can use a cloud based backend, as Firebase, Parse or Backand. Or if you want, you can use a backend developed with a different platform, as .NET, Ruby or Python, for example. But if you develop your application with angular-fullstack or with mean.js it will be much more difficult that you could use a different backend.

    These are only some reasons why I think that this approach is better than full stack approaches.

  3. almaz says:

    Hello, firstly thank you for your tutorial ,it is very cool,
    I got one question when I were reapeating as you Explained, here doesnt show the list , there is error on ‘get’ action , could you say where I made mistake

  4. jl_monteagudo says:

    Hello Almaz,

    With angular-crud if you are getting the error on ‘get’ action I suppose that it’s because you are requesting an object, but you are getting an array. Did you adapt Sails as I explained? I you don’t adapt Sails, when you retrieve objects you get this (an array):

    [
    {
    code: ‘customer 1’
    },
    {
    code: ‘customer 2’
    },
    {
    code: ‘customer 3’
    }
    ]

    But you need this (an object, with the total number of records to paginate):

    {
    total: 1000,
    results: [
    {
    code: ‘customer 1’
    },
    {
    code: ‘customer 2’
    },
    {
    code: ‘customer 3’
    }
    ]
    }

    To adapt Sails, you have to override the find blueprint. To do this, you have to copy the file sails/api/blueprints/find.js into your ROOT_PROJECT/api/blueprints/find.js

    Could be this the cause of your problem?

  5. almaz says:

    Thank you , the problem was that I made folder blueprint not blueprints 🙂

  6. alessandro says:

    Hello Jose. Thanks for the nice post.
    I want to ask you information: How to remove the dashboard? I want to see now my model when I click on localhost: 3000.
    many thanks
    Alessandro

  7. jl_monteagudo says:

    Hello Alessandro,

    If you want to delete completely the dashboard module you have to do two steps:

    1- delete the dashboard folder
    2- delete the reference to the dashboard module in the file src/client/app/app.module.js

    After that, you have to configure your default page. Suppose that you have a ‘customer’ module and you want to display a list of customers when you access to the root. Then you have to update the file src/client/app/customer/config/customer.client.routes.js and you have to add a new state assigning an slash to the URL parameter:

  8. Alessandro says:

    Hello Jose.
    I thank you very much.
    I have solved.
    Thank you and have a nice day

  9. Dino says:

    Hello.. thank you very much, i newbe with angular.
    Are there examples to make application with login and register form example use angular crud generator?

    thanks

  10. David says:

    Hello. I am created crud with GENERATOR-ANGULAR-CRUD and can’t add new user. there are an error
    TypeError: Cannot read property ‘summary’ of null.

  11. David says:

    and this “Failed to load resource: the server responded with a status of 403 (Forbidden)”

  12. liana says:

    Hello. I have a problem with generator-angular-crud. When I try to create, remove or update, my list, I have an error 403 (Forbidden). How can I solve this error?

  13. Ikbel says:

    Hello Jose. thanks a lot for this tutorial
    I want to ask you information: How to authenticate ? I want to see the authentification when I click on localhost: 3000.

  14. Neil Puttick says:

    Hi José – thanks so much for this brilliant Yo Generator – I’ve been looking for the best ways to build with Angular and SailsJS (for versatility). I wanted to ask, how could I setup an authentication stage – should I generate a User API in sails? Should I use something like Passport or Machinepack, changing the policies and responses? OR could I generate and write a login using angular-crud:Features ?

    Neil

  15. jl_monteagudo says:

    Hello Neil,

    To manage authentication you will need to create an API in Sails. This API will have to allow create users, authenticate them, maybe you also need assign roles to your users, etc.

    After that, you will need to use some library in the front-end, maybe passport, to allow users login and registration.

    However, if I were you, instead of using Sails I would use Strapi (http://strapi.io/). This back-end framework is based in Sails, but it has implemented much more features. Strapi implements an user management system (http://strapi.io/documentation/users), contains a set of tools to send emails, contains tools to upload files, etc. Also, it has and aministration panel, from where you can manage all your database information (http://strapi.io/documentation/admin).

    And, as Strapi is based on Sails and on Waterline ORM, I suppose that angular-crud generator will work. However, the Strapi team want to move from Waterline to Sequelize, so with that new version of Strapi I suppose that angular-crud generator won’t work and it will be required to adapt angular-crud generator to work with the future new version of Strapi.

    In any case, I suggest you to try Strapi instead of Sails because you will get much more functionality for free.

    JL Monteagudo

  16. liana says:

    Hello Jose.
    Thank you for this tutorial.
    I have a question. I use generator-angular-crud for my app admin. how i can create my admin login and access for admin?

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top