current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite
1

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 ...
share|improve this question
    
How and where do you define app? Are you referenced all the required angular files? Have you referenced your JavaScript in the current order? Are there any errors in your browser's console window? –  nemesv Dec 22 '13 at 13:50
    
I'll put this information in as an edit. –  Sachin Kainth Dec 22 '13 at 13:53

1 Answer 1

up vote 5 down vote accepted

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
}]);
share|improve this answer
    
This is the correct answer. You need to include angular-route code.angularjs.org/1.2.6/angular-route.js and declare your module as dependant on it. –  Kenneth Lynne Dec 22 '13 at 21:27

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.