2013-12-22 38 views
3

我正在使用AngularJS 1.2.2(我完全熟悉它)和MVC 5.我試圖讓一個控制器被調用,但它不工作。ASP.NET MVC和AngularJS

據我所知,最合適的'殼'頁面是Views/Shared/_Layout.cshtml

因此,在這個頁面我有在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方法不會被調用

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

後者。包含此方法的文件正在被引用。這裏是它包含的代碼

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文件夾我有一個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

如何以及在哪裏定義'app'?你是否引用了所有需要的角度文件?你是否按當前順序引用了JavaScript?瀏覽器的控制檯窗口中是否有錯誤? – nemesv

+0

我會把這些信息作爲編輯。 –

回答

5

它看起來像你錯過了,包括你的依賴於對myApp的ngRoute模塊。

'use strict'; 

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

這是正確的答案。你需要包含角色路由http://code.angularjs.org/1.2.6/angular-route.js並聲明你的模塊依賴於它。 –