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">
    <ul class="nav nav-tabs">
        <li ng-class="{active: activeTab == 'inbox'}">
            <a ng-click="activeTab='inbox'">Inbox</a>
        </li>
        <li ng-class="{active: activeTab == 'sent'}">
            <a ng-click="activeTab='sent'">Sent</a>
        </li>
    </ul>    
    <table ng-show="activeTab=='inbox'" class="table table-bordered table-condensed">
        <tbody>
            <tr ng-repeat="email in emails" ng-click="showPopup(email)">
                <td>{{ email.from }}</td>
                <td>{{ email.subject }}</td>
                <td>{{ email.date }}</td>
            </tr>
        </tbody>
    </table>
    <table ng-show="activeTab=='sent'" class="table table-bordered table-condensed">
        <tbody>
            <tr ng-repeat="email in sentEmails" ng-click="showPopup(email)">
                <td>{{ email.to }}</td>
                <td>{{ email.subject }}</td>
                <td>{{ email.date | date:'MMM d' }}</td>
            </tr>
        </tbody>
    </table>
    <button class="btn btn-primary" ng-click="showComposePopup()">Compose</button>
    
    <div class="modal" ng-show="isPopupVisible">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="closePopup()">&times;</button>
            <h3>{{selectedEmail.subject}}</h3>
        </div>
        <div class="modal-body">
            <strong>From:</strong> {{selectedEmail.from}}<br />
            <strong>To:</strong> {{selectedEmail.to}}<br />
          ...

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.isComposePopupVisible = false;
    $scope.composeEmail = {};
    $scope.activeTab = "inbox";
    $scope.sentEmails = [];
    
    $scope.forward = function() {
        $scope.isPopupVisible = false;
        $scope.composeEmail = {};
        angular.copy($scope.selectedEmail, $scope.composeEmail);

        $scope.composeEmail.body = 
            "\n-------------------------------\n" 
            + "from: " + $scope.composeEmail.from + "\n"
            + "sent: " + $scope.composeEmail.date + "\n"
            + "to: " + $scope.composeEmail.to + "\n"
            + "subject: " + $scope.composeEmail.subject + "\n"
            + $scope.composeEmail.body;

        $scope.composeEmail.subject = "FW: " + $scope.composeEmail.subject;
        $scope.composeEmail.to = "";
        $scope.composeEmail.from = "me";
        $scope.isComposePopupVisible = true;
    };
    
    $scope.reply = function() {
        // hide the view details popup
        $scope.isPopupVisible = false;
        
        // create an empty composeEmail object the compose 
        // email popup is bound to
        $scope.composeEmail = {};
        
        // copy the data from selectedEmail into composeEmail
        angular.copy($scope.selectedEmail, $scope.composeEmail);
        
        // edit the body to prefix it with a line and the 
        // original email information
        $scope.composeEmail.body = 
            "\n-------------------------------\n" 
            + "from: " + $scope.composeEmail.from + "\n"
            + "sent: " + $scope.composeEmail.date + "\n"
            + "to: " + $scope.composeEmail.to + "\n"
            + "subject: " + $scope.composeEmail.subject + "\n"
            + $scope.composeEmail.body;
        
        // prefix the subject with “RE:”
        $scope.composeEmail.subject = "RE: "...