I am currently diving into learning AngularJS with a focus on ui-Routing. Despite my efforts, my code is not working and I'm struggling to identify the issue.
Here is a brief description of my problem:
When I access index.html, the browser displays "Hello World ui-Routing!" (h1 in index.html).
However, if I attempt to navigate to index.html/home, it returns an error stating: "File not found!"
Below is my code snippet for reference:
index.html
<html>
<head>
<title>My Angular App!</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="Test" ng-controller="MainCtrl">
<h1>Hello World ui-Routing!</h1>
<div ui-view>
</div>
</body>
</html>
app.js:
angular.module('Test', ['ui-router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterprovider)
{
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
.state('test', {
url: '/test',
templateUrl: '/test.html',
controller: 'TestCtrl'
});
$urlRouterProvider.otherwise('home');
}])
.controller('MainCtrl', ['$scope',
function($scope){
$scope.test = "Hello Jan!";
});
.controller('TestCtrl', ['$scope',
function($scope){
$scope.test = "Hello Redirect!";
});
test.html:
<h2>Hello Test! </h2>
home.html:
<h2>Hello Home! </h2>
If you have any insights or solutions to my problem, I would greatly appreciate your feedback.
Thank you in advance, Jan