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.sendEmail = function() {
        $scope.isComposePopupVisible = false;
        $scope.composeEmail.from = "me";
        $scope.composeEmail.date = new Date();        
        $scope.sentEmails.push($scope.composeEmail);
    };
    
    $scope.showComposePopup = function() {
        $scope.composeEmail = {};
        $scope.isComposePopupVisible = true;
    };
    
    $scope.closeComposePopup = function() {
        $scope.isComposePopupVisible = false;
    };
    
    $scope.showPopup = function(email) {
        $scope.isPopupVisible = true;
        $scope.selectedEmail = email;
    };
    
    $scope.closePopup = function() {
        $scope.isPopupVisible = false;
    };
    
    $scope.emails = [
        { 
            from: 'John',
            to: 'me',
            subject: 'I love angular', 
            date: 'Jan 1', 
            body: 'hello world!' 
        },
        { 
            from: 'Jack', 
            to: 'me',
            subject: 'Angular and I are just friends', 
            date: 'Feb 15', 
            body: 'just kidding' 
        },
        { 
            from: 'Ember', 
            to: 'me',
            subject: 'I hate you Angular!', 
            date: 'Dec 8', 
            body: 'wassup dude' 
        }
    ];
}