CODEWITHSUNDEEP
javascripthtmlangularjs
kaarthick raman
kaarthick raman

Reputation: 839

AngularJS Routing fails to inject module

I have been trying few examples and I tried routing and injecting a template into HTML. It fails to inject the module inside an HTML div.

index.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="MyApp">
<head>
    <script src="Script/angular.min.js"></script>
    <script src="Script/angualr-route.min.js"></script>
    <script src="Script/Script.js"></script>        
</head>
<body>
    <table style="font-family:Arial">
        <tr>
            <td  class="leftMenu">

                <a href="#/aboutme">About Me</a><br /><br />
                <a href="#/contact">Contact</a><br /><br />
            </td>
            <td class="mainContent">
                 <div ng-view></div>
            </td>
        </tr>    
    </table>
</body>
</html>

Script.js:

var app = angular.module("MyApp", ["ngRoute"]);
app.config(function ($routeProvider) {
    $routeProvider
    .when("/aboutme", {
        templateUrl: "Templates/aboutme.html",
        controller: "aboutmeController"
    })
    .when("/contact", {
        templateUrl: "Templates/contact.html",
        controller: "contactController"
    })
})

I am not sure what is missing. Can someone point out the issue or provide suggestion?

I found this error in the Console tab of Developer tools:

Error: $injector:modulerr
Module Error
http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=MyApp&p1=Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=%24routeprovider
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:6:416
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:41:121
    at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:39:92)
    at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:39:362)
    at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:38:64)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:38:188
    at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:7:333)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:37:488)
    at eb (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:41:249)
    at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:19:463

Upvotes: 0

Views: 177

Answers (3)

Sajeetharan
Sajeetharan

Reputation: 222657

Add the necessary controllers code in your js file. Otherwise it will say controller is not defined.

var app = angular.module("MyApp", ["ngRoute"]);
app.config(function ($routeProvider) {
    $routeProvider
    .when("/aboutme", {
        templateUrl: "Templates/aboutme.html",
        controller: "aboutmeController"
    })
    .when("/contact", {
        templateUrl: "Templates/contact.html",
        controller: "contactController"
    })
})

app.controller("aboutmeController", function($scope) {
  $scope.msg = "test";
});

app.controller("contactController", function($scope) {
  $scope.msg = "test";
});

DEMO

Upvotes: 0

Prathap
Prathap

Reputation: 178

If you are seeing an error at the developer tools in your landing page itself, then it might be because of missing resources, such as the controllers not being defined, respective html pages not available at the "Templates" directory specified in your code or the typo I notice in your script source for angular-route (angualr-route.min.js); assuming file is present/saved with the right name.

You can remove the controllers (if not defined in your Script.js) and just have some content in the templates for the time being, to track down the issue.

If the issue is about navigation not working, it might be because you aren't running it on a local server.

Routing and navigation requires you to run the application in a local server. You can use Tomcat for the same.

Hope this helps.

Upvotes: 0

Sandeep C
Sandeep C

Reputation: 291

You should also write a controller for your app in the Script.js. So, in your case, try this:

    app.controller('MyApp', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

Upvotes: 3

Related Questions