Блог

Главная - Вопросы по программированию - Маршрутизация AngularJS / ASP.Net MVC

Маршрутизация AngularJS / ASP.Net MVC

#javascript #angularjs #asp.net-mvc

#javascript #angularjs #asp.net-mvc

Вопрос:

У меня есть веб-приложение, использующее оба ASP.Net MVC и AngularJS. У меня есть область прямо под меню, в которой изначально должен быть imageslider, но когда я начинаю нажимать на пункты меню, он исчезает и предоставляет доступ к подменю и нескольким деталям. Прямо сейчас на моей странице _Layout у меня есть:

 <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ósamp;emsp;amp;emsp;amp;emsp;|</a></li>
                    <li><a href="#/news">Dias Abertosamp;emsp;amp;emsp;amp;emsp;|</a></li>
                    <li><a href="#/contact">Equipamentosamp;emsp;amp;emsp;amp;emsp;|</a></li>
                    <li><a href="#about">Workshopsamp;emsp;amp;emsp;amp;emsp;|</a></li>
                    <li><a href="#contact">Projetosamp;emsp;amp;emsp;amp;emsp;|</a></li>
                    <li><a href="#about">Parceirosamp;emsp;amp;emsp;amp;emsp;|</a></li>
                    <li><a href="#about">? F.A.Q.amp;emsp;amp;emsp;amp;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>

Затем на моих маршрутах у меня есть:

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

Но если я нажму на aboutus, это просто ничего не сделает. Я что-то здесь упускаю?

Ответ №1:

Вы должны внедрить зависимость «ngRoute» в приложение.

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