路由到子菜單Angularjs

在這個示例中，我需要的是，在plnkr.co/edit/5FVrydtTPWqYMhhLj03e?p=preview中，當我單擊聯繫號碼按鈕時，它將重定向到聯繫人中的聯繫號碼頁面。路由到子菜單Angularjs

我使用Angular JS，希望有人能幫助我。

scotchApp.config(function($routeProvider) { 
    $routeProvider 

     // route for the home page 
     .when('/', { 
      templateUrl : 'pages/home.html', 
      controller : 'mainController' 
     }) 

     // route for the about page 
     .when('/about', { 
      templateUrl : 'pages/about.html', 
      controller : 'aboutController' 
     }) 

     // route for the contact page 
     .when('/contact', { 
      templateUrl : 'pages/contact.html', 
      controller : 'contactController' 
     }); 
});

貸https://scotch.io/tutorials/angular-routing-using-ui-router因爲我分叉他們的榜樣

來源

2016-03-05 bleykFaust

你的代碼顯示了NG-路線的例子，但你所提供的鏈接是一個UI路由器的例子。（$ routeProvider vs $ stateProvider）。

如果你會使用$stateProvider從角UI的路由器來定義你將使用在整個應用程序的狀態會probabably更像以下幾點：

$stateProvider.state('home', { 
    controller: 'mainController', 
    url: '/', 
    templateUrl: 'pages/home.html' 
}); 
$stateProvider.state('about', { 
    controller: 'aboutController', 
    url: '/about', 
    templateUrl: 'pages/about.html' 
}); 
$stateProvider.state('contact', { 
    controller: 'contactController', 
    url: '/contact', 
    templateUrl: 'pages/contact.html' 
});

你看到一個定義一個狀態使用一個字符串來標識自己：例如：'home'，'contact'等。您可以使用來自ui-router的$state服務，並使用\[go(to, params, options)\]方法結合此標識符在狀態之間切換。

過渡到新狀態的便捷方法。 $ state.go在內部調用 $ state.transitionTo，但自動將選項設置爲{ location：true，inherit：true，relative：$ state。$ current，notify：true }。這允許您輕鬆使用絕對路徑或相對路徑，並且只指定您想要更新的參數（同時允許未指定的參數從當前活動祖先的狀態繼承）。

所有您需要做的就是將您的maincontroller中的按鈕事件耦合到您的按鈕事件中。即：將$state注入您的mainController，並在您的按鈕中將ng-click耦合到執行$state.go()的函數。

<button type="submit" ng-click="$state.go('contact')">Contact Numbers</button>

來源

2016-03-05 08:13:27 skubski

http://plnkr.co/edit/lUQT51CxfMayug93u6iR?p=preview @skubski – bleykFaust

我做了什麼錯@skubski？ – bleykFaust

var routerApp = angular.module（'routerApp'，['ui.router']）;,在您的應用程序中注入ngRoute。兩個不同的庫！你需要注入ui.router。然後容納你的部分頁面的容器是ng-view，你需要一個ui-view。另外你的代碼中有很多的語法錯誤。 – skubski

路由到子菜單Angularjs

回答

相關問題