I was going through some tutorial on Angular JS and I can load single page and do things within single file, but when I got to the routing, it would not get to the other page.
Here's what I have in the app.js:
var app = angular.module('tutorialApp', ["ngRoute", "tutorialCtrlModule"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/tutorial.html",
controller: "TutorialCtrl"
})
.when("/tutorialSecond", {
templateUrl: "views/tutorialSecond.html",
controller: "TutorialCtrl2"
})
.otherwise({
redirectTo: "/"
})
})
and in my index.html, I include these script files:
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/tutorialCtrl.js"></script>
and just have this in the body:
<body>
<div ng-view></div>
</body>
And in my tutorial.html, I have a link defined like this:
<a href="#/tutorialSecond">Tutorial Second Page</a>
So I can see the contents of the tutorial.html when I load my index.html. But when I click on the "Tutorial Second Page" link, nothing happens. And I see the URL/URI of something like this:
file:///<some_path>/AngularTutorial/index.html#!/#%2FtutorialSecond
If I change the app.js code to something like this:
.when("/", {
templateUrl: "views/tutorialSecond.html",
controller: "TutorialCtrl2"
})
I can see the tutorialSecond.html content show up when I load my index.html.
So why is the link to /tutorialSecond not loading from my original code when I click on the link to it? Is it because I am running and opening the index.html as a file://<path_to_index.html> locally and not running on a web server?
Please help... this is blocking me to continue with the tutorial. I am running in Windows 7x64, using Firefox, and just downloaded the latest available angular js files yesterday.
Thank you in advance.
Adding some additional details per some of the responses...
In my tutorialCtrl.js file, both controllers are defined something like this:
angular.module("tutorialCtrlModule", [])
.controller("TutorialCtrl", ["$scope", function($scope) {
$scope.tutorialObject = {};
$scope.tutorialObject.title = "Main Page";
$scope.tutorialObject.subTitle = "Sub title";
}
}])
.controller("TutorialCtrl2", ["$scope", function($scope) {
$scope.secondTutorial = "This is the second tutorial";
}]);
and this .js file is included in the index.html as shown above.
