Html AngularJS ng开关导致模板瞬间出现_Html_Angularjs

Html AngularJS ng开关导致模板瞬间出现

html angularjs

Html AngularJS ng开关导致模板瞬间出现,html,angularjs,Html,Angularjs,我有一个带有身份验证服务的单页angular应用程序。应用程序的登录页是用户可以登录的表单。还有一个指向“注册”页面的链接，用户可以在其中创建帐户。这些都是通过ng switch指令实现的，因为当用户单击“注册”时，我的身份验证服务似乎阻止我重定向到新的url。当用户登录后，他们会看到一个菜单栏，只有在用户经过身份验证时才应该看到该菜单栏。我的问题是，当我在登录页上点击刷新按钮时，“注册”表单和菜单栏在“登录”表单的背景中闪烁了一秒钟。希望这个解释有意义，有人知道如何修复它或者有更好的结构的建议

我有一个带有身份验证服务的单页angular应用程序。应用程序的登录页是用户可以登录的表单。还有一个指向“注册”页面的链接，用户可以在其中创建帐户。这些都是通过

ng switch

指令实现的，因为当用户单击“注册”时，我的身份验证服务似乎阻止我重定向到新的url。当用户登录后，他们会看到一个菜单栏，只有在用户经过身份验证时才应该看到该菜单栏。我的问题是，当我在登录页上点击刷新按钮时，“注册”表单和菜单栏在“登录”表单的背景中闪烁了一秒钟。希望这个解释有意义，有人知道如何修复它或者有更好的结构的建议吗

这是我的index.html：

<html  ng-app="myApp" >
<head>
    <title> My App</title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="css/signin.css">
    <link rel="stylesheet" type="text/css" href="css/passwordvalidation.css">
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"/>
</head>
<body ng-controller="MainCtrl">
<div ng-switch on="view.controller">

    <div ng-switch-default ng-controller="UserCtrl">

        <div ng-show="!isAuthenticated">
            <form class = "form-signin">

//Sign In Form code here

                        <button class = "btn btn-primary" ng-click="signIn()">Sign In</button>

//This button performs the ng-switch based on the controller name
                        <button class = "btn btn-default" ng-click= "view.controller = 'UserNewCtrl'" >Register</button>

                    </div> 
                </div>
            </form>
        </div>
<!--This part of index.html is only shown when a user has been authenticated -->


        <div ng-show="isAuthenticated">
//MenuBar Code here

            </div>

<!--This is where partials will be loaded depending on menu item selection-->
            <div class="col-md-10">

                <div ng-view></div>

            </div>

        </div>


    </div>


<!--Start of sign up form-->

    <div ng-switch-when="UserNewCtrl" >
        <div ng-controller = "UserNewCtrl" >
            <div ng-show="!isAuthenticated">

//Sign Up Form Code here

               </div>
            </div>    
        </div>

    <!--End of Sign Up Form-->



    <script src="js/vendor.js"></script>
    <script src="js/app.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/transition.js"></script>
    <script src="js/ui-utils.js"></script>

</body>
</html>

这是一个问题。表单会闪烁，因为它在AngularJS完成引导之前以页面的默认状态出现

检查或考虑将表单移动到有条件渲染的元素指令中。

查看<代码> NG外挂< /Cord>属性，关于如何使用NGLUKAK的任何建议？文档非常稀少。让它工作并完美地解决了问题，谢谢！

angular.module('myApp.controllers')
  .controller('MainCtrl', function($scope) {
    $scope.view={
      controller: 'UserCtrl'
    }; 

  })