AngularJS/ASP.Net MVC routing

Question

I've an Web App using both ASP.Net MVC and AngularJS. I have an area right below the menu that suppose to have an imageslider, at the beggining but as I'm starting to click on menu items, disapears and gives access to the submenus and a few details. Right now in my _Layout page I have:

<body>
    <div data-ng-app="frontoffice" id="page-wrapper" ng-controller="mainViewModel">
        <div id="header">
            <div id="menu">
                <ul>
                    <li><a class="active" ng-href="#/aboutus">Sobre Nós&emsp;&emsp;&emsp;|</a></li>
                    <li><a href="#/news">Dias Abertos&emsp;&emsp;&emsp;|</a></li>
                    <li><a href="#/contact">Equipamentos&emsp;&emsp;&emsp;|</a></li>
                    <li><a href="#about">Workshops&emsp;&emsp;&emsp;|</a></li>
                    <li><a href="#contact">Projetos&emsp;&emsp;&emsp;|</a></li>
                    <li><a href="#about">Parceiros&emsp;&emsp;&emsp;|</a></li>
                    <li><a href="#about">? F.A.Q.&emsp;&emsp;&emsp;|</a></li>
                    <li class="last"><a href="#about">S</a></li>
                </ul>
            </div>
            <div id="logo_news">
                <div id="logo-container">
                    <div>
                        <img id="img-cml" src="/images/logo_fablab.png" />
                    </div>
                    <div id="social-area">
                        <img id="inst-img" class="left-border" src="~/images/inst-blue.png" />
                        <img id="fb-img" src="~/images/fb-blue.png" />
                        <img id="tw-img" class="right-border" src="~/images/tw-blue.png" />
                        <img id="cml-img" src="~/images/cml-blue.png" />
                        <span class="stretch"></span>
                    </div>
                </div>
                <!--<div class="menu-area slideshow" id="news_area">-->
                <div ng-non-bindable>
                    <div id="menu-area">
                        <ng-view>

                        </ng-view>
                    </div>
                </div>

......
</body>

Then on my routes I have:

angular.module('frontoffice').config(function ($routeProvider, $locationProvider) {

    $routeProvider.when('/', {
        templateUrl: '/App/Menu/View/ImageSlider.html'
    })
        .when('/aboutus', {
            templateUrl: '/App/Menu/View/menu.html',
            controller: 'indexViewModel'
        })
    .otherwise({
        controller: 'ErrorController'
    })
});

But if I click on aboutus simply doesn't do anything. Am I missing something here?

Answer 1

You have to inject the dependency "ngRoute" in the app.

var app = angular.module("frontoffice", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
    .when('/', {
        templateUrl: '/App/Menu/View/ImageSlider.html'
    })
    .when('/about', {
        templateUrl: '/App/Menu/View/menu.html',
        controller: 'indexViewModel'
    })
    .otherwise({
        controller: 'ErrorController'
    })
})

AngularJS/ASP.Net MVC routing

Question

1 answers

solution1
0 2017-01-23 07:21:56

AngularJS/ASP.Net MVC routing

Question

1 answers

solution1 0 2017-01-23 07:21:56

solution1
0 2017-01-23 07:21:56