The Evolution

of an angular js

developer

ME = {
            NAME: 'Todd B.Adams',

            linkedin: 'toddbadams',

            outlook: 'toddbadams',

            jsfiddle: 'toddbadams'

            letters: ['BSc EE', 'MSc CS']

     };

AngularJS lets you extend

HTML vocabulary

for your application.

A Simple Controller

<div data-ng-controller="myController">
    <table class="table table-striped table-bordered">
        <thead><tr><th>id</th><th>name</th></tr></thead>
        <tbody>
            <tr data-ng-repeat="item in items">
                <td>{{item.id}}</td><td>{{item.name}}</td>
            </tr>
        </tbody>
    </table>
    <ul class="pagination">
        <li data-ng-class="{disabled: isPrevDisabled}">
            <a data-ng-click="prev()">&laquo;</a>
        </li>
        <li data-ng-repeat="page in pages" 
               data-ng-class="{active: current===page}">
            <a data-ng-click="goto(page)">{{page}}</a>
        </li>
        <li data-ng-class="{disabled: isNextDisabled}">
            <a data-ng-click="next()">&raquo;</a>
        </li>
    </ul>
</div>

Add a Service

<div data-ng-controller="myController">
    <table class="table table-striped table-bordered">
        <thead><tr><th>id</th><th>name</th></tr></thead>
        <tbody>
            <tr data-ng-repeat="item in items">
                <td>{{item.id}}</td><td>{{item.name}}</td>
            </tr>
        </tbody>
    </table>
    <ul class="pagination">
        <li data-ng-class="{disabled: isPrevDisabled}">
            <a data-ng-click="prev()">&laquo;</a>
        </li>
        <li data-ng-repeat="page in pages" 
               data-ng-class="{active: current===page}">
            <a data-ng-click="goto(page)">{{page}}</a>
        </li>
        <li data-ng-class="{disabled: isNextDisabled}">
            <a data-ng-click="next()">&raquo;</a>
        </li>
    </ul>
</div>

LAYERS/TIERS IN A MODERN APP

Paging Value Object

Properties

start,

limit,

total

Paging Service

Methods

currentPage(pagingVO),

maxPage(pagingVO),

isNextEnabled(pagingVO),

next(pagingVO),

isPrevEnabled(pagingVO),

prev(pagingVO),

gotoPage(pagingVO),

pagesArray(pagingVO),

bind(pagingVO, request)

Paging Directive

<div data-ng-controller="myController">
    <table class="table table-striped table-bordered">
        <thead><tr><th>id</th><th>name</th></tr></thead>
        <tbody>
            <tr data-ng-repeat="item in items">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
            </tr>
        </tbody>
    </table>
    <pagination></pagination>
</div>

Lessons Learned

Develop using TDD/BDD/DDD first!

Then bolt on frameworks