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 gogirl

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">
<body ng-app="myApp" ng-init="what = 'Angularjs and Bootstrap'">
{{what}}
<hr>

<h4>Supplying immutable attributes for Isolated Scope</h4>

<my-d1>
    <XMP>
        In Dom:
        <my-d2 my-attr1="value one" my-attr3='value three'>//set in scope
        </my-d2>
    </XMP>

    OUTPUT2:
    <my-d2 my-attr1="value one" my-attr3='value three'>//set in scope
    </my-d2>
</my-d1>
<my-d1>
    <XMP>
        In Dom:
        <my-d2 my-attr1='value one' my-alias-attr2='value two'>//set in scope
        </my-d2>
    </XMP>


    OUTPUT1:
    <my-d2 my-attr1='value one' my-alias-attr2='value two'>//set in scope
    </my-d2>
</my-d1>

JavaScript

//Remember: include '' in params of the DI array
    // My Main Application File
    angular.module('myApp', ['myApp.myD1', 'myApp.myD2']);

    // Directive One File
    angular.module('myApp.myD1', []).directive('myD1', function () {
        return {
            restrict: 'E',
            transclude: true,           //scope: { heading: '@', image: '@' },
            template: '<div class="container">' +
                    '<div class="row">' +
                    '<div class="span12">' +
                    '<div class="well">' +
                    '<p ng-transclude>' +
                    '</p>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>',
            replace: true
        }
    });
    // Directive Two File
    angular.module('myApp.myD2', []).directive('myD2', function () {
        return {
            restrict: 'E',
            scope: { //  can copy from $attrs into scope
                myAttr1: '@',
                myAttr2: '@myAliasAttr2'
                //  myAttr3: '@'
            },
            replace: true,
            template: '<p>myAttr1 = {{myAttr1}} // Passed by my-attr1<br> myAttr2 = {{myAttr2}} // Passed by my-alias-attr2 <br> <br>myAttr3 = {{myAttr3}} // From controller</p>',
            controller: function ($scope, $element, $attrs) {
                // can copy from $attrs to controller
                $scope.myAttr3 = $attrs.myAttr3 || 'Third value is missing';
            }
        }
    });