使用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。