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

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


    The Evolution of an Angular JS Developer

    By Todd Adams

    Made with Slides.com

    The Evolution of an Angular JS Developer

    We will learn about the basics of factories, controllers, and directives. However as these objects become unwieldy a better development process is required. We will look at an example problem of paging through a table of items, construct first a controller, and then evolve to a directive and factory. Finally we will see how to apply TDD/BDD/DDD to developing scalable Angular JS applications using our example problem.

    • 3,160

    More from Todd Adams