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(email)">
                <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" ng-click="closePopup()">&times;</button>
            <h3>{{selectedEmail.subject}}</h3>
        </div>
        <div class="modal-body">
            <strong>From:</strong> {{selectedEmail.from}}<br />
            <strong>Date:</strong> {{selectedEmail.date}}<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" ng-click="closePopup()">Close</a>
        </div>
    </div>
    
        <div class="modal">
        <div class="modal-header">
            <button type="button" class="close"">&times;</button>
            <h3>Compose Email</h3>
        </div>
        <div class="modal-body">
            <form>
                <input type="text" placeholder="To" style="width:95%;"><br />
                <input type="text" placeholder="Subject"...

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