javascriptangularjsmetro-ui-css

angular routing loses color

Ive started a page using metro Ui Css, did a login form and everything was fine, then i inserted some angular so that i could do some routing, the routing works fine, but i cant see the form anymore, its there i can press the buttons, but just cant see it.

index.html 

 <!DOCTYPE html>
<html lang="pt">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- metro-->
<link href="css/metro.css" rel="stylesheet" type="text/css">
<link href="css/metro-icons.css" rel="stylesheet" type="text/css">
<link href="css/metro-responsive.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/metro.min.js"></script>

<!--Angular--->
<script data-require="angular.js@*" data-semver="1.4.3" src="js/angular.js"></script>
<script data-require="angular-route@1.2.17" data-semver="1.4.3" src="js/angular-route.js"></script>

<!--APP-->
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/MainController.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<link href="css/login.css" rel="stylesheet" type="text/css">



</head>
<body class="bg-darkTeal" ng-app="caiApp">
    <div ng-view></div>
</body>
</html>

config.js

(function(){
  var app = angular.module("caiApp",["ngRoute"]);
  app.config(function($routeProvider){
    $routeProvider
      .when("/login",{
        templateUrl: "login.html",
        controller:"MainController"
      })
      .otherwise({redirectTo: "/login"});
 });



}());

login.js

 $(function(){
            var form = $(".login-form");
            form.css({
                opacity: 1,
                "-webkit-transform": "scale(1)",
                "transform": "scale(1)",
                "-webkit-transition": ".5s",
                "transition": ".5s"
            });
        });

I must be doing something wrong, because login.html loads fine, the form is there, i just cant see anything.

Solution

  • Although you have not put your full code like login.html or MainController.js or login.css but i am still taking a shot at it. I think you have kept your form opacity as zero by default and then once DOM is loaded then you are making it visible by making opacity as 1.

    Now the problem is you div 'login-form' is inside login.html which gets loaded via routing and you are changing its opacity in login.js(why not in MainController ?)

    Angular app does not kick start unless DOM is loaded so login.js code is executing before login.html is appended to DOM hence your form remains hidden.

    Solution: Move login.js code to MainController ans use Angular for showing the element(ng-show directive).