Tutorials , code & Inspiration

Complete guide To Crud In Angularjs For Beginners

CRUD stands for Create, Read, Update, and Delete—everything we need to build a functional contact manager. We’ll look at each letter of this acronym in detail and see how we can take full advantage of Angular.


For the time being, we’re going to ignore create and skip straight to read. We’re going to use dummy data in the form of an array of objects in our controller. Let’s first look at how this data is going to be formatted, and exactly what we need to include:

.controller('indexCtl', function($scope){

    $scope.contacts = [
            name: 'dunebook dotcom',
            phone: '0123456789',
            address: '123, Some Street\India\INt1 2bB',
            email: '[email protected]',
            website: 'dunebook.com',
            notes: ''
            name: 'dunebook com',
            phone: '0123456789',
            address: '123, Some Street\India\INt1 2bB',
            email: '[email protected]',
            website: 'dunebook.com',
notes: 'Some notes about the contact.' } ]; })

You’ll notice we’ve attached the array directly to the scope, which, as we know, means we can now access it directly within our view. Using the ng-repeat directive , Let’s Build with angularjs and Bootstrap, we can loop through our array to display the contacts in our table:

<tr ng-repeat="contact in contacts">
  <td><a href="/contact/{{$index}}" class="btn btn-default btn-xs">View</a></td>

By now, I’m sure that this is looking very familiar to you. We’ve attached our directive to the element we wish to repeat (in this case, our table row), and have used the double curly brace syntax to display our contact data.

In our link, you’ll notice that we’ve got something a little different. The ng-repeat directive allows us to grab the index of the current object using $index. You’ll remember our single contact route accepts an ID number. We’re using the index of our array as this ID so we can easily access the contact when we need to.

prevChapter 1 of 8


Get the best in web dev

Join dunebook.com and recieve best in web dev , once a week FREE

An email has been Sent to your Inbox ! Please Confirm your Subscription :)

Pin It on Pinterest