やりたいこと

ヘッダーのメニュー部分において、アクセスしているページに対応したハイライトを行いたい。

ルートにいるときはHomeがハイライトされる
AboutページにいるときはAboutがハイライトされる

環境

YEOMANをいれたばっかり
- angularJS
- grunt
- bower

流れ

controllerにアクセスしているページのpathを取得
取得した文字列とメニューの内容が合致するかチェックし、合致するメニューのliタグにactiveクラスを付与

Controllerにアクセスしているページのpathを取得

controllers/main.js

angular.module('myApp')
  .controller('MainCtrl', function ($scope, $location) {
    $scope.isActive = function (viewLocation) {
         var active = (viewLocation === $location.path());
         return active;
    };
  });

$location.path()で今アクセスしているページのpathを取得できます。
もし、isActiveで投げた文字列とpathが合致していたら、trueが帰ってきます。

取得した文字列とメニューの内容が合致するかチェックし、合致するメニューのliタグにactiveクラスを付与

index.html

<ul class="nav navbar-nav" ng-controller="MainCtrl">
  <li ng-class="{ active: isActive('/') }"><a href="#/">Home</a></li>
  <li ng-class="{ active: isActive('/about') }"><a ng-href="#/about">About</a></li>
  <li ng-class="{ active: isActive('/contact') }"><a ng-href="#/">Contact</a></li>
</ul>

ng-controllerでMainCtrlを指定して、その中で先ほど記述したisActiveを呼び出します。
trueであれば、activeクラスがliタグに付与されます。

所感

今回は右も左も分からない状況だったので、MainCtrlに書いて操作していますが、タブメニューはウェブサイト全体に及ぶものなので、より正しい書くべき場所・書き方があると思います。(；´Д｀)
MainCtrlにたくさん書くことになったら重く?なりそうだし...
やはりapp.jsに書くべきなのかな...

activeクラスを付与する方法が掲載されているサイトはたくさんあったのですが、とりあえずYEOMANいれたけどcontrollerって何〜〜〜から入ったので、そんな人のために投稿しました。

参考

How do I implement the bootstrap navbar active class with Angular JS - Stackoverflow