CODEWITHSUNDEEP
javascriptasp.net-mvcangularjsasp.net-mvc-4razor
Saurabh Palatkar
Saurabh Palatkar

Reputation: 3384

Hide angularjs raw scope variables(raw html template)used for data binding in html page untill the angular app is not initialized & data is not loaded

enter image description here

I am using Angularjs as my front end framework. In my app I am using Index.cshtml as my master page (The top horizontal navbar is included in Index.cshtml page) and within that I am rendering html partials using Angularjs. When page is initially loading and the Angularjs app is yet not initialized, the scope variables that I used in my Index.cshtml page for data binding (as seen in the image above: "{{firstName}}" and {{lastName}}) are visible in their raw form which is not supposed to happen. The desirable behavior should be : These scope variables are not visible to the end user unless the data is binded to them, i.e. while loading the page instead of raw variables there should be nothing and once the Angular app is initialized and data is assigned to scope variables, the appropriate values should be displayed, ex once when data is assigned to scope variables firstName=John and lastName=Doe then only it should display like "John Doe".

Index.cshtml:

<!DOCTYPE html>

<html ng-app="smapp">
    <head>
        ..
    </head>
<body>
    <div>
        <!--Bootstrap NavBar-->
        <nav class="navbar navbar-default" role="navigation" ng-controller="MasterController">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div collapse="navCollapsed" class="collapse navbar-collapse navbar-responsive-collapse nav-collapse" id="sm-default-top-fixed-nav">                   
                    <ul class="nav navbar-nav navbar-right">
                        <li><a style="cursor: default !important;"> {{firstName}} {{lastName}}</a></li>
                        <li><a ng-controller="LoginCtrl" ng-click="Logout()"><i class="fa fa-power-off text-danger"></i> Logout</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        <!--/Bootstrap NavBar-->
        <div class="container-fluid">
            <!--HTML partial views-->
            <ng-view class="view-slide-in"></ng-view>
            <!--/HTML partial views-->
        </div>       

    </div>

</body>
</html>

In master page in top navbar I am using MasterCotroller which has scope variables "firstName", "lastName". When user login from login page, I set cookies for first name and last name and redirect user to this page, in this page when app is initialized, in MasterController I am getting cookies and then setting values of scope variables firstName and lastName.

Angualr App Initialization and config:

var appRoot = angular.module('smapp', ['ngRoute', 'ui.bootstrap', 'ngResource', 'ngSanitize', 'ngAnimate']);

appRoot.config([
    '$routeProvider', function($routeProvider) {
        //Setup routes to load partial templates from server. TemplateUrl is the location for the server view (Razor .cshtml view)
        $routeProvider
            .when('/BrowsePrograms', { templateUrl: '/ngPartials/_Program.html', controller: 'ProgramCtrl' })
            .otherwise({ redirectTo: '/ngPartials/_Login.html', controller: 'LoginCtrl' });
    }
]);

MasterController:

appRoot.controller('MasterController', function ($scope) {
    $scope.firstName = $.cookie('FName');
    $scope.lastName = $.cookie('LName');
});

My question is, how should I avoid displaying Angularjs raw model binders ({{firstName}} and {{lastName}}) untill the app is not completely initialized and the scope variables are not assigned any value?

Upvotes: 1

Views: 1432

Answers (1)

valverde93
valverde93

Reputation: 1698

Use ng-cloak directive.

https://docs.angularjs.org/api/ng/directive/ngCloak

For example:

<body ng-cloak>
    <!-- any html code with {{ angular data }} -->
</body

Upvotes: 2

Related Questions