/angularjs/

AngularJS - Example App - Part 3

2014-06-30 23:39:33

In this episode we will create:

  • list with some items
  • after click on item we will show details component
  • each details component, should contain own layout configuration

Step 1. Add new controller to app.js

var louisApp = angular.module('louisApp',
    [
        // ...
        'LouisApp.controllers.splitter',
           // ....
        ])

louisApp.config(function ($routeProvider) {

    $routeProvider.
        // ...
        when('/splitter', {templateUrl: 'app/tpl/splitter.tpl.html', controller: 'SplitterCtrl'}).
        // ...
});

Create new controller

angular.module('LouisApp.controllers.splitter', [])

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

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

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

Remember to add this new file to index.html

Now is time for data

splitter.json

[
    {
        "id": 1,
        "name": "Lorem ipsum dolor sit amet"
    },
    {
        "id": 2,
        "name": "Ut nec posuere enim"
    },
    {
        "id": 3,
        "name": "Vestibulum adipiscing sed nulla vel tincidunt"
    }
]

splitter_1.json

{
    "config": {
        "showActionBar": true,
        "labelType": "success",
        "showForm": true,
        "showPhotos": false
    },
    "data": {
        "id": 1,
        "name": "Lorem ipsum dolor sit amet",
        "subname": "Aliquam sed aliquet odio",
        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing e..."
    }
}

splitter_2.json

{
    "config": {
        "showActionBar": false,
        "labelType": "info",
        "showForm": false,
        "showPhotos": false
    },
    "data": {
        "id": 2,
        "name": "Ut nec posuere enim",
        "subname": "Vivamus in facilisis tortor",
        "desc": "Ut nec posuere enim, consectetur adipiscing elit. Aliquam sed aliquet odio. ...",
        "list": [
            {
                "name": "Lorem 1",
                "status": 1,
                "date": 1404163915339
            },
            {
                "name": "Lorem 2",
                "status": 2,
                "date": 1404163925339
            },
            {
                "name": "Lorem 3",
                "status": 3,
                "date": 1404163935339
            },
            {
                "name": "Lorem 4",
                "status": 4,
                "date": 1404163945339
            }
        ]
    }
}

splitter_3.json

{
    "config": {
        "showActionBar": true,
        "labelType": "warning",
        "showForm": false,
        "showPhotos": true
    },
    "data": {
        "id": 3,
        "name": "Vestibulum adipiscing sed nulla vel tincidunt",
        "subname": "Suspendisse blandit turpis convallis mattis faucibus",
        "desc": "Vestibulum adipiscing sed nulla vel tincidunt, consectetur adipiscing elit. ..."
    }
}

Template

splitter.tpl.html


# Splitter

<div class='"row"'>
<div class='"col-xs-4"'>
<div class='"panel' panel-default&quot;="">
<div class='"panel-heading"'>
<h3 class='"panel-title"'>Items list</h3>
</div>
<div class='"panel-body"'>
<div class='"list-group"'>
<a class='"list-group-item"' in="" list&quot;="" ng-click='"details(item.id)"' ng-repeat='"item'>{{item.name}}</a>
</div>
</div>
</div>
</div>
<div class='"col-xs-8"'>
<div class='"panel' panel-default&quot;="">
<div class='"panel-heading"'>
<h3 class='"panel-title"'>Item details</h3>
</div>
<div class='"panel-body"'>
<div ng-include="" src="&quot;'app/tpl/splitter-general.tpl.html'&quot;"></div>
<div ng-include="" ng-show='"oneitem.list"' src="&quot;'app/tpl/splitter-list.tpl.html'&quot;"></div>
<div ng-include="" ng-show='"config.showForm"' src="&quot;'app/tpl/splitter-form.tpl.html'&quot;"></div>
<div ng-include="" ng-show='"config.showPhotos"' src="&quot;'app/tpl/splitter-photos.tpl.html'&quot;"></div>
</div>
</div>
</div>
</div>

Remark, take a look at ng-show and ng-include src, this is important part of this template.

splitter-general.tpl.html


<div alert-warning&quot;="" class='"alert' ng-show='"!oneitem"' role='"alert"'>
<strong>Ah...</strong> Please choose something from the list.
</div>

<nav class='"pull-right"' ng-show='"config.showActionBar"'>
<button btn-sm="" btn-success&quot;="" class='"btn'><span class='"glyphicon' glyphicon-leaf&quot;=""></span> Edit</button>
<button btn-default&quot;="" btn-sm="" class='"btn' type='"button"'><span class='"glyphicon' glyphicon-tasks&quot;=""></span>
        Remove
    </button>
</nav>

<span class='"label' label-{{config.labeltype}}&quot;="" ng-show='"config.labelType"'>{{oneitem.subname}}</span>

## {{oneitem.name}}

{{oneitem.desc}}

splitter-list.tpl.html


<table class='"table' table-striped&quot;="">
<thead>
<tr>
<th width='"70%"'>Name</th>
</tr>
</thead>
<tbody>
<tr in="" ng-repeat='"item' oneitem.list&quot;="">
<td>
            {{ item.name }}
        </td>
</tr>
</tbody>
</table>

splitter-form.tpl.html


<form class='"form-horizontal"' role='"form"'>
<div class='"form-group"'>
<label class='"col-sm-2' control-label&quot;="" for='"inputName"'>Name</label>
<div class='"col-sm-10"'>
<input class='"form-control"' id='"inputName"' placeholder='"Name"' type='"email"'/>
</div>
</div>
<div class='"form-group"'>
<label class='"col-sm-2' control-label&quot;="" for='"inputName"'>Desc</label>
<div class='"col-sm-10"'>
<textarea class='"form-control"' rows='"3"'></textarea>
</div>
</div>
<div class='"form-group"'>
<div class='"col-sm-offset-2' col-sm-10&quot;="">
<div class='"checkbox"'>
<label>
<input type='"checkbox"'/> it is awesome
                </label>
</div>
</div>
</div>
<div class='"form-group"'>
<div class='"col-sm-offset-2' col-sm-10&quot;="">
<button btn-sm="" btn-success&quot;="" class='"btn'><span class='"glyphicon' glyphicon-leaf&quot;=""></span> Yep</button>
</div>
</div>
</form>

splitter-photos.tpl.html


<div bs-example-images&quot;="" class='"bs-example'>
<img 140px;="" 140px;&quot;="" alt='"140x140"' class='"img-rounded"' data-src='"holder.js/140x140"' height:="" src='"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjcwIiB5PSI3MCIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMnB4O2ZvbnQtZmFtaWx5OkFyaWFsLEhlbHZldGljYSxzYW5zLXNlcmlmO2RvbWluYW50LWJhc2VsaW5lOmNlbnRyYWwiPjE0MHgxNDA8L3RleHQ+PC9zdmc+"' style='"width:'/>
<img 140px;="" 140px;&quot;="" alt='"140x140"' class='"img-circle"' data-src='"holder.js/140x140"' height:="" src='"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjcwIiB5PSI3MCIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMnB4O2ZvbnQtZmFtaWx5OkFyaWFsLEhlbHZldGljYSxzYW5zLXNlcmlmO2RvbWluYW50LWJhc2VsaW5lOmNlbnRyYWwiPjE0MHgxNDA8L3RleHQ+PC9zdmc+"' style='"width:'/>
<img 140px;="" 140px;&quot;="" alt='"140x140"' class='"img-thumbnail"' data-src='"holder.js/140x140"' height:="" src='"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjcwIiB5PSI3MCIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMnB4O2ZvbnQtZmFtaWx5OkFyaWFsLEhlbHZldGljYSxzYW5zLXNlcmlmO2RvbWluYW50LWJhc2VsaW5lOmNlbnRyYWwiPjE0MHgxNDA8L3RleHQ+PC9zdmc+"' style='"width:'/>
</div>

Result

All code for this episode you can find on GitHub and here you have example