I'm currently working on a small web application using AngularJS. I have an index.html file in the main directory and three other HTML pages within the html subdirectory.
- login.html
- list.html
detail.html
- Initially, the index.html should load the login.html. This page contains three input fields to login into a validation system. Once the login is successful:
1.2 the index.html loads the list.html page and when an element from the list is clicked,
1.3 the index.html displays the details stored in detail.html. A typical web application flow.
Currently, my index.html is not showing any code from login.html!
Below is the code snippet:
HTML part
index.html
<!DOCTYPE html>
<html >
<head lang="en">
<meta charset="UTF-8>
<title>CV Alibo - Tab</title>
<link rel="stylesheet" href="./css/style.css"/>
<script src="./lib/angular.js"></script><!-- angular-min.js , version stable by angularJS.org -->
<script src="./lib/angular-route.js"></script>
<script src="./js/cvAliboApp.js"></script>
<script src="./js/cvAliboController.js"></script>
</head>
<body ng-app="cvAliboApp">
<div>
<h1>Test JS</h1>
<p>Between two rows, you can see more pages.</p>
</div>
<hr/>
<div ng-view>
</div>
<hr/>
</body>
</html>
html/login.html
<div ng-controller='cvAliboLogin'>
<h1>CV Alibo - Login</h1>
<p>
<input type="text" name="username" >
<input type="password" name="password" >
<input type="button" name="login" >
</p>
</div>
html/list.html
<div ng-controller='cvAliboList' id="list">
<h1>LIST</h1>
</div>
html/detail.html
<div ng-controller='cvAliboDetail' id='detail'>
<h1>DETAIL</h1>
</div>
Javascript
js/cvAliboApp
'use strict';
var cvAliboManager = angular.module('cvAliboApp', ['ngRoute']).
config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl:'html/login.html', controller: 'cvAliboLogin'
}).when('/list', {
templateUrl:'html/list.html', controller: 'cvAliboList'
}).when('/list/:id', {
templateUrl:'html/detail.html', controller: 'cvAliboDetail'
}).otherwise({redirectTo: '/'});
});
js/cvAliboController.js
'use strict';
var cvAliboManager = angular.module('cvAliboApp', []);
cvAliboManager.controller('cvAliboLogin',
function cvAliboLogin($scope) {
alert("cvAliboLogin");
}
);
cvAliboManager.controller('cvAliboList',
function cvAliboController($scope) {
alert("cvAliboList");
}
);
cvAliboManager.controller('cvAliboDetail',
function cvAliboController($scope) {
alert("cvAliboDetail");
}
);
/*
* There might be a syntax error in module.run which has been commented out to avoid loading Javascript code with errors.
*/
- AngularJS Version used is 1.2.18.
- The angular-routing file has been imported successfully.
- Using alerts, it appears that there might be a syntax error in the commented out module.run section.
- All JavaScript files are correctly imported for use.
- The constructors have been declared and implemented properly.
Why isn't my index.html displaying the login.html? Any suggestions would be greatly appreciated...