मैं एंगुलर सीखने के उद्देश्य से मनोरंजन के लिए एक वेबसाइट विकसित कर रहा हूं। इसे स्थानीय रूप से चलाते समय कोई समस्या नहीं है; सब योजना के अनुसार दिखा रहा है। लेकिन अब जब मैंने इसे ऑनलाइन कर दिया है, तो निर्देशों में से एक दिखाई नहीं दे रहा है (एक लॉगिन बॉक्स)।

साइट जैसा कि चाहिए होना चाहिए: http://s23.postimg.org/7gzolivgr/Screenshot_9.png ऑनलाइन होने पर यह कैसा दिखता है: http://s29.postimg.org/bnqtle713/Screenshot_8.png नीचे कोड (निर्देश बॉडी टैग के नीचे दो पंक्तियाँ हैं)

Index.html

<!DOCTYPE html>
<html data-ng-app="mMain">
<head>
    <!-- css references -->
    <link href="app/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="app/css/style.css" rel="stylesheet" />
    <link href="partials/partials_styling/home.css" rel="stylesheet" />
    <link href="partials/partials_styling/register.css" rel="stylesheet" />
    <link href="app/directives/header-anchor/header-anchor.css" rel="stylesheet" />
    <link href="app/directives/header-login/header-login.css" rel="stylesheet" />
    <link href="app/directives/header-choose-type/header-choose-type.css" rel="stylesheet" />
    <link href="partials/partials_styling/be_a_fail.css" rel="stylesheet" />
    <link href="app/directives/search-bar/search-bar.css" rel="stylesheet" />
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <title>angular test</title>
</head>
<body>
    <div d-header-anchor class="header-anchor"></div>
    <div d-header-login class="header-login">
    </div>
    <div d-header-choose-type></div>
    <!--<div d-search-bar></div>-->


    <div class="container_main">
        <!-- placeholder views -->
        <data-ng-view></data-ng-view>
    </div>

    <script src="app/js/jquery-1.11.3.js"></script>
    <script src="app/js/jquery.validate.js"></script>
    <script src="app/js/validation.js"></script>
    <script src="app/js/angular.js"></script>
    <script src="app/js/angular-ui-router.js"></script>
    <script src="app/js/angular-route.js"></script>
    <script src="app/js/script.js"></script>
    <script src="app/directives/header-anchor/header-anchor.js"></script>
    <script src="app/directives/header-login/header-login.js"></script>
    <script src="app/directives/header-choose-type/header-choose-type.js"></script>
    <script src="app/directives/search-bar/search-bar.js"></script>
</body>
</html>

निर्देश एचटीएमएल

<div class="container_header-login">
    <div data-ng-if="!login[0].loggedin">

        <form ng-submit="confirm()">
            <input type="text" ng-model="username.name" placeholder="username" />
            <input type="password" ng-model="password.pass" placeholder="password" />
            <br />
            <input type="submit" class="btn btn-primary" value="Login" />
            <div ng-show="wrongUserOrPass" class="errorMessage">Incorrect username or password</div>
        </form>

        <!--<input type="text" ng-model="username.name"></input>
        <input type="button" ng-click="btn()"></input>-->
        <a href="#/register">Register</a>
    </div>
    <div data-ng-if="login[0].loggedin" class="loggedInMessage">
        <p>Logged in as  </p><a href="#/user_info">{{login[0].username}}</a>
    </div>
</div>

.जेएस

var mHeaderLogin = angular.module('app.directives.mHeaderLogin', [])// mMain-dependent due to factory call
mHeaderLogin.directive('dHeaderLogin', fHeaderLogin);
function fHeaderLogin() {
    return {
        restrict: 'A',
        templateUrl: 'app/directives/header-Login/header-Login.html',
        controller: function ($scope, mainFactory) {
            //$scope.loggedin = false; 
            $scope.login = mainFactory.getLogin(); //default view; user not logged in
            $scope.iUser = 999;
            //console.log($scope.iUser);
            $scope.username = { name: "" }; 
            $scope.password = { pass: "" };
            $scope.wrongUserOrPass = false; //error message upon wrong username or password match
            $scope.users = mainFactory.getUsers(); //move to function?
            $scope.logins = mainFactory.getLogins();
            //console.log($scope.users);
        },
        link: function (scope, element, attrs) {
            scope.confirm = function () {//checking for username and password match
                for (var i = 0, len = scope.users.length; i < len; i++) {
                    if (scope.users[i].name === scope.username.name)//true if input username match existing user name
                    {
                        for (var j = 0, len = scope.logins.length; j < len; j++) {
                            if (scope.logins[j].ref_id_user === scope.users[i].id_user) {//check password
                                if (scope.logins[j].password === scope.password.pass) { //if passed, user is logged in
                                    //scope.iUser = i;
                                    scope.login[0].username = scope.users[i].name;
                                    scope.login[0].ref_id_user = scope.users[i].id_user;
                                    scope.login[0].loggedin = true;
                                    console.log(scope.login[0].loggedin);
                                    console.log(scope.login[0].username);
                                    console.log(scope.login[0].ref_id_user);
                                    return;
                                }
                            }
                        }
                    }
                }//case no match was found
                scope.wrongUserOrPass = true;
                //alert("username or password incorect"); //case no match
                return;
            }
        }
    }
}

सीएसएस

.header-login{
    position:absolute;
    top: 1%;
    right: 1%;
    width: 200px;
    height: 200px;
    text-align: center; 
    z-index: 2;
}
.header-login a{
    font-size: 10px;
}
.container_header-login{
    position: relative;
    width: 100%;
}
.container_header-login input, button {
    width: 100%;
    padding: 0;
}
.errorMessage{
    color: red;
    font-size: 12px;
}
.loggedInMessage *{
    font-size: 14px;
    display: inline;
}
.loggedInMessage a{
    font-size: 14px;
    text-decoration: underline;
    display: inline;
}
0
sika 1 फरवरी 2016, 00:25
क्या आप ऑनलाइन कोड पर किसी प्रकार का मिनिफिकेशन कर रहे हैं?
 – 
o4ohel
1 फरवरी 2016, 00:42

1 उत्तर

सबसे बढ़िया उत्तर

इस स्क्रिप्ट पथ में, आपने इसे निर्दिष्ट किया है:

<script src="app/directives/header-login/header-login.js"></script>

अपने टेम्पलेट HTML फ़ाइल के पथ में, आपने इसे निर्दिष्ट किया है:

templateUrl: 'app/directives/header-Login/header-Login.html',

ध्यान दें कि header-login और header-Login एक ही चीज़ नहीं हैं।

आपके स्क्रीनशॉट से, ऐसा लगता है कि आपका स्थानीय वातावरण विंडोज के तहत चल रहा है, जिसमें केस-असंवेदनशील फाइल सिस्टम है। हालांकि, मैं शर्त लगा सकता हूं कि आपका सर्वर जो आपकी वास्तविक साइट को होस्ट कर रहा है वह एक यूनिक्स-आधारित ओएस है, जो एक केस-संवेदी फाइल सिस्टम है।

साथ ही, क्रोम देव उपकरण आपके मित्र हैं:

enter image description here

और वह आपको बताएगा कि यह टेम्पलेट नहीं ढूंढ सकता है।

3
thomas-j-moffett 1 फरवरी 2016, 00:59
सुनिश्चित नहीं है कि किसने मतदान किया, लेकिन कृपया इसे सही उत्तर के रूप में स्वीकार करें यदि इससे आपकी मदद मिली और आपकी समस्या हल हो गई। धन्यवाद!
 – 
thomas-j-moffett
1 फरवरी 2016, 01:01
देर से प्रतिक्रिया व्यक्त करने के लिए क्षमा करें। विस्मयकारी! धन्यवाद धन्यवाद धन्यवाद! मैंने सोचा कि मैंने देव टूल्स की जांच की है (और फिडलर को भी आजमाया है), अगली बार और अधिक बारीकी से देखूंगा।
 – 
sika
1 फरवरी 2016, 23:52