/angularjs/

AngularJS - Example App - Part 6

2014-07-14 00:16:48

In this episode we will create small module to manage books. The user will be able to edit details and author information. Also he can add comments to book.

app.js

var louisApp = angular.module('louisApp',
    [
        //..
        'LouisApp.controller.books',
        //...   
    ])

louisApp.config(function ($routeProvider) {

    $routeProvider.
        //...
        when('/books', {templateUrl: 'app/tpl/book/books.tpl.html', controller: 'BooksCtrl'}).
        //..
});

controller.books.js

angular.module('LouisApp.controller.books', [])

    .controller('BooksCtrl', function ($scope, $http) {

        $scope.commentform = {new: ""};

        $http({method: 'GET', url: 'app/mockdata/book/books.json'}).
            success(function (data, status, headers, config) {
                $scope.books = data;
            });

        $scope.details = function (id) {
            $http({method: 'GET', url: 'app/mockdata/book/book_' + id + '.json'}).
                success(function (data, status, headers, config) {
                    $scope.book = data.book;
                    $scope.author = data.author;
                    $scope.comments = data.comments;
                });
        }

        $scope.addComment = function () {
            $scope.comments.push({"id": new Date().getTime(), "comment": $scope.commentform.new});
            $scope.commentform.new = "";
        }

        $scope.saveDetails = function () {
            console.log($scope.book);
        }

        $scope.saveAuthor = function () {
            console.log($scope.author);
        }

        $scope.details(1);
    })
;

books.tpl.html


# Books

<div class='"row"'>
<div class='"col-xs-4"'>
<div class='"panel' panel-default&quot;="">
<div class='"panel-heading"'>
<h3 class='"panel-title"'>Books</h3>
</div>
<div class='"panel-body"'>
<div class='"list-group"'>
<a books&quot;="" class='"list-group-item"' in="" ng-click='"details(item.id)"' ng-repeat='"item'>{{item.name}}</a>
</div>
</div>
</div>
</div>
<div class='"col-xs-8"'>
<div ng-include="" src="&quot;'app/tpl/book/book_details.tpl.html'&quot;"></div>
<div ng-include="" src="&quot;'app/tpl/book/book_author.tpl.html'&quot;"></div>
<div ng-include="" src="&quot;'app/tpl/book/book_comments.tpl.html'&quot;"></div>
</div>
</div>

book_details.tpl.html


<div =="" class='"panel' false&quot;="" ng-init='"edit' panel-default&quot;="">
<div class='"panel-heading"'>
<h3 class='"panel-title"'>Details</h3>
<div class='"panel-action"'>
<button !edit&quot;="" =="" btn-sm="" btn-success="" class='"btn' ng-click='"edit' ng-show='"!edit"' pull-right&quot;=""><span class='"glyphicon' glyphicon-pencil&quot;=""></span> Edit
            </button>
<button !edit;="" =="" btn-sm="" btn-success="" class='"btn' ng-click='"edit' ng-show='"edit"' pull-right&quot;="" savedetails()&quot;=""><span class='"glyphicon' glyphicon-pencil&quot;=""></span> Save
            </button>
</div>
</div>
<div class='"panel-body"'>
<form class='"simple-form"' novalidate="">
<div class='"form-group"'>
<label>Name</label>
<input class='"form-control"' ng-model='"book.name"' ng-show='"edit"' type='"text"'/>
<p ng-show='"!edit"'>{{book.name}}</p>
</div>
</form>
</div>
</div>

book_author.tpl.html


<div =="" class='"panel' false&quot;="" ng-init='"edit' panel-default&quot;="">
<div class='"panel-heading"'>
<h3 class='"panel-title"'>Author</h3>
<div class='"panel-action"'>
<button !edit&quot;="" =="" btn-sm="" btn-success="" class='"btn' ng-click='"edit' ng-show='"!edit"' pull-right&quot;=""><span class='"glyphicon' glyphicon-pencil&quot;=""></span> Edit</button>
<button !edit;="" =="" btn-sm="" btn-success="" class='"btn' ng-click='"edit' ng-show='"edit"' pull-right&quot;="" saveauthor();&quot;=""><span class='"glyphicon' glyphicon-pencil&quot;=""></span> Save</button>
</div>
</div>
<div class='"panel-body"'>
<div class='"form-group"'>
<label>Name</label>
<input class='"form-control"' ng-model='"author.name"' ng-show='"edit"' type='"text"'/>
<p ng-show='"!edit"'>{{author.name}}</p>
</div>
<div class='"form-group"'>
<label>Surname</label>
<input class='"form-control"' ng-model='"author.surname"' ng-show='"edit"' type='"text"'/>
<p ng-show='"!edit"'>{{author.surname}}</p>
</div>
</div>
</div>

book_comments.tpl.html


<div =="" class='"panel' false&quot;="" ng-init='"add' panel-default&quot;="">
<div class='"panel-heading"'>
<h3 class='"panel-title"'>Comments</h3>
<div class='"panel-action"'>
<button !add&quot;="" =="" btn-sm="" btn-success="" class='"btn' ng-click='"add' ng-show='"!add"' pull-right&quot;=""><span class='"glyphicon' glyphicon-leaf&quot;=""></span> Add</button>
<button !add;="" =="" addcomment();&quot;="" btn-sm="" btn-success="" class='"btn' ng-click='"add' ng-show='"add"' pull-right&quot;=""><span class='"glyphicon' glyphicon-leaf&quot;=""></span> Save</button>
</div>
</div>
<div class='"panel-body"'>
<div comments&quot;="" in="" ng-repeat='"comment'><b>{{$index+1}}</b> {{comment.comment}}</div>
<form>
<div class='"form-group"' ng-show='"add"'>
<label>New</label>
<textarea class='"form-control"' ng-model='"commentform.new"' rows='"3"'></textarea>
</div>
</form>
</div>
</div>

books.json

[
    {
        "id": 1,
        "name": "Lorem ipsum 1"
    },
    {
        "id": 2,
        "name": "Lorem ipsum 2"
    },
    {
        "id": 3,
        "name": "Lorem ipsum 3"
    }
]

book_1.json

{
    "book":{
        "id": 1,
        "name": "Lorem ipsum 1"
    },
    "author":{
        "name":"LoremA",
        "surname":" IpsumB"
    },
    "comments":[
        {"id":1,"comment":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.c1"},
        {"id":2,"comment":"Mauris varius lacus nec lacus venenatis rutrum.c2"},
        {"id":3,"comment":"In auctor id eros in dignissim.c3"}
    ]
}

GitHub and example