Javascript 如何使用AngularJS显示更改的导航菜单'；主动'；是否根据正在查看的路线初始化？

我只想在我的应用程序中显示如下导航菜单：

<ul>
  <li><a href="#/section1">Section 1</a></li>

  <li class="active"><a href="#/section2">Section 2</a></li>

  <li><a href="#/section3">Section 3</a></li>
</ul>

在这里，单击第1节、第2节或第3节将分别触发路线更改。目前，第2节的

具有活动的

类别，这意味着它是当前活动的路线。我只是想移动这个类，例如，如果单击了第3节，我希望第3节的
li
具有活动的
类

实现这一目标的最佳方式是什么
 我是通过使用bootstrap实现的，它可能会帮助您

$('ul.nav > li').click(function (e) {
        e.preventDefault();
        $('ul.nav > li').removeClass('active');
        $(this).addClass('active');                
    });

工作小提琴是
您可以收听$routeChangeSuccess事件（请参阅文档）来检测更改

重新格式化控制器和html，如下所示：

$scope.navList = [
  { url: '/route1', title: 'Route 1'},
  { url: '/route2', title: 'Route 2'},
  { url: '/route3', title: 'Route 3'}
];

<ul>
  <li ng-repeat="item in navList">
    <a ng-class="{active:item.active}" href="#{{item.url}}">{{item.title}}</a>
  </li>
</ul>

请参见中的示例

我将其包装在一个模块中：
控制器功能：

...
$scope.isActive = function (viewLocation) {
  return viewLocation === $location.path();
};
...

这并不是一个真正的角度解决问题的方法。如果用户手动更改浏览器地址栏中的url，这将不起作用。
...
$scope.isActive = function (viewLocation) {
  return viewLocation === $location.path();
};
...