ng-view and Angular functions are not working in FireFox

Question

I have created the sample application to get familiar with AngularJS. i have tried to test my application functionality in Google Chrome and it is working perfectly, then tried to execute the same functionality in FireFox but the ng-view and other functions are not working.

I have structured my application like following,

在此处输入图片说明

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 are the sample code of my application. this is working perfectly in Chrome but not in Firefox please help me to resolve this.

Screen shots:

Chrome Screen

在此处输入图片说明

FireFox Screen

在此处输入图片说明

Answer 1

It's working for me once i reset my firefox. Some plugin was prevented the normal web execution flow.

ng-view and Angular functions are not working in FireFox

Question

1 answers

solution1
0 2014-07-31 10:04:16

ng-view and Angular functions are not working in FireFox

Question

1 answers

solution1 0 2014-07-31 10:04:16

solution1
0 2014-07-31 10:04:16