AngularJS頁面導航

Question

你推薦使用angularjs從導航菜單中導航頁面的方法是什麼？ 頁面將使用ng-include來使頁腳和頁眉具有通用模板。我發現ng-view在頁面之間導航。

Answer 1

在這個例子中，有一個名爲navList的模塊，裏面有一個控制器和一個方法navClass。使用angular.js中的特殊服務$ location來分析瀏覽器中的URL，並使URL在應用程序中可用。最後，將URL哈希與傳遞的參數進行匹配。

var navList = angular.module('navList', []); 
 

 
navList.controller('navCtrl', ['$scope', '$location', function ($scope, $location) { 
 
    $scope.navClass = function (page) { 
 
     var currentRoute = $location.path().substring(1) || 'home'; 
 
     return page === currentRoute ? 'active' : ''; 
 
    };   
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="well sidebar-nav" ng-app="navList"> 
 
    <ul class="nav nav-list" ng-controller="navCtrl"> 
 
     <li ng-class="navClass('home')"><a href='#/home'>Home</a></li> 
 
     <li ng-class="navClass('about')"><a href='#/about'>About Us</a></li> 
 
     <li ng-class="navClass('contact')"><a href='#/contact'>Contact Us</a></li> 
 
    </ul> 
 
</div>

JsFiddle Link

Answer 2

角路由器是你所需要的：

https://github.com/angular-ui/ui-router/blob/master/README.md