ASP.NET MVC和AngularJS

Question

ASP.NET MVC和AngularJS

我正在使用AngularJS 1.2.2(并且它是全新的)和MVC 5.我试图让控制器被调用,但它无法正常工作.

据我所知,最合适的"shell"页面是Views/Shared/_Layout.cshtml.

因此,在这个页面我有

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

Run Code Online (Sandbox Code Playgroud)

后来在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>

Run Code Online (Sandbox Code Playgroud)

但是当我点击这两个链接中的任何一个时,我的getClass方法都没有被调用.正在引用包含此方法的文件.这是它包含的代码

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

Run Code Online (Sandbox Code Playgroud)

知道为什么这不被称为？

编辑

我的结构是这样的:

我在根目录中有一个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' });
});

Run Code Online (Sandbox Code Playgroud)

(顺便提一句,我猜这是通过引用我个人的cshtml文件,我会得到正确的行为).

我有一个带有上述NavbarController类的controllers文件夹.

我还有一个服务文件夹,其中包含我的服务.

在_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")

Run Code Online (Sandbox Code Playgroud)

控制台出错.它是

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 ...

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mut*_*u R 5

您似乎错过了将ngRoute模块包含在myApp的依赖项中.

'use strict';

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，8 月前
查看次数：	4555 次
最近记录：	11 年，8 月前