Chris Matheson


@chrismatheson
github.com/chrismatheson
#mancjs

"Profesional"developer

for

{{months}}Months {{days}}Days {{hours}}Hours {{minutes}}Minutes {{seconds}}seconds

NO EXCUSES!


iVendi is a used/new car finance system

providing finance services for dealerships


Check it out -- http://www.ivendi.com

Technologies

Client Side

Build Tools

Backend

Walkthrough

Dealer Application NewVehicle

Binding

Magic

Custom validators

Valid while exactly 6 digits

Valid: {{exampleA.$valid}}

Within a directive decliration we can hook into binding

var regex = /[0-9]{2}[0-9]{2}[0-9]{2}/;

function validate(inputString) {
    var validity = regex.test(inputString) && inputString.length === 6;
    ngModel.$setValidity('sortcode', validity);
    return inputString;
}

function stripDashes(inputString) {
    return inputString.replace(/-/g, '');
}

ngModel.$parsers.push(stripDashes);
ngModel.$parsers.push(validate);

Something a little harder

One Value, Two inputs

Creating a first-class citizen binding control with

ngModel.$render = function renderYearsMonths() {
    if (angular.isNumber(ngModel.$modelValue)) {
        $months.val(ngModel.$modelValue % 12);
        $years.val(Math.floor(ngModel.$modelValue / 12));
    } else {
        $inputs.val('');
    }
};

function parseInputs() {
    //if no inputs then bail
    if (years === '' && months === '') {
        ngModel.$setViewValue(undefined);
        return undefined;
    }
    //otherwise we want to convert the empty string to a 0 before continuing
    years = years === '' ? '0' : years; months = months === '' ? '0' : months;
    years  = parseInt(years, 10); months = parseInt(months, 10);

    if (isNaN(years) && isNaN(months)) {
        ngModel.$setViewValue(undefined);
    } else {
        ngModel.$setViewValue((years * 12) + months);
    }
}

View Management

                        
    .when('/platform/prospects/:id/finance', {
        templateUrl: 'prospects/finance.tpl.html',
        controller: 'FinanceController',
        auth: true,
        reloadOnSearch: false,
        resolve: {
            prospect: function () {
                return //doing some stuff and returning POJS;
            }]
        }
    })
    .controller('FinanceController', ['prospect', function (prospect) {
        'use strict';

Components

  • <custom-elements></custom-elements>
  • isolated scope and inherited scope

View Management

                        
    .when('/platform/consumerprospects/:id/finance', {
        templateUrl: 'consumerprospects/finance.tpl.html',
        controller: 'ConsumerFinanceController',
        auth: true,
        reloadOnSearch: false,
        resolve: {
            consumerProspect: function () {
                return //doing some stuff and returning POJS;
            }]
        }
    })
    .controller('ConsumerFinanceController', ['consumerProspect', function (consumerProspect) {
        'use strict';

Lessons Learnt

  • Dont - Component-all-the-things
  • relative URL's are not your friend - when(:url:) does not obey <base>
  • No lazy load of Modules

Grunt vs Gulp.

In the pipeline

  • Chat Module, multi user
  • Leveragge elastic search
  • Stock manager
  • Advanced user management, mascarading

Open Source

iv-utils