Angular Directives versus React Components

Angular Controller

'use strict';

/**
 * @ngdoc object
 * @name dashboard.controller:DashboardCtrl
 *
 * @description
 *
 */
angular
  .module('dashboard')
  .controller('DashboardCtrl', function (DashboardService) {
    var vm = this;
    vm.ctrlName = 'DashboardCtrl';

    vm.user = {
      name:  '',
      imgsrc: '',
      repos: []
    };

    vm.isSearchValid = true;

    vm.searchUser = function (query) {
      DashboardService.searchUser(query)
        .success(function (res) {
          vm.isSearchValid = true;
          if(!res.total_count) {
            vm.isSearchValid = false;
          }
          vm.user.name = res.items[0].login;
          vm.user.imgsrc = res.items[0].avatar_url;
          getUserRepos(vm.user.name);
        });
    };

    function getUserRepos(user) {
      DashboardService.searchRepos(user).success(function (res) {
        vm.user.repos = res;
      });
    }
  });

Angular Template

<div class="dashboard">
  <div class="ui action input">
    <form ng-submit="dashboard.searchUser(dashboard.searchInput)">
      <input type="text" ng-model="dashboard.searchInput" placeholder="Search Github User Profiles..."/>
      <div class="ui button" ng-click="dashboard.searchUser(dashboard.searchInput)">Search</div>
    </form>
  </div>
  <div class="result" ng-show="dashboard.isSearchValid">
    <div>
      <label>{{dashboard.user.name}}</label>
      <br/>
      <img id="gravitar-image" ng-src="{{dashboard.user.imgsrc}}"/>
    </div>
    <div class="repo-list">
      <ul>
        <li ng-repeat="repo in dashboard.user.repos">
          {{repo.name}}
        </li>
      </ul>

    </div>
  </div>
  <h1 ng-hide="dashboard.isSearchValid">No results match your query.</h1>


  <div class='search-results'>
  </div>
</div>

React Component

/** @jsx React.DOM */
var React = require('react');
var Reflux = require('reflux');
var store = require('../../stores/githubStore');
var actions = require('../../actions/githubActions');


var SearchInput = React.createClass({
  handleSearch(event) {
    actions.searchUser(this.refs.searchInput.getDOMNode().value);
  },
  render() {
    return (
      <div className='dashboard'>
        <div className="ui action input">
          <form onSubmit={this.handleSearch}>
            <input type="text" ref="searchInput" placeholder="Search Github User Profiles..."/>
            <div className="ui button" onClick={this.handleSearch}>Search</div>
          </form>
        </div>
        <SearchResults/>
      </div>
    )
  }
});

var SearchResults = React.createClass({
  mixins: [Reflux.connect(store,"searchResults")],
  getInitialState() {
    return {
      searchResults: {
        repos: [],
        user: {}
      }
    };
  },
  render() {
    var results;
    if(this.state.searchResults && this.state.searchResults.user) {
      results = (
        <div className="result">
          <UserInfo name={this.state.searchResults.user.login} imgSrc={this.state.searchResults.user.avatar_url} />
          <div className="repo-list">
            <ul>
              {this.state.searchResults && this.state.searchResults.repos && this.state.searchResults.repos.map((repo) => {
                return <li key={repo.id}>{repo.name}</li>
              })}
            </ul>

          </div>
        </div>
      )
    } else {
      results = <h1>No results match your query.</h1>
    }
    return (
      <div className='search-results'>
        {results}
      </div>
    )
  }
});

var UserInfo = React.createClass({
  render() {
    return (
      <div>
        <label>{this.props.name}</label>
        <br/>
        <img id="gravitar-image" src={this.props.imgSrc}/>
      </div>
    );
  }
});

module.exports = SearchInput;