2013-12-22 2 views
3

Я использую AngularJS 1.2.2 (и совершенно новый для него) и MVC 5. Я пытаюсь получить вызов контроллера, но он не работает.ASP.NET MVC и AngularJS

Насколько я мог судить, наиболее подходящей страницей «shell» является Views/Shared/_Layout.cshtml.

Поэтому на этой странице у меня есть

<html data-ng-app="myApp"> 

последний на в Views/Shared/_Layout.cshtml у меня есть

<div class="navbar navbar-fixed-top"> 
       <div class="container"> 
        <ul class="nav nav-pills" data-ng-controller="NavbarController"> 
         <li data-ng-class="{'active':getClass('/home')}"><a href="#/home">Home</a></li> 
         <li data-ng-class="{'active':getClass('/albums')}"><a href="#/album">Albums</a></li> 
        </ul> 
       </div> 
      </div> 

Но когда я нажимаю на любом из этих двух звеньев моего метод GetClass не дозвонился. Файл, содержащий этот метод, обрабатывается. Вот код, который он содержит

app.controller('NavbarController', function ($scope, $location) { 
    $scope.getClass = function(path) { 
     if ($location.path().substr(0, path.length) == path) { 
      return true; 
     } else { 
      return false; 
     } 
    }; 
}); 

Любая идея, почему это не называется?

EDIT

Моя структура такова:

У меня есть папка приложения в корне.

В папке приложения У меня есть app.js с этим кодом

var app = angular.module('myApp', []); 
app.config(function ($routeProvider) { 
    $routeProvider 
     .when('/Home', 
      { 
       controller: 'HomeController', 
       templateUrl: '/Views/Home/Index.cshtml' 
      }) 
     .when('/Album', 
      { 
       controller: 'AlbumController', 
       templateUrl: '/View/Album/Index.cshtml' 
      }) 
     .otherwise({ redirectTo: '/Home' }); 
}); 

(кстати я предполагаю, что, обращаясь к своим индивидуальным cshtml файлов, как это я буду получать правильное поведение).

У меня есть папка с указанным выше классом NavbarController.

У меня также есть папка с моими сервисами.

В файле _layout У меня есть эти файлы JS ссылки

@Scripts.Render("~/Scripts/angular.js") 
    @Scripts.Render("~/Scripts/angular-route.js") 

    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 

    @Scripts.Render("~/app/app.js") 
    @Scripts.Render("~/app/controllers/navbarController.js") 
    @Scripts.Render("~/app/controllers/albumController.js") 
    @Scripts.Render("~/app/services/albumService.js") 

Существует ошибка в консоли. Это

Error: [$injector:modulerr] Failed to instantiate module myApp due to: [$injector:unpr] Unknown provider: $routeProvider http://errors.angularjs.org/1.2.2/$injector/unpr?p0=%24routeProvider ... 
+0

Как и где вы определяете 'приложение'? Вы ссылаетесь на все необходимые угловые файлы? Вы ссылались на свой JavaScript в текущем порядке? Есть ли ошибки в окне консоли вашего браузера? – nemesv

+0

Я помещу эту информацию в качестве редактирования. –

ответ

5

Похоже, вы пропустили включение модуля ngRoute в свою зависимость для myApp.

'use strict'; 

angular.module('myApp', ['ngRoute']). 
    config(['$routeProvider', function($routeProvider) { 
    //Your code 
}]); 
+0

Это правильный ответ. Вам нужно включить угловой маршрут http://code.angularjs.org/1.2.6/angular-route.js и объявить ваш модуль зависимым от него. –

Смежные вопросы