Event driven AngularJS code, case study

Question

Coming back from a jQuery background I find myself having a "procedural" way of seeing this when it comes ti "in-view" interactions.

The problem is, this approach leads to ALLOT of errors and the code is not maintainable.

So I have been reading on event driven JavaScript and tried to apply this concept on AngularJS.

For this, I thought about a user submitting a form, having two steps and resetting everything to an original state.

This is what I came up with: here is a plunker

1. How do you feel about this style of programming in Angular?

2. How would you optimize the code?

3. How would you do it?

Bellow is the code:

<div ng-controller="TheController" ng-init="events.init()">

        <p ng-if="showName">Name: <input type="text"></p>
        <p ng-if="showAge">Age: <input type="text"></p>

        <p ng-if="showHeight">Height: <input type="text"></p>
        <p ng-if="showWeight">Weight: <input type="text"></p>

        <button ng-if="showButtonOne" ng-click="events.submittedAgeAndName()">Submit age and name</button>

        <button ng-if="showButtonTwo" ng-click="events.submittedHeightAndWright()">Submit height and weight</button>

        <p ng-if="showThankYou">Thank you for submitting!</p>

        <button ng-if="showGetEverythingBack" ng-click="events.getEverythingBack()">Get everything back!</button>
    </div>

    <script type="text/javascript">

        var app = angular.module('app', []);

        app.controller('TheController', function ($scope) {

            $scope.events = {
                'init': function () {
                    $scope.showName = true;
                    $scope.showAge = true;
                    $scope.showHeight = false;
                    $scope.showWeight = false;
                    $scope.showThankYou = false;
                    $scope.showButtonOne = true;
                    $scope.showButtonTwo = false;
                    $scope.showGetEverythingBack = false;
                },
                'submittedAgeAndName': function () {
                    $scope.showName = false;
                    $scope.showAge = false;
                    $scope.showHeight = true;
                    $scope.showWeight = true;
                    $scope.showThankYou = false;
                    $scope.showButtonOne = false;
                    $scope.showButtonTwo = true;
                    $scope.showGetEverythingBack = false;
                },
                'submittedHeightAndWright': function () {
                    $scope.showName = false;
                    $scope.showAge = false;
                    $scope.showHeight = false;
                    $scope.showWeight = false;
                    $scope.showThankYou = true;
                    $scope.showButtonOne = false;
                    $scope.showButtonTwo = false;
                    $scope.showGetEverythingBack = true;
                },
                'getEverythingBack': function () {
                    this.init();
                }
            }
        });
</script>

Answer 1

1. How do you feel about this style of programming in Angular?

   • Way too many pointless variables
   • With no purpose for all events really no function is needed, but if you do you just change the step inside like reset in the plunker.

2. How would you optimize the code?

   • Declarative html, data-binding, use directives, all the regular angular principles.
   • I would probably put the whole wizard in a directive, which would tuck away a lot of the template html and make the code more reusable.

3. How would you do it?

Here's a Plunker

  <div ng-switch="events.step">
     <div ng-switch-when="1"><button ng-click="events.step=2">next</button></div>
     <div ng-switch-when="2"><button ng-click="events.step=3">next</button></div>
     <div ng-switch-when="3"><button ng-click="events.reset();">back</button></div>
 </div>