CODEWITHSUNDEEP
angularjsasp.net-mvcangularjs-ng-repeatangular-resource
Trevor Watson
Trevor Watson

Reputation: 415

templateUrl for AngularJS (routing)/MVC application never loads templates

We are attempting to create a MVC/AngularJS mini-SPA site using various links found on tutorial sites and others like: AngularJS routing in MVC application with templates. However, clicking on the links appear to load the whole page every time, and the templates are never loaded. I am sure I'm missing something simple, but can't figure it out.

My _Layout.cshtml looks like:

<!DOCTYPE html>
<html ng-app="registrationModule">
<head>
    <meta charset=" utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")


    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-resource.min.js"></script>
    <script src="~/Scripts/angular-route.min.js"></script>

    <script src="~/GrextScripts/registration-module.js"></script>

    <script src="~/GrextScripts/user-repository.js"></script>
    <script src="~/GrextScripts/user-controller.js"></script>

    @RenderSection("SectionInHeader", required: false)

</head>
<body>
    <header>
        <div class=" content-wrapper">
            <div class="float-left">
                <p class="site-title">
                    <a href="~/">GREXT</a>
                </p>
            </div>
            <div class="float-right">
                <nav>
                    <ul id="menu">
                        <li><a href="~/ControlPanel/">Home</a></li>
                        <li><a href="~/ControlPanel/Users">Users</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    @RenderBody()

    @RenderSection("scripts", required: false)
</body>
</html>

The ControlPanel/Index.cshtml (the {{5+5}} renders properly as a "10" on the page, this was just to see if the AngularJS was working

@{

}


<div ng-view>
    {{5+5}}
</div>

registration-module.js

var registrationModule = angular.module("registrationModule", ["ngRoute", "ngResource"])
    .config(function($routeProvider, $locationProvider) {
        $routeProvider.when("/ControlPanel/Users", {
            templateUrl: "/templates/users/all.html",
            controller: "userController"
        });

        $locationProvider.html5Mode(true);
    });

user-controller.js

registrationModule.controller("UserController", function($scope, userRepository, $location) {
    $scope.users = userRepository.get();
});

And last, the template: /templates/users/all.html

{{1+1}}
<table>
    <tr><td>User Name</td></tr>
    <tr ng-repeat="user in users">
        <td>{{user.UserName}}</td>
    </tr>
</table>

As mentioned, when I click on the Users link in the page, the whole page reloads and the template all.html is not loaded as I expect it.

Upvotes: 0

Views: 513

Answers (2)

Trevor Watson
Trevor Watson

Reputation: 415

@aaronfrost's comment made me re-check my javascript console more thoroughly and found that I need to include a 

<base href="/" />

in the < head> tag of my document. Adding this causes everything to work.

Upvotes: 1

frosty
frosty

Reputation: 21762

Not sure, but the problem may be that you declared the controller as "UserController" with a capital "U", but in the routeProvider you specified it with a lowercase "u" as "userController".

I am guessing that you have an error in the console, so you might want to check there.

Change the routeProvider to use "UserController" instead of "userController" and it should work.

Upvotes: 0

Related Questions