Components In AngularJS

Who Am I

• Jedediah Smith
• Co-founder @ Online By Design LLC
• jed@obdstudios.com
• JedJS.com

Importance of Modularization

• Increases reuseablity
• Easier to read
• More manageable
• Testable
• Results in easier maintenance

Modularization on the Web

• The future will include web-components
• Today we can use AngularJS's directives

More Directives
Fewer Controllers

• Directives provide separation of concerns at the HTML level
• Controllers susceptible to bloat
• Controllers not really reusable
• Easier to test individual directives then a controller
• AngularJS 2.0 is moving away from controllers

One Approach

• Write your HTML as normal
• Look for potential directives
• Consider
  • Branching
  • Repeating
• Refactor to add directives

Initial HTML

<div class="client-view">
    <label>First Name</label>
    <input type="text" ng-model="user.first_name"/>
    <label>Last Name</label>
    <input type="text" ng-model="user.last_name"/>

    <div ng-if="user.owner">
        <label>Company</label>
        <input type="text" ng-model="user.company_name"/>
    </div>
    <div ng-if="user.worker">
        <label>Employers</label>
        <div ng-repeat="employer in user.employers">
            <input type="text" ng-model="employer"/>
            <span ng-click="removeEmployer($index)">remove</span>
        </div>
    </div>

    <label>E-mails</label>
    <div ng-repeat="email in user.emails">
        <input type="email" ng-model="email"/>
        <span ng-click="removeEmail($index)">remove</span>
    </div>
</div>

Directives in Action:HTML

<div class="client-view">
    <label>First Name</label>
    <input type="text" ng-model="user.first_name"/>
    <label>Last Name</label>
    <input type="text" ng-model="user.last_name"/>

    <user-types company="user.company" ctrl="userCtrl"></user-types>

    <user-emails emails="user.emails" ctrl="userCtrl"></user-types>
</div>

<div>
    <div ng-if="company.owner">
        <label>Company</label><input type="text" ng-model="company.name"/>
    </div>
    <div ng-if="company.worker">
        <label>Employers</label>
        <div ng-repeat="employer in company.employers">
            <input type="text" ng-model="employer"/>
            <remove-button to-remove="ctrl.removeEmployer($index)"></remove-button>
        </div>
    </div>
</div>

Directives in Action:HTML

<div>
    <label>E-mails</label>
    <div ng-repeat="email in emails">
        <input type="email" ng-model="email"/>
        <remove-button to-remove="ctrl.removeEmail($index)"><remove-button>
    </div>
</div>

Pulling out repeated functionality.

<span ng-click="remove()">remove</span>

Directives in Action:JS

 .directive('removeButton', [function() {
    return {
      controller: ['$scope', '$attrs', function($scope, $attrs) {
        this.remove = function() {
          $scope.$eval($attrs.toRemove);
        };
      }]
    }
  }])

 .directive('userCompany', function() {
    return {
      scope: {company: '='},
      controller: ['$scope', '$attrs', function($scope, $attrs) {
        $scope.ctrl = $scope.$eval($attrs.ctrl);
      }
    }
  })

 .directive('userEmails', function() {
    return {
      scope: {emails: '='},
      controller: ['$scope', '$attrs', function($scope, $attrs) {
        $scope.ctrl = $scope.$eval($attrs.ctrl);
      }
    }
  })

Additional Resources

• https://leanpub.com/web-component-development-with-angularjs/read
• https://www.airpair.com/angularjs/workshops/component-based-directives-angularjs
• http://www.michaelbromley.co.uk/blog/267/my-thoughts-on-ngeurope-2014-and-angularjs-2-0
• https://github.com/yearofmoo/angular-scrapbook - Look through the commits to see progression