Using MVC and Angular Routing Together

Question

I have a project that I want to link views together from different controllers so my controllers are

Dashboard and Board

and my views are

Dashboard
- Index (Main view with ng-app and ng-view)
- Test page
Board
- BoardIndex (A view I want loaded into /Dashboard/Index's ng-view)

In my main.js file I have:

angular.module('App', ['ngRoute', 'ngResource']);

angular.module('App').config(function ($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'Dash',
        title: 'Dashboard'
    })
    .when('/PageOne', {
        templateUrl: 'PageOne',
        title: 'Page One'
    })
    .when('/Board', {
        templateUrl: 'Board',
        title: 'Board'
    })
    .when('/Messenger', {
        templateUrl: 'Messenger/Messenger',
        title: 'Messenger'
    })
    .otherwise({redirectTo: '/'})
});

and my link to messenger looks like this: /Dashboard/#/Messenger

The link above will hit the Messenger controller ActionResult that routes to the BoardIndex view, but it doesn't actually show like I expect it to which would be the url being: URL/Dashboard/#/Messenger with the content of BoardIndex showing. Instead it goes to URL/Messenger with a blank page.

I need some help wiring this up.

Thanks!

Himesh Suthar · Accepted Answer · 2016-10-14 20:26:03Z

1

here I have defined a name of the controller as dashboard and board . please verify the controller's name from your controllers. this might help you. let me know if you are expecting something else

angular.module('app')
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){

        $stateProvider
            .state('dash',{
                url : '/',
                templateUrl : 'dash',
                controller : 'dashboard'
            })
            .state('pageOne',{
                url : '/pageOne',
                templateUrl : 'pageOne',
                controller : 'dashboard'
            })
            .state('board',{
                url : '/board',
                templateUrl : 'board',
                controller : 'board'
            })
            .state('messenger',{
                url : '/Messenger',
                templateUrl : 'Messenger/Messenger',
                controller : 'dashboard'
            })

        $urlRouterProvider.otherwise('dash');
    }])

answered Oct 14, 2016 at 20:26

Himesh Suthar

5724 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shadow1349 Over a year ago

Not exactly what I was looking for, but still pretty helpful. Thanks!

Collectives™ on Stack Overflow

Using MVC and Angular Routing Together

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related