使用angularjs写一个导航栏控制器

    这两天用angular写博客前端的时候专门写了个NavController来管理导航栏。下面是代码，暂时功能还比较简单，有需要的话会不断更新。

     首先是javascript代码。NavController有两个重点，第一是打开页面时要根据url选择当前栏目，其中的逻辑集中在NavController init的时候；第二是点击栏目时，active点击的栏目，并跳转。

angular.module('blog.controllers')
  .controller('NavController', function($scope, $location) {

    // Public.
    // "navItems"存储着导航栏的栏目。
    $scope.navItems = [
      {
        title: 'Home',
        locationUrl: '/',
        href: '/app/index.html#' + '/'
      },
      {
        title: 'About Me',
        locationUrl: '/aboutMe',
        href: '/app/index.html#' + '/aboutMe'
      },
      {
        title: 'Management',
        locationUrl: '/manageHome',
        href: '/app/index.html#' + '/manageHome'
      },
    ]
    // .selectedNavItem变量存储当前选择项，默认的选择项是"Home"。
    $scope.selectedNavItem = 'Home'
    // 栏目click时触发的方法。
    $scope.itemClick = function(itemTitle) {
      $scope.selectedNavItem = itemTitle
    }
    // 初始化。
    // 判断当前地址栏路径属于哪个导航栏目。
    var currentLocation = $location.path()
    for (var i = 0, len = $scope.navItems.length; i < len; i++) {
      var navItem = $scope.navItems[i]
      if (currentLocation == navItem.locationUrl) {
        $scope.selectedNavItem = navItem.title
      }
    }
  });

    然后是html，下面是简化后的代码：

<ul>
  <li ng-repeat="navItem in navItems" ng-class="{active: selectedNavItem == navItem.title}" ng-click="itemClick(navItem.title)"><a href="{{navItem.href}}">{{navItem.title}}</a></li>
</ul>

    "na-repeat"遍历所有的的栏目；"ng-class"里面的active是一个css类，通过selectedNavItem来判断是否设active为true，值得留意的是ng-class会监听selectedNavItem的改变，这种监听是angular的核心功能之一，能帮我们省去很多麻烦；"ng-click"设置该项的点击事件。

  整个功能比较简单，最后说明一下其中的执行逻辑。当从浏览器的地址栏加载一个地址并进入该app时，一个新的NavController会被初始化，这时候就要通过地址栏来判断应该active的navItem；当点击其中一个navItem时，因为使用"#"锚来跳转，页面不会重新加载，因此要用一个click事件来设置selectedNavItem。