AngularJS routing Issues $injector:modulerr

Question

AngularJS routing Issues $injector:modulerr

845 Views Asked by Paul Coan At 19 October 2024 at 16:43

Ok so I am fairly new at AngularJS and just running through a demo, but I am having issues with the routing side of things and can't figure it out. I thought you guys would know instantly that I have done something dumb. So here goes.

This is my JS file

var WebApplication2 = angular.module('WebApplication2', ['ng-route']);
WebApplication2.controller('LandingPageController', LandingPageController);
WebApplication2.config([
    '$routeProvider',
    function ($routeProvider) {
        $routeProvider
            .when('/routeOne', {
                templateUrl: 'routesDemo/one'
            })
            .when('/routeTwo', {
                templateUrl: 'routesDemo/two'
            })
            .when('/routeThree', {
                templateUrl: 'routesDemo/three'
            });
    }
]);

And here is my html code

<html ng-app="WebApplication2" ng-controller="LandingPageController">
<head>
    <title ng-bind="models.helloAngular"></title>
</head>
<body>
    <h1>{{models.helloAngular}}</h1>

    <ul>
        <li><a href="/#/routeOne">Route One</a></li>
        <li><a href="/#/routeTwo">Route Two</a></li>
        <li><a href="/#/routeThree">Route Three</a></li>
    </ul>

    <div ng-view></div>

    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-route.min.js"></script>
    @Scripts.Render("~/bundles/AngularBundle")
</body>
</html>

I also have this js controller file

var LandingPageController = function ($scope) {
$scope.models = {
    helloAngular: 'I work!'
};
}

I then have a controller with the following actionresults

public class RoutesDemoController : Controller
{
    public ActionResult One()
    {
        return View();
    }

    public ActionResult Two()
    {
        return View();
    }

    public ActionResult Three()
    {
        return View();
    }
}

Original Q&A

There are 2 best solutions below

Tina On 08 June 2015 at 23:47

Since you are using routing, you should not declare an ng-controller attribute on your view. With routing, each of your views can use a different controller.

Instead of the HTML tag you mentioned above, it should be like this:

<html ng-app="WebApplication2">

You should declare the controller you wish to use in your route. The templateUrl is the path to the HTML file you will use as the template:

$routeProvider.when('/routeOne', {
    templateUrl: 'views/route-one.html',
    controller: 'LandingPageController'
})

Your controller's code should look something like this:

WebApplication2.controller('LandingPageController', function ($scope) {
    $scope.models = {
        helloAngular: 'I work!'
    };
});

Where you are using <h1>{{models.helloAngular}}</h1> that is not in the scope of your route. The views for your routes will render in <div ng-view></div>.

In your views/route-one.html file you can add <h1>{{models.helloAngular}}</h1>.

You can view this page in the docs for an example implementation of ngRoute.

Angular is used to build single-page applications—your ASP.net's router will have nothing to do with Angular's routes. You just need to declare a single static route that is pointed to your Angular application. Server-side and client-side routing will not work hand-in-hand.

**Freezystem** · Accepted Answer

Freezystem On 08 June 2015 at 23:54 BEST ANSWER

This is a dependency injection error.

Try this :

var WebApplication2 = angular.module('WebApplication2', ['ngRoute']);

instead of :

var WebApplication2 = angular.module('WebApplication2', ['ng-route']);

AngularJS routing Issues $injector:modulerr

There are 2 best solutions below

Related Questions in ASP.NET-MVC

Related Questions in ANGULARJS

Trending Questions

Popular # Hahtags

Popular Questions