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:

[
  {
    code: 'customer 1'
  },
  {
    code: 'customer 2'
  },
  {
    code: 'customer 3'
  }
]

But we need this information:

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

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.