Angular: Empty Fiddle

http://angularjs.org/

by boneskull

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="blog">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title ng-bind-template="{{title}}"></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"
            charset="utf-8"></script>
</head>
<body>
<div ng-controller="HeadCtrl">
    <h1>{{title}}</h1>

    <h3>{{description}}</h3>
</div>
<div ng-controller="ContentCtrl">
    <new-post-area post="new_post" cancel-text="Cancel" save-text="Save" cancel="cancel" save="save"></new-post-area>
    <div id="{{post.id}}" ng-repeat="post in posts|orderBy:'-date'">
        <ng-switch on="post.editing">
            <div ng-switch-when="true">
                <div class="important-background-color" color="#EEE">
                    <input type="text" ng-model="post.temp.title"/><br/>
                    <textarea ng-model="post.temp.body"></textarea><br/>
                    <button ng-click="cancel(post)">Cancel</button>
                    <button ng-click="save(post)">Save Changes</button>
                </div>
            </div>
            <div ng-switch-default>
                <h2 ng-click="edit(post)">{{post.title}}</h2>
                <p ng-click="edit(post)" ng-bind-html-unsafe="post.body"></p>
                <p><em>posted on {{post.date|date:'short'}} by {{post.author}}</em></p>
            </div>
            <hr/>
            <button ng-click="newPost()" fade-in="!new_post">New Post</button>
        </ng-switch>

    </div>

</div>
<!-- directive: copyright -->
<form name="timeForm">
    <input type="text" future-time ng-model="time"/>
</form>
</body>
</html>

JavaScript

/*global angular, $*/
(function() {
    var DATA = {
        "posts": [
            {
            "id": "1",
            "title": "First Post!!!!~11",
            "date": "1352695804",
            "author": "Chris Hiller",
            "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia cursus arcu a pellentesque.\n\n Curabitur convallis massa faucibus tellus tincidunt et tincidunt augue elementum. Curabitur pretium metus gravida augue elementum mollis."},
        {
            "id": "2",
            "title": "Scary Post",
            "date": "1352695857",
            "author": "Michael Myers",
            "body": "Aenean nec aliquam libero. Suspendisse lorem magna, lobortis eu tincidunt vel, faucibus quis erat"}
        ]
    };

    'use strict';

    // Define our module.  Yes, you need the empty array, or the module() function
    // becomes a "getter"
    var blog = angular.module('blog', []);

    // Runs after all services are initialized; puts the title of the blog into the root Scope
    blog.run(function($rootScope) {
        $rootScope.blog_title = 'My Blog';
    });

    // Header controller presents a description for the blog
    blog.controller('HeadCtrl', function($scope) {
        $scope.description = 'My Important Blog';
    });

    // Controls the blog content including all methods related to posts
    blog.controller('ContentCtrl', function($scope, Posts, Post) {

        // util function to stop editing all of the posts
        $scope._stopEditingAllPosts = function(posts) {
            var i;
            if (angular.isArray(posts)) {
                i = posts.length;
                while (i--) {
                    posts[i].stopEditing();
                }
            }
        };

        // Retrieve the posts from our "server".  If this succeeds, we'll
        // put the posts into our $scope and do some post-processing.
        Posts.getPosts().success(function(data) {
            var posts = data.posts,
       ...