How to use AngularJS with SailsJS

In my previous posts (Beginner’s guide to SailsJS + Start with APIs) we’ve discussed what is sailsjs and how to start with APIs in SailsJS. So now in this post we’ll learn how to use AngularJS with SailsJS.
Since Sails is a purely back-end framework and Angular is purely front-end, they can work together nicely. Let’s start how to work with them.

Once you have APIs ready let’s link them with AngularJS…

Let’s start sails server and run users API in POSTMAN

1-start_server

2-postman

 

Now, let’s setup AngularJS in our machine.

Node package to setup AngularJS: Simple AngularJS

Now, in controller.js write down following code:

App.controller('usersCtrl', function ($scope, $http) {
     $scope.users=[];
     $http.get("http://localhost:1337/users/")
          .success(function(data){
               $scope.users=data;
          });
});

Now, create your view (users.html) and add following lines,

Users Page<br>
<ul>
     <li ng-repeat="user in users">{{user.username}}</li>
</ul>

 

Now check in your browser…

4-output

So, basically we are doing nothing here. We are getting users data from users/ API and display in view part. It’s that much easy.

Now, try yourself something like getting user’s data using the userID and for that you’ve to call API user/<userid>.

In next post we would be creating ToDo APP using AngularJS as front-end and SailsJS as back-end.