My AngularJS sample application is running smoothly in Google Chrome, but when I tried to test it in Firefox, I encountered issues with ng-view and other functions not working properly.
This is the structure of my application:
Index.html
<!DOCTYPE html>
<html ng-app="userManagement">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>User Management</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/angular.css">
<style type="text/css">
body {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="glyphicon glyphicon-tasks"></span>
</button>
<a class="navbar-brand" href="#">User Managment</a>
<ul class="nav navbar-nav pull-right"
ng-controller="RouterController as route">
<li ng-class="{active:route.isTab(1)}" ng-hide="route.isLoggedIn"><a
href="#/login" ng-click="route.setTab(1)">Login</a></li>
<li ng-class="{active:route.isTab(2)}" ng-hide="route.isLoggedIn"><a
href="#/signup" ng-click="route.setTab(2)">Sign Up</a></li>
<li ng-class="{active:route.isTab(3)}" ng-show="route.isLoggedIn"><a
href="#/signup" ng-click="route.setTab(3)">DashBoard</a></li>
</ul>
</div>
</div>
</div>
<div ng-view=""></div>
<script type="text/javascript" src="lib/angular/js/angular.min.js"></script>
<script type="text/javascript"
src="lib/angular/js/angular-route.min.js"></script>
<script type="text/javascript" src="lib/jquery/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="app/main.js"></script>
<script type="text/javascript" src="app/controllers/loginController.js"></script>
<script type="text/javascript"
src="app/controllers/signUpController.js"></script>
<script type="text/javascript" src="app/services/httpService.js"></script>
<script type="text/javascript"
src="app/controllers/dashBoardController.js"></script>
<script type="text/javascript"
src="app/controllers/routerController.js"></script>
</body>
</html>
main.js
(function() {
var app = angular.module("userManagement", [ 'ngRoute' ]);
app.config(function($routeProvider) {
$routeProvider.when('/login', {
controller : 'LoginController',
templateUrl : 'app/views/login.html'
}).when('/signup', {
controller : 'SignUpController',
templateUrl : 'app/views/signup.html'
}).otherwise({
redirectTo : '/login'
});
});
})();
it has the route configuration for the application.
login.html
<div class="container" ng-controller="LoginController as login">
<h1>User Login</h1>
<div class="alert alert-warning" ng-show="login.isError()">{{errorMessage}}</div>
<form name="loginForm" class="form-horizontal" role="form"
ng-submit="loginForm.$valid && login.doLogin()" novalidate>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" placeholder="Email Address"
name="email" autofocus="autofocus" ng-model="login.user.userName"
required ng-pattern="/^\w+@\w+\.\w{2,3}$/"> <span
ng-show="loginForm.email.$error.pattern"> Invalid Email
Address!</span></input>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password
</label>
<div class="col-sm-6">
<input type="password" class="form-control" placeholder="Password"
name="pass" ng-model="login.user.password" required
ng-minlength="6" ng-maxlength="10" maxlength="10"><span
ng-show="loginForm.pass.$error.minlength || loginForm.pass.$error.maxlength">
The input characters must be in range 6 to 10!</span></input>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-2">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2">
<label class="col-sm-2" style="width: 60%;"><span id="fpass">Forgot
your password?</span></label>
</div>
</div>
</form>
</div>
LoginController
(function() {
var app = angular.module('userManagement');
app.controller('LoginController',['$scope','$log','$http',function($scope, $log, $http) {
var self = this;
self.user = {};
self.doLogin = function() {
$log.log("Login UserName: "
+ self.user.userName);
$log.log("Login Password: "
+ self.user.password);
$log.log(JSON.stringify(self.user));
$http({
url : "http://localhost:8080/UserManagementREST/service/user/login",
data : self.user,
method : "POST",
transformRequest : function(
data) {
$log
.log("Transforming request");
if (data === undefined) {
return data;
}
return $.param(data);
},
headers : {
"Content-Type" : "application/x-www-form-urlencoded; charset=utf-8"
}
}).success(function(data) {
$log.log(JSON.stringify(data));
}).error(function(data) {
$log.log(JSON.stringify(data))
});
};
} ]);
})();
These snippets showcase the functionality of my application. While everything works fine in Chrome, there seem to be compatibility issues in Firefox. Any insight on how to address this would be greatly appreciated.
Screenshots:
Chrome Screen
Firefox Screen