Reputation: 839
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.
<!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>
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
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";
});
Upvotes: 0
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
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