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.

Read

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>{{contact.name}}</td>
  <td>{{contact.email}}</td>
  <td>{{contact.phone}}</td>
  <td><a href="/contact/{{$index}}" class="btn btn-default btn-xs">View</a></td>
</tr>

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.

Recommended :  how to Transform collections in laravel

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.

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares