0

I have a angularjs application built on angular1.2 and html

When I run application and view the source of code in browser it is exposing all angular contents such as ng-app , ng-controller and ng-repeat

bellow is the page source of my application

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">-->
<script type="text/javascript" src="../Scripts/angular.js"></script>
<script src="../Scripts/AppJS/Routing.js"></script>


<style>
    .selected {
        background-color: lightyellow;
        color: red;
        font-weight: bold;
    }
</style>

</head>
<body ng-app="App" class="jumbotron">
<div ng-controller="MovieController" class="container">
    <div ng-show="success" class="alert-success">Record has been upddated for </div>
    <div class="row col-md-8">
        <table class="table table-striped ">

            <thead class="thead-inverse">
                <tr>
                    <th style="background-color: Highlight">User Name</th>
                    <th style="background-color: Highlight">Name</th>
                    <th style="background-color: Highlight">Email-Id</th>
                    <th style="background-color: Highlight">Contact Number</th>
                    <th style="background-color: Highlight">Actions</th>
                </tr>
            </thead>


            <tr>
                <!-- <td>EmployeeID:</td>-->
                <td>
                    <input type="text" ng-model="movie.title" class="form-control" />

                </td>
                <td>
                    <input type="text" ng-model="movie.year" class="form-control" />
                </td>
                <td>
                    <input type="text" ng-model="movie.rating" class="form-control" />
                </td>
                <td>
                    <input type="text" ng-model="movie.plot" class="form-control" />
                </td>
                <td>
                    <button type="button" class="btn btn-primary">
                        <span class="glyphicon glyphicon-plus"></span>
                    </button>
                </td>
            </tr>
            <tbody>
                <tr ng-repeat="user in users track by user.UserId" ng-class="{'selected':$index == selectedRow}">
                    <td>{{user.UserName}}</td>
                    <td>{{user.FirstName}}&nbsp;{{user.LastName}} </td>
                    <td>{{user.EmailId}}</td>
                    <td>{{user.ContactNumber}}</td>

                    <td class="row">
                        <span class="">
                            <i class="btn btn-warning glyphicon glyphicon-pencil" style="padding:0px" title="Edit {{user.UserName}}"></i>&nbsp;

                            <i class="btn btn-danger glyphicon glyphicon-remove"  style="padding:0px" title="Delete{{user.UserName}}"></i>
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

I need to hide those elements in console (inspect element) and view page source as well. how can i achieve it?

And it is even exposing angular controllers in js. is there any way to minimize or bundle these angular scripts?

abhi
  • 115
  • 1
  • 8
  • I don't think you can. But why would you want/need to? What are you trying to acheive by doing this? – James Jul 05 '17 at 12:49
  • 1
    I was checking out other websites built using angularjs. In those websites if I view page source none of angular element were visible. But in my website it is all public. So wanted to implement same technique they have incorporated – abhi Jul 05 '17 at 12:57

0 Answers0