By Sandeep Panda

Creating a CRUD App in Minutes with Angular’s $resource

By Sandeep Panda

Most Single Page Applications involve CRUD operations. If you are building CRUD operations using AngularJS, then you can leverage the power of the $resource service. Built on the top of the $http service, Angular’s $resource is a factory that lets you interact with RESTful backends easily. So, let’s explore $resource and use it to implement CRUD operations in Angular.


The $resource service doesn’t come bundled with the main Angular script. You need to download a separate file called angular-resource.js and include it in your HTML page. The script can be downloaded from

Also, your main app module should declare a dependency on the ngResource module in order to use $resource. The following example demonstrates how to do it:

angular.module('mainApp',['ngResource']); //mainApp is our main module

Getting Started

$resource expects a classic RESTful backend. This means you should have REST endpoints in the following format:

REST Endpoints

You can create the endpoints using the server side language of your choice. However, I have used Node + Express + MongoDB to design the RESTful API for the demo app. Once you have the URLs ready you can take help of $resource for interacting with these URLs. So, let’s see how exactly $resource works.

How Does $resource Work?

To use $resource inside your controller/service you need to declare a dependency on $resource. The next step is calling the $resource() function with your REST endpoint, as shown in the following example. This function call returns a $resource class representation which can be used to interact with the REST backend.

angular.module('').factory('Entry', function($resource) {
  return $resource('/api/entries/:id'); // Note the full endpoint address

The result of the function call is a resource class object which has the following five methods by default:

  1. get()
  2. query()
  3. save()
  4. remove()
  5. delete()

Now, let’s see how we can use the get(), query() and save() methods in a controller:


angular.module('myApp.controllers').controller('ResourceController',function($scope, Entry) {
  var entry = Entry.get({ id: $ }, function() {
  }); // get() returns a single entry

  var entries = Entry.query(function() {
  }); //query() returns all the entries

  $scope.entry = new Entry(); //You can instantiate resource class

  $ = 'some data';$scope.entry, function() {
    //data saved. do something here.
  }); //saves an entry. Assuming $scope.entry is the Entry object  

The get() function in the above snippet issues a GET request to /api/entries/:id. The parameter :id in the URL is replaced with $ You should also note that the function get() returns an empty object which is populated automatically when the actual data comes from server. The second argument to get() is a callback which is executed when the data arrives from server. This is a useful trick because you can set the empty object returned by get() to the $scope and refer to it in the view. When the actual data arrives and the object is populated, the data binding kicks in and your view is also updated.

The function query() issues a GET request to /api/entries (notice there is no :id) and returns an empty array. This array is populated when the data arrives from server. Again you can set this array as a $scope model and refer to it in the view using ng-repeat. You can also pass a callback to query() which is called once the data comes from server.

The save() function issues a POST request to /api/entries with the first argument as the post body. The second argument is a callback which is called when the data is saved. You might recall that the return value of the $resource() function is a resource class. So, in our case we can call new Entry() to instantiate an actual object out of this class, set various properties on it and finally save the object to backend.

Ideally, you will only use get() and query() on the resource class (Entry in our case). All the non GET methods like save() and delete() are also available in the instance obtained by calling new Entry() (call this a $resource instance). But the difference is that these methods are prefixed with a $. So, the methods available in the $resource instance (as opposed to $resource class) are:

  1. $save()
  2. $delete()
  3. $remove()

For instance, the method $save() is used as following:

$scope.entry = new Entry(); //this object now has a $save() method
$scope.entry.$save(function() {
  //data saved. $scope.entry is sent as the post body.

We have explored the create, read and delete parts of CRUD. The only thing left is update. To support an update operation we need to modify our custom factory Entity as shown below.

angular.module('').factory('Entry', function($resource) {
  return $resource('/api/entries/:id', { id: '@_id' }, {
    update: {
      method: 'PUT' // this method issues a PUT request

The second argument to $resource() is a hash indicating what should be the value of the parameter :id in the URL. Setting it to @_id means whenever we will call methods like $update() and $delete() on the resource instance, the value of :id will be set to the _id property of the instance. This is useful for PUT and DELETE requests. Also note the third argument. This is a hash that allows us to add any custom methods to the resource class. If the method issues a non-GET request it’s made available to the $resource instance with a $ prefix. So, let’s see how to use our $update method. Assuming we are in a controller:

$scope.entry = Movie.get({ id: $ }, function() {
  // $scope.entry is fetched from server and is an instance of Entry
  $ = 'something else';
  $scope.entry.$update(function() {
    //updated in the backend

When the $update() function is called, it does the following:

  1. AngularJS knows that $update() function will trigger a PUT request to the URL /api/entries/:id.
  2. It reads the value of $scope.entry._id, assigns the value to :id and generates the URL.
  3. Sends a PUT request to the URL with $scope.entry as the post body.

Similarly, if you want to delete an entry it can be done as following:

$scope.entry = Movie.get({ id: $ }, function() {
  // $scope.entry is fetched from server and is an instance of Entry
  $ = 'something else';
  $scope.entry.$delete(function() {
    //gone forever!

It follows the same steps as above, except the request type is DELETE instead of PUT.

We have covered all the operations in a CRUD, but left with a small thing. The $resource function also has an optional fourth parameter. This is a hash with custom settings. Currently, there is only one setting available which is stripTrailingSlashes. By default this is set to true, which means trailing slashes will be removed from the URL you pass to $resource(). If you want to turn this off you can do so like this:

angular.module('').factory('Entry', function($resource) {
  return $resource('/api/entries/:id', { id: '@_id' }, {
    update: {
      method: 'PUT' // this method issues a PUT request
  }, {
    stripTrailingSlashes: false

By the way, I didn’t cover each and every thing about $resource. What we covered here are the basics that will help you get started with CRUD apps easily. If you want to explore $resource in detail, you can go through the documentation.


Building a Movie App

To reinforce the concepts of $resource let’s build an app for movie lovers. This is going to be a SPA where users can add a new movie to our database, update an existing movie, and finally delete one. We will use $resource to interact with the REST API. You can check out a live demo of what we are going to build here.

Just note that the API I have built is CORS enabled, so it is possible for you to create an Angular app separately and use the URL as the API. You can develop the Angular app and play around with it without worrying about the backend.


I have created a RESTful backend using Node and Express. Take a look at the following screenshot to get to know the API.


Directory Structure

Let’s start with the following directory structure for our AngularJS app:


Just note that we will be using Angular UI Router for routing.

Creating Our Service to Interact with REST Endpoints

As discussed in previous sections we will create a custom service that will use $resource internally to interact with the REST API. The service is defined in js/services.js.


angular.module('', []).factory('Movie', function($resource) {
  return $resource('', { id: '@_id' }, {
    update: {
      method: 'PUT'

The name of our factory is Movie. As we are using MongoDB, each movie instance has a property called _id. The rest is simple and straightforward.

Now that we have our service ready let’s build views and controllers.

index.html : Building the App Entry Page

The index.html is our app entry point. To start we need to include all the required scripts and stylesheets in this page. We will use Bootstrap to quickly create the layout. Here is the content of index.html.

<!DOCTYPE html>
  <html data-ng-app="movieApp">
  <head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="/"/>
    <title>The Movie App</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/app.css"/>
    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" ui-sref="movies">The Movie App</a>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a ui-sref="movies">Home</a></li>
    <div class="container">
      <div class="row top-buffer">
        <div class="col-xs-8 col-xs-offset-2">
          <div ui-view></div> <!-- This is where our views will load -->
    <script type="text/javascript" src="lib/angular.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/controllers.js"></script>
    <script type="text/javascript" src="js/services.js"></script>
    <script type="text/javascript" src="lib/angular-ui-router.min.js"></script>
    <script type="text/javascript" src="lib/angular-resource.min.js"></script>

The markup is pretty self explanatory. Just pay special attention to <div ui-view></div>. The ui-view directive comes from UI Router module and acts as a container for our views.

Creating Main Module and States

Our main module and states are defined in js/app.js:


angular.module('movieApp', ['ui.router', 'ngResource', 'movieApp.controllers', '']);

angular.module('movieApp').config(function($stateProvider) {
  $stateProvider.state('movies', { // state for showing all movies
    url: '/movies',
    templateUrl: 'partials/movies.html',
    controller: 'MovieListController'
  }).state('viewMovie', { //state for showing single movie
    url: '/movies/:id/view',
    templateUrl: 'partials/movie-view.html',
    controller: 'MovieViewController'
  }).state('newMovie', { //state for adding a new movie
    url: '/movies/new',
    templateUrl: 'partials/movie-add.html',
    controller: 'MovieCreateController'
  }).state('editMovie', { //state for updating a movie
    url: '/movies/:id/edit',
    templateUrl: 'partials/movie-edit.html',
    controller: 'MovieEditController'
}).run(function($state) {
  $state.go('movies'); //make a transition to movies state when app starts

So, our application has the following four states:

  1. movies
  2. viewMovie
  3. newMovie
  4. editMovie

Each state is composed of a url, templateUrl and controller. Also note that when our main module is loaded we make a transition to state movies showing all the movies in our system. Take a look at the following screenshot to know which state corresponds to what URL.

State to Resource Mapping

Creating Templates

All of our templates are inside partials. Let’s see what each of them does!


_form.html contains a simple form which allows users to enter data. Note that this form will be included by movie-add.html and movie-edit.html because both of them accept inputs from users.

Here is the content of _form.html:

<div class="form-group">
  <label for="title" class="col-sm-2 control-label">Title</label>
  <div class="col-sm-10">
    <input type="text" ng-model="movie.title" class="form-control" id="title" placeholder="Movie Title Here"/>
<div class="form-group">
  <label for="year" class="col-sm-2 control-label">Release Year</label>
  <div class="col-sm-10">
    <input type="text" ng-model="movie.releaseYear" class="form-control" id="year" placeholder="When was the movie released?"/>
<div class="form-group">
  <label for="director" class="col-sm-2 control-label">Director</label>
  <div class="col-sm-10">
    <input type="text" ng-model="movie.director" class="form-control" id="director" placeholder="Who directed the movie?"/>
<div class="form-group">
  <label for="plot" class="col-sm-2 control-label">Movie Genre</label>
  <div class="col-sm-10">
    <input type="text" ng-model="movie.genre" class="form-control" id="plot" placeholder="Movie genre here"/>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <input type="submit" class="btn btn-primary" value="Save"/>

The template uses ng-model to bind various movie details to different properties of scope model movie.


This template is used to accept user inputs and add a new movie to our system. Here is the content:

<form class="form-horizontal" role="form" ng-submit="addMovie()">
  <div ng-include="'partials/_form.html'"></div>

When the form is submitted the function addMovie() of the scope is called which in turn sends a POST request to server to create a new movie.


This template is used to accept user inputs and update an existing movie in our system.

<form class="form-horizontal" role="form" ng-submit="updateMovie()">
  <div ng-include="'partials/_form.html'"></div>

Once the form is submitted the scope function updateMovie() is called which issues a PUT request to server to update a movie.


This template is used to show details about a single movie. The content looks like following:

<table class="table movietable">
    <td><h3>Details for {{movie.title}}</h3></td>
    <td>Movie Title</td>
    <td>Release Year</td>
    <td>Movie Genre</td>
  <a class="btn btn-primary" ui-sref="editMovie({id:movie._id})">Edit</a>

In the end there is an edit button. Once clicked it changes the state to editMovie with the movie id in the $stateParams.


This template displays all the movies in the system.

<a ui-sref="newMovie" class="btn-primary btn-lg nodecoration">Add New Movie</a>

<table class="table movietable">
    <td><h3>All Movies</h3></td>
  <tr ng-repeat="movie in movies">
      <a class="btn btn-primary" ui-sref="viewMovie({id:movie._id})">View</a>
      <a class="btn btn-danger"  ng-click="deleteMovie(movie)">Delete</a>

It loops through all the movie objects obtained from the API and displays the details. There is also a button Add New Movie which changes the state to newMovie. As a result a new route loads and we can create a new movie entry.

For each movie there are two buttons, View and Delete. View triggers a state transition so that the details for the movie are displayed. Delete button deletes the movie permanently.

Creating Controllers

Each state has a controller. So, in total we have four controllers for four states. All the controllers go into js/controllers.js. The controllers just utilize our custom service Movie and work the way we have discussed above. So, here is how our controllers look.


angular.module('movieApp.controllers', []).controller('MovieListController', function($scope, $state, popupService, $window, Movie) {
  $scope.movies = Movie.query(); //fetch all movies. Issues a GET to /api/movies

  $scope.deleteMovie = function(movie) { // Delete a movie. Issues a DELETE to /api/movies/:id
    if (popupService.showPopup('Really delete this?')) {
      movie.$delete(function() {
        $window.location.href = ''; //redirect to home
}).controller('MovieViewController', function($scope, $stateParams, Movie) {
  $ = Movie.get({ id: $ }); //Get a single movie.Issues a GET to /api/movies/:id
}).controller('MovieCreateController', function($scope, $state, $stateParams, Movie) {
  $ = new Movie();  //create new movie instance. Properties will be set via ng-model on UI

  $scope.addMovie = function() { //create a new movie. Issues a POST to /api/movies
    $$save(function() {
      $state.go('movies'); // on success go back to home i.e. movies state.
}).controller('MovieEditController', function($scope, $state, $stateParams, Movie) {
  $scope.updateMovie = function() { //Update the edited movie. Issues a PUT to /api/movies/:id
    $$update(function() {
      $state.go('movies'); // on success go back to home i.e. movies state.

  $scope.loadMovie = function() { //Issues a GET request to /api/movies/:id to get a movie to update
    $ = Movie.get({ id: $ });

  $scope.loadMovie(); // Load a movie which can be edited on UI


Assuming the app is deployed under localhost/movieApp, you can access it at http://localhost/movieApp/index.html. If you are a movie lover, you can start adding your favorite movies too! The source code for the app developd in this article is available on GitHub for download.

I hope you enjoyed this tutorial! Feel free to comment if you’d like to add something.

  • nice tutorial!

  • amitmojumder

    This demo code does nothing. I tried to run it from XAMPP. :(

    • crime_master_gogo

      use it as a starting point and write your own :)

  • Nice tutorial only one thing: what method would you suggest to use to reduce/remove that small lag on individual movie page when you select one cause it’s second or two untill it appears and so on, maybe some caching or other methods could allow to show user only prepared data? Thanks for any ideas

    • To reduce the lag you might want to do some caching. In the $resource() call you can set the cache option to true for GET requests:

      app.factory(‘Movie’, function($resource) {
      return $resource(URL, {id: ‘@_id’}, {
      ‘get’: { method:’GET’, cache: true},
      ‘query’: { method:’GET’, cache: true, isArray:true }

      So, the first request to a particular URL hits the server. All the subsequent requests are served from the cache.

      • Thanks for solution, how actualy angular JS cache method works? It works on server side? Where is cached content stored, what method it uses? Looks like nice and simple solution, but not sure of how it can be controlled and adjusted in more advanced way.
        Maybe there’s some directives and libraries like angular ui-router for cache, whitch i find way more flexible than default routing.

  • Gayan Ramya Kumara

    Great tutorial.But Where is demo code ?

  • Gayan Ramya Kumara

    Thanks Sandeep.!!

  • Partyk1d24

    Thanks man this is great.

  • Andy Neale

    Excellent tutorial!

    What about error handling? How can you catch errors from the database (e.g. if a mandatory field isn’t filled in) and how can these be reflected in the UI?

  • guest

    the popupService is missed in the tutorial but present in the demo code

  • rr

    demo code works great…thanks for sharing Sandeep ! – rr

  • Seánóg Ó Dubhshláine

    Will you be writing up a tutorial on implementing the Node server with Express and setting up MongoDB? I have managed to follow the above tutorial fine but I would also like to know how to do the backend was setup and how you served the JSON response, saved new movies entries etc. This would make this a complete tutorial.

  • njerome

    Nice tutorial !
    For me “$scope.movies = Movie.query();” doesn’t works. response of query method is full but $scope.movies is empty. Is there a problem with the “return $resource …” ? Do you have an idea ?

    • szeta

      Hi Njerome, I just run into the same problem. Were you able to solve the empty Movie.query()?

    • shinriyo

      Did you make server?

      • shinriyo

        JSON’s id is _id….

  • jameswagoner

    The inputs are blank when editing a movie. Adding the title to the view shows that data is being returned.

  • KK

    Hey Sandeep,
    Your articles are always so easy to understand. :)

  • where’s ur model layer? in most case, it’s not good practice to invoke backend interface in the controller immediately. use the $resource like above, u will get sucked when u want to asyn model between views.

  • Amir

    Great tutorial. Thanks Sandeep. Please keep bringing more tutorials.

  • rav

    am getting blank page while opening index.html. pls help me

    • jeff

      I’m getting the same error. Did you ever figure this out?

  • Ravi Mone

    Hi Sandeep Panda,

    It is good resource I found on $resource in AngularJS, Many thanks for this post, But when I tried to use this build, I got this error:

    XMLHttpRequest cannot load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. ….

    In the web console.
    Was really feeling sad, for not seeing the resource feature in action, It is basically CORS issue, so please make that fix.

    I am eagerly waiting to see this functionality in action, In the build.

    • Vipin Saini

      Above issue can be fixed if you add below code in Rest API

      var router=express.Router();

      router.use(function(req, res, next) {
      res.header(“Access-Control-Allow-Origin”, “*”);
      res.header(“Access-Control-Allow-Headers”, “Origin, X-Requested-With, Content-Type, Accept”);

  • Victor Melias

    Broken images :(

  • LouisLazaris

    Thanks. There are some problems with our CDN right now, and the developers are working on it. Sorry for the inconvenience. Check back later I suppose. :)

  • Are there any articles on how to set-up Angular.js on Windows?

  • F. Ali Ahmad

    In a minute, really you written so much of code in 1 minute? what is your typing speed :)

  • Pawan Pandey

    Sir i need a solution for leading slashes after each src in angularjs. its kinda giving me parsing error. tyia. :)

  • Daniel Lim

    Wow It’s Nice tutorial of angularJS. Thanks a lot!!

  • Nice Writeup… But it’s a bit more than a few minutes… ;-)

  • hiveser

    You need to host the repo and then go to localhost:, instead of opening index.html directly in your browser.

  • KMTayan

    Hi, how can I add a search functionality?

  • helloworld

    Hi, how can I run project on the server ? please

  • Dwight Rodriques

    I found your tutorial very helpful, thank you.

  • Marques Jordan

    Can you have more than one controller in 1 state?

  • Aakash Ohri

    Hello Sandeep,
    Great Tutorial and definitely cleared my doubts about using angular $resource. However i do appreciate if you could share the the Express Code as mine is giving me hard time to ajaxify the whole system. Im returning json data as response for every hit to server. Im not sure what i’m doing wrong.

  • lucky

    I have downloaded this file and try to run .. but when we create movies save method not calling .. can you please tell me what is the problem am facing ?

  • Akash Srivastava

    Hi Sandeep,
    Any idea what to do if we have REST api as movies/:movieId/review/:id

  • lucky

    As you mentioned – CORS enabled API – but when running this app getting CORS issue. How can solve this issue?

  • Fitter Man

    Very clear, very helpful. Thanks.

  • intertarik


    nice tutorial , but how can i setup a db like this one ?? :

  • ash

    Hi Everyone
    Anybody able to get run this application.
    Sandeep,This application I hosted on wamp server and write the same code by scratch.But unable to fetch data from server.Movies.html is not rendering.
    I am not getting any error but console shows nothing.
    Anybody please help me on this.

  • Nice tutorial, I adapted it to a Laravel 5 back end, works a charm………………………

  • leesungki

    thanks for your tutorial, I am new at node.js. How to start node js to run your sample. I downloaded your zip but can’t see package.json. Can u guide me the step to run node?

  • Binh Thanh Nguyen

    Thanks, nice post

    • shinriyo

      Does it work?
      I guess delete and put method doesn’t have id param

  • Dennis Brandt

    Hi, great read. However my save() is sending a GET request if a placeholder is present in the URL. It’s driving me insane, any ideas?

  • MarkD

    I suggest you try changing the URL services.js to That did the trick for me.

    • Wissem Mahjoub

      you need to enable CORS class in ur provider restful

  • Great start, would be nice if there was a tool that would quickly generate this for us.

  • bill jenner

    I’m not that familiar with MongoDB; Can $resource help address concurrency issues or do you know of a way to defend against multiple Puts or Deletes on a single data record?.

    BTW, I really like your article. Good Job.

  • Sammywaslow

    After hours and hours spent to take tutorials in angularjs , bootstrap and ui router without take effort result , I finally found what i’m looking for about my needs in this tutorial!!!
    Thank u Sandeed You really made a great work, more than other official guides in the web, thanks again man!!!

  • You can simplify your controls a bit.

    You create a module here…

    Then you are adding controllers to your module right after…
    angular.module(‘myApp.controllers’).controller(‘resourceControll’, function(){—CODE—-});

    Why not just chain directly into your module after you declare it:

    angular.module(‘myApp.controllers’.[]).controller(‘resourceControll’, function(){—CODE—-});

  • mohsin

    great solutions
    thank’s alot

  • fiorra

    Great tutorial, thanks. It would be great if you used state provider resolves.

  • Abdul Samad

    Getting error while updating record.
    (index):1 XMLHttpRequest cannot load http://localhost:8000/api/v1/quotes/11. Response for preflight has invalid HTTP status code 405

  • Surej

    Hi Sandeep…Great Article. When I tried to set up the back end REST API using SLIM. It is giving below error.

    index.html:1 XMLHttpRequest cannot load http://localhost/movieApp/api/index.php/movies/4. Response for preflight has invalid HTTP status code 404

    I am very new to Web development. Please could you/fellow group members help me to fix this issue.

    Thanks in advance.

    Kind regards/Surej

    • Arif VirKill Yulian

      I have the same issue using slim php.

  • I have wasted 4 hours of a saturday morning trying to make USEFUL sense of all this. The basic problem with your sample app is that you start with the intention of teaching ngResource and then introduce a second, completely orthogonal matter, that is ui-router. Who cares about ui-router? You start by saying that ngResource alone makes it easy to do restful CRUD, which is mainly a data management problem. Good, that’s why I came here in the first place. But then you force me to introduce states, partial views and other crap completely irrelevant to CRUD, while I have the route/view act already completely figured out by myself. Let’s get the hell out of here! And please before contradicting my words, please have a look at the line of error messages and troubles here in the comments. I should’ve done it myself before embarking in this whole frustration.

    • To be completely honest, I must add that I appreciate A LOT the fact you made a back-end server available for whoever wants to try.

  • Dirk Ecker

    In minutes, really. You are awesome ;-)

  • Alejandro Paciotti


  • Manoj Mishra


  • Venkat

    Suggest how to deal with 204 Error code.

    I developed a similar app with
    my own backend. The Rest call /api/movies will return 204:No content
    error if there are no movies in the list.

    • shinriyo


    • shinriyo

      POST api/movies must callback?

    • shinriyo

      me too create new POST?

  • Sakthivel P

    Hi Sandeep, Awesome example, How to write genrically this for multiple Entities like Student, Cource, Schedule etc., All needs crud service separately by sharing common controllers and services. Please Sugguest some key points.

  • shinriyo

    I guess it is not completed yet.

    return $resource(‘/api/movies/:id’,{id:’@_id’},{

    and $resource must have deleteMovie and updateMovie isnt it?

    • shinriyo

      however it call /api/movies when delete function. is it really /api/movies/:id?

      • shinriyo

        AngularJS knows that $update() function will trigger a PUT request to the URL /api/entries/:id.

        however it always call /api/movies without :id

        • shinriyo

          Ah….. id is _id in JSON!!!!

    • shinriyo


  • shinriyo

    me too.
    it had bug

  • ronjark

    If i were to add some more functions to this program, like sorting and filtering or any other “methods” that would be used in multiple views, should i add the same code in multiple controllers or create one directory? Would you have any tips on how to proceed with that? As i see it you connect templates and controllers together in a directory, but this is already done in the ui-router.

  • ldcaponi

    Excellent demo, $resource was always a gray area for me, as I always chose to use $http. Will give $resource a shot in the future!

  • Hardik Thakker

    Excellent tutorials, practical and to the point! Thank you for sharing. It would be great, if you can elaborate on how to handle errors and display them to users (for example API returned 500 Error).

  • Worse tutorial ever. Download code is not working too.

  • Narayanan Ts

    Great Tutorial! Thanks!

  • Raywon Teja Kari

    Hi, It was really helpful. Do you have an idea how to integrate your tool with a build automation tool such as gulp or grrunt? which are used to access the frontend application part simply using localhost:3000 for example
    Thanks in advance

  • edmund

    could you post RESTful backend code?

  • Vahid Montazer

    Thank you♥
    your code solved multiple of my issues ($state.go(), $stateParams, … ) .
    i will save this page on local storage for further issues!
    Thank you♥

  • Mohsin Bukhari

    Hi, nice post. I just got into web development and found this really helpful.

  • Joe Bien

    deploying app with `node app.js` or `node services.js` I get `ReferenceError: angular is not defined`. No idea.

  • Joe Bien

    Can someone tell me how to deploy this app? Must be obvious to anyone who is not clueless, but …..
    I’ve tried `node app.js` and `node services.js`. I get `ReferenceError: angular is not defined`. Am I way off?

  • Joe Bien

    Had trouble running this app locally. Browser couldn’t find the dependencies. It was due to the “ tag. This was rerouting my paths to the wrong place. I also had to serve the app with `http-server` before the partials would load.

  • Rakesh K B

    Could you please help me with the tutorial video that was posted earlier?

  • Claude Yu

    Hi Sandeep Panda,

    I tried to localise the rest-api without using movieapp-sitepoint… but rather used Strongloop(loopback) as my rest-api and MongoDB as db posted all movies into it and succeeded in CRUD operations within Loopback only. However, when i tried to use your client app(index.html) by using http://localhost:3000/movieApp/index.html got access error. Also when i used Brackets developing tool and ran live preview of index.html only showed simple The Movie App .home no other content available to interact with the Strongloop rest-api. I changed the service.js to point to /api/movies/.id without use. Could you or anyone help solve my stumbling block?

  • snerpripoosel

    Good read. A small typo: change “Entity” to “Entry” during the paragraph in which is written an introductory example of an ‘update’ method.

  • angular developer

    I am so grateful to read this such a wonderful post. Thank you for discussing this great topic. I really admire the writer for allotting their time for this impressive article. Thank you.
    AngularJS Development Company

  • Rawle Juglal

    I know this tutorial was done awhile ago but this was the only issue I had. Thanks for already creating the solution!

  • Anil S

    Hi Sandeep,
    Thanks for the tutorial, it was very useful.
    Could you please share rest services code used here to GET and POST movies data?


  • dorelly2

    “Just note that we will be using Angular UI Router for routing.” That’s really a crime. I won’t read your article. Firstly you may not use Angular-routing in an article describing Angular-resource. Secondly (and even worse) you may not use WHATEVER 3d-party code in an Angular-teaching article.

Get the latest in JavaScript, once a week, for free.