Angular JS contacts App

what is angular js?

Angular js is an open-source javascript framework which is maintained by google. The main activity of the framework is the adaptation of traditional HTML to serve dynamic content. you'll read more about this in the beautiful tutorial by Brian Ford.

Oh yeah, by the way.. They call it the superhero framework (I was just looking for an excuse to use the picture)

How I started.

Angularjs was totally new for me, but i was excited to start a little tryout. So I started with a tutorial from netmagazine.

After doing this tutorial I thought by myself... It doesn't seem to be handy if your contacts only get saved during the time of your session, so I wanted to adapt my contacts app to save the contacts in a json file.

the adaptation

after doing some research I struggled to find a solution which worked with php (instead of node.js, which isn't installed on my server). But when I finally found something, it turned out to be rather easy.

If you want to save your scope to json, all you have to do is post your scope as json format to a php file. via following code:

$http.post('saveJson.php', 
    angular.toJson($scope.contacts)).success(
        function(data) {
            console.log(data);
        }
);

this code should be added in your controllers.js file. Add it to all the actions that require the scope to update (remove, add & edit). The code should be added right before the $location.url('/'); part

After that the php file needs to be created:

<?php
    $data = json_decode(file_get_contents("php://input"));
    $fp = fopen('data.json', 'w');
    fwrite($fp, json_encode($data));
    fclose($fp);
?>

now when you save or remove a contact, your scope gets resaved to your server in the json. Of course this isn't enough, because the json isn't used to read the contacts.

To make this possible we need to create a function getJSON. This can be done by creating a service in the app.js file with following code:

contactManager.service('JSONService', 
    function($http){         
            return {
                getJSON: function() {
                    return $http.get('data.json');
                }
            };
    });

don't forget to add the used services to the AppCtrl:

function AppCtrl ($scope, JSONService, $http,$location)

For the people who like the css, you can just copy and paste this css and save it in your css file:

*,html,body{margin:0;padding:0;font-family:'Roboto',sans-serif;font-weight:300}body{overflow-x:hidden}.hidden{text-indent:-99999px;display:block;height:0;width:0}.bold{font-weight:bold}header#top{background-color:#34495e;color:#ecf0f1;padding:20px;min-height:42px;border-bottom:1px solid #bdc3c7}header#top h1{float:left}.button{float:right;width:42px;height:42px;background-color:#2c3e50;color:#fff;text-decoration:none;line-height:42px;text-align:center;font-size:1.5em;border:0;cursor:pointer}.contact-list li{height:80px;line-height:80px;background-color:#ecf0f1;border-bottom:1px solid #bdc3c7;padding-left:20px}.contact-list li a:not(.delete){text-decoration:none;color:#7f8c8d;display:block;width:100%;height:100%}.delete{background-color:#c0392b;color:#fff !important;margin-right:-45px;text-align:left;padding-left:15px;transition:width .5s;position:relative;top:-60px}.delete:hover{width:87px}.remove-overlay{display:none;position:fixed;background-color:#ecf0f1;border:1px solid #bdc3c7;width:360px;line-height:30px;padding:20px;margin-top:-150px;margin-left:-200px;left:50%;top:50%}.yes{background-color:#2ecc71;margin-right:10px}.no{background-color:#c0392b}

Some interesting blogs concering AngularJS to check out: