ASP.NET MVC和AngularJS

Question

ASP.NET MVC和AngularJS

3

我正在使用AngularJS 1.2.2（完全不熟悉）和MVC 5，试图调用一个控制器却无法运行。

据我所知，最合适的“外壳”页面是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;
        }
    };
});

有什么想法为什么这不被调用了吗？

编辑

我的结构是这样的：

我在根目录下有一个app文件夹。

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

< p >（顺便说一下，我猜想通过像这样引用我的个人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 ...

- Sachin Kainth

你是如何定义app的？你是否已经引用了所有必要的Angular文件？你是否按照正确的顺序引用了JavaScript文件？你的浏览器控制台窗口中有没有任何错误？ - nemesv

我会将这些信息作为编辑输入。 - Sachin Kainth

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Muthu R · Accepted Answer

看起来你在myApp的依赖中漏掉了ngRoute模块。

'use strict';

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