angularconf-dec14

the road to angularjs

Created by Kasper Reijnders / @kaspereden

/me

Kasper Reijnders

Incentro

front-end hero

musician

scouting

sports

that guy with a yellow shirt on

asked colleagues

project

project outgrows boundaries

resources and more and more

not what you expected business adds more

until its so complex

what is actually happening? new colleagues feel? and its getting worse

business wants to optimize for devices (phones) then watches, or glasses

once it was nice, all changes

now its a mess -> refactor

layers

applications

split in layers data, modification (2/3) business logic presentation applications ipv 1 big thing

layers

layers and abstractions logic separated from presentation store data -> lowest level accessible for anyone lets put it to test

split layers, explain model each application has an owner REST is click

start coding!

design patterns

1st explain patterns

mvc

model view controller

need to understand MVC

MVC stands for model view controller. IMAGE The user sees a view, the view is typically some HTML, the HTML gets feeded by some data, the model. When a user changes something on the page the controller is used to update the model and alter the page.

<p><a class="mine" href="#"></a> text</p>
<p class="mine"></p>

<div class="container">
    <input class="mine mineInput"/>
</div>

var model = {
    value: 'nothing'
};

function updateModel() {
    var containers = example1.getElementsByClassName('mine');
    for (var i = 0; i< containers.length; i = i+1) {
        if (containers[i].value !== undefined) {
            containers[i].value = model.value;
        } else {
            containers[i].textContent = model.value;
        }
    }
}

inputs[i].onchange = function() {
    model.value=this.value;
    updateModel();
};

plain js example

nothing text

nothing

not workable big objects

<div class="mine-container"></div>

var view = '<p><a href="#">{{value}}</a> text</p>' +
'<p>{{value}}</p>' +
'<div class="container">' +
    '<input class="mineInput" value="{{value}}"/>' +
'</div>';

example2.getElementsByClassName('mine-container')[0].innerHTML =
        Mustache.render(view, model);

mustache example

#worldofincentro text

#worldofincentro

Update data via MVC pattern
Complex data in model
No userhandling

2klik updates, complex data, no handling (define on change events)

inputs[i].onchange = function() {};

jquery not solve this

recap missing 2-way data binding

angular / ember

angular

why it's cool remember plain JS? cool things like

$scope.value = "my first value";

<p><a href="#">{{value}}</a> text</p>
<p>{{value}}</p>

<div>
    <input ng-model="value"/>
</div>

superhero text

superhero

opel
- astra
toyota
- aygo
- yaris
- auris
- prius
volkswagen
- golf
- polo
- up

    <li ng-repeat="(brand, cars) in carpark">
        <b>{{brand}}</b>
        <ul>
            <li ng-repeat="car in cars">{{car}}</li>
        </ul>
    </li>

    $scope.carpark = {
        volkswagen: ['golf', 'polo', 'up'],
        toyota: ['aygo', 'yaris', 'auris', 'prius'],
        opel: ['astra']
    };

modules

besides this 2-way databinding modularity

build separated

angular.module('search', []);

angular.module('autoComplete', []);

angular.module('search', ['autoComplete']);

project management, git/grunt/bower

yo

yeoman

click!

single page

so what if single page app?

var spa = angular.module('SinglePageApplication', [
    'module_1', 'module_2', 'module_3'
]);

spa.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.otherwise({
            templateUrl: 'spa/templates/404.html',
            controller: '404Ctrl'
        });
    }
]);

var searchapp = angular.module('Search', []);
searchapp.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.when('/search', {
            templateUrl: 'search/templates/search.html',
            controller: 'SearchCtrl'
        });
        $routeProvider.when('/search/:query', {
            templateUrl: 'search/templates/results.html',
            controller: 'SearchResultsCtrl',
            reloadOnSearch: false
        });
    }
]);

choose toolkit
make it available
define code standards

recap

build modular code
split projects into small applications
give them an owner
2-way data binding is awesome
build tools are king
yo

slides at http://kaspereden.github.io/angularconf-dec14 6 li build tools explain jshint & autoprefixer

the road to angularjs – /me – project

kaspereden

the road to angularjs – /me – project

0 1