CODEWITHSUNDEEP
asp.net-mvcangularjs
Sachin Kainth
Sachin Kainth

Reputation: 46760

ASP.NET MVC and AngularJS

I am using AngularJS 1.2.2 (and am totally new to it) and MVC 5. I am trying to get a controller get called but it is not working.

As far as I could tell, the most appropriate 'shell' page is Views/Shared/_Layout.cshtml.

Therefore, in this page I have

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

Latter on in the Views/Shared/_Layout.cshtml I have

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

But when I click on either of these two links my getClass method does not get called. The file containing this method is being refernced. Here is the code it contains

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

Any idea why this is not being called?

EDIT

My structure is such:

I have an app folder in the root.

In the app folder I have an app.js with this code

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

(Incidentally I am guessing that by referring to my individual cshtml files like this I will get the correct behavior).

I have a controllers folder with the above NavbarController class.

I also have a services folder with my services in them.

In the _Layout file I have these js files referenced

 @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")

There is an error in the console. It is

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

Upvotes: 3

Views: 4619

Answers (1)

Muthu R
Muthu R

Reputation: 806

It looks like you missed to include the ngRoute module in your dependency for myApp.

'use strict';

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

Upvotes: 5

Related Questions