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>
    <table class="table table-bordered table-condensed">
        <tbody ng-init="email = { from: 'John', subject: 'I love angular', date: 'Jan 1' }">
            <tr>
                <td>{{ email.from }}</td>
                <td>{{ email.subject }}</td>
                <td>{{ email.date }}</td>
            </tr>
            <tr>
                <td>Beverly Crusher</td>
                <td>Captain always push themselves too hard.</td>
                <td>Dec 23</td>
            </tr>
            <tr>
                <td>Mom</td>
                <td>Don’t forget to wear clean underwear today.</td>
                <td>Nov 22</td>
            </tr>
        </tbody>
    </table>
</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