Code Samples from the Article "The AngularJS Way"

dropdown-menu-dom.html

<ul class="main-menu">
    <li class="active">
        <a href="#/home">Home</a>
    </li>
    <li>
        <a href="#/menu1">Menu 1</a>
        <ul>
            <li><a href="#/sm1">Submenu 1</a></li>
            <li><a href="#/sm2">Submenu 2</a></li>
            <li><a href="#/sm3">Submenu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#/home">Menu 2</a>
    </li>
</ul>

jquery-data-binding.html

<ul class="messages" id="log">
</ul>

jquery-data-binding.js

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
});

jquery-directive.js

.directive( 'myDirective', function () {
  return {
    template: '<a class="btn">Toggle me!</a>',
    link: function ( scope, element, attrs ) {
      var on = false;

      $(element).click( function () {
        if ( on ) {
          $(element).removeClass( 'active' );
        } else {
          $(element).addClass( 'active' );
        }

        on = !on;
      });
    }
  };
});

jquery-menu.js

$('.main-menu').dropdownMenu();

ng-data-binding-2.html

<div class="messages">
  <div class="alert" ng-repeat="entry in log">
     {{ entry.msg }}
  </div>
</div>

ng-data-binding.html

<ul class="messages">
  <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

ng-data-binding.js

$http( '/myEndpoint.json' ).then( function ( response ) {
  $scope.log.push( { msg: 'Data Received!' } );
});

ng-dropdown-menu-dom.html

<ul class="main-menu" dropdown-menu>
    <li class="active">
        <a href="#/home">Home</a>
    </li>
    <li>
        <a href="#/menu1">Menu 1</a>
        <ul>
            <li><a href="#/sm1">Submenu 1</a></li>
            <li><a href="#/sm2">Submenu 2</a></li>
            <li><a href="#/sm3">Submenu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#/home">Menu 2</a>
    </li>
</ul>

plain-directive.js

.directive( 'myDirective', function () {
  return {
    scope: true,
    template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
    link: function ( scope, element, attrs ) {
      scope.on = false;

      scope.toggle = function () {
        scope.on = !scope.on;
      };
    }
  };
});

tdd-component.js

.directive( 'whenActive', function ( $location ) {
  return {
    scope: true,
    link: function ( scope, element, attrs ) {
      scope.$on( '$routeChangeSuccess', function () {
        if ( $location.path() == element.attr( 'href' ) ) {
          element.addClass( 'active' );
        } else {
          element.removeClass( 'active' );
        }
      });
    }
  };
});

tdd-dom.html

<a href="/hello" when-active>Hello</a>

tdd-test.js

it( 'should add "active" when the route changes', inject(function() {
  var elm = $compile( '<a href="/hello" when-active>Hello</a>' )( $scope );

  $location.path('/not-matching');
  expect( elm.hasClass('active') ).toBeFalsey();

  $location.path( '/hello' );
  expect( elm.hasClass('active') ).toBeTruthy();
}));