How to make an email web app using Angular

We are going to create an email application using Angular JS and ASP.NET MVC. The plan is to build the front end of the application first using nothing but HTML and Angular. Mock any data that would normally come from the server, then at the end put in the server portion.

by Luis Perez

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="container" ng-app ng-controller="EmailController">
    <table class="table table-bordered table-condensed">
        <tbody>
            <tr ng-repeat="email in emails" ng-click="showPopup()">
                <td>{{ email.from }}</td>
                <td>{{ email.subject }}</td>
                <td>{{ email.date }}</td>
            </tr>
        </tbody>
    </table>
    
    <div class="modal" ng-show="isPopupVisible">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Subject</h3>
        </div>
        <div class="modal-body">
            <strong>From:</strong> Steve <br />
            <strong>Date:</strong> Jan 2 <br />
            <br />
            <p>
                Hey You, <br />
                <br />
                How you doing?<br />
                <br />
                Sincerely<br />
                Your Bro
            </p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-primary">Close</a>
        </div>
    </div>    
</div>

CSS

.container {
    margin-top: 40px;
}

JavaScript

// Full blog post at: http://www.simplygoodcode.com/2013/12/how-to-make-email-web-app-using-angular.html

function EmailController($scope) {
    $scope.isPopupVisible = false;
    
    $scope.showPopup = function() {
        $scope.isPopupVisible = true;
    };
    
    $scope.emails = [
        { from: 'John', subject: 'I love angular', date: 'Jan 1' },
        { from: 'Jack', subject: 'Angular and I are just friends', date: 'Feb 15' },
        { from: 'Ember', subject: 'I hate you Angular!', date: 'Dec 8' }
    ];
}