Route to Submenu Angularjs

Question

In this sample what I need is that in plnkr.co/edit/5FVrydtTPWqYMhhLj03e?p=preview, when I click the Contact Numbers button, It will redirect to the Contact Numbers page in the Contacts.

Im using Angular JS and I hope someone can help me.

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'
        });
});

Credits to https://scotch.io/tutorials/angular-routing-using-ui-router for I am forking their example

score 1 · Accepted Answer · answered Mar 05 '16 at 08:13

1

Your code shows a ng-route example but the link you provide is a ui-router example. ($routeProvider vs $stateProvider).

If you would be using the $stateProvider from angular-ui-router to define the states you'll be using throughout your application it would probabably be more like the following:

$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'
});

You see that a definition of a state uses a string to identify itself with: e.g. :'home', 'contact' etc. You can use the $state service from ui-router and use the \[go(to, params, options)\] method to transition between states in combination with this identifier.

Convenience method for transitioning to a new state. $state.go calls $state.transitionTo internally but automatically sets options to { location: true, inherit: true, relative: $state.$current, notify: true }. This allows you to easily use an absolute or relative to path and specify only the parameters you'd like to update (while letting unspecified parameters inherit from the currently active ancestor states).

All you need to do is to couple this to the click event of you button in your maincontroller. That is: inject $state into your mainController and couple an ng-click within your button to a function that executes $state.go().

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

answered Mar 05 '16 at 08:13

skubski

1,586
2
19
25

var routerApp = angular.module('routerApp', ['ui.router']);, in your app you inject ngRoute. Two different libraries! You will need to inject ui.router. Then the container that will hold your partial pages is an ng-view, you'll need a ui-view. Plus there are quite a few syntax errors in your code. – skubski Mar 05 '16 at 08:48
can you update my plnkr please? @skubski .. I really can't undertsand.. I'm new to angular and I badly needed help – bleyk Mar 05 '16 at 08:52
I have no access. I have worked it out and I cannot save it! – skubski Mar 05 '16 at 08:53
here's a new plnkr you can fork http://plnkr.co/edit/lgiyFgyGpX6CL4gahIBA?p=preview @skubski thank you very much – bleyk Mar 05 '16 at 08:56
I used ui.router in your [plunker](http://plnkr.co/edit/RjdINLmP3bHiitwEb0cT?p=preview) and left some comments on the places you made mistakes. Read it carefully and if something is unclear just ask. (PS. there is no default path when you load your example, just click on home.) – skubski Mar 05 '16 at 09:00
hi again @skubski. I have another question with regards to this. It is possible if I will be using a routeprovider to this problem instead of a stateprovider? Thanks – bleyk Mar 08 '16 at 00:16
The equivalent of $state.go('name') is $location.path( "/name" ); in ngRoute. – skubski Mar 08 '16 at 09:33
hi again@skubski. Can we talk in chat? I have still several question. Thanks for the help! – bleyk Mar 09 '16 at 02:44

Route to Submenu Angularjs

1 Answers1