Маршрут к подменю Angularjs

Question

В этом примере мне нужно, чтобы в plnkr.co/edit/5FVrydtTPWqYMhhLj03e?p=preview, когда я нажимаю кнопку «Контактные номера», он будет перенаправляться на страницу «Контактные номера» в «Контакты».

Im используя Угловой 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 для Я Разветвляющиеся их примера

Answer 1

Вашего кода показывает пример нг маршрутного но ссылка вы предоставите это 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' и т. д. Вы можете использовать услугу $state от ui-router и использовать метод \[go(to, params, options)\] для перехода между состояниями в сочетании с этим идентификатором.

Удобный способ перехода на новое состояние. $ state.go вызывает $ state.transitionTo внутренне, но автоматически устанавливает параметры для { местоположение: 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>