Angular: Empty Fiddle

http://angularjs.org/

by johnlindquist

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc6.js"></script>
<script src="https://raw.github.com/coreyti/showdown/master/src/showdown.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<markdown>
# AngularJS Phone Catalog Tutorial Application

## Overview

This application takes the developer thought the process of building a web-application using
angular. The application is loosely based on
[Google phone gallery](http://www.google.com/phone/). Each commit is a separate lesson
teaching a single aspect of angular.


## Prerequisites

### Git
- A good place to learn about setting up git is [here][git-github]
- Git [home][git-home] (download, documentation)

### Node.js
- Generic [installation instructions][node-generic].
- Mac DMG [here][node-mac]
- Windows download from [here][node-windows]. (You will also need [7 Zip] to unzip the node archive)
(and don't forget to add `node.exe` to  your executable path)

### Java
- http://www.java.com

## Workings of the application

- The application filesystem layout structure is based on the [angular-seed] project.
- There is no backend (no server) for this application. Instead we fake the XHRs by fetching
static json files.
- Read the Development section at the end to familiarize yourself with running and developing
an angular application.

## Commits / Tutorial Outline

You can check out any point of the tutorial using
git checkout step-?

To see the changes which between any two lessons use the git diff command.
git diff step-?..step-?

### step-0

- Initial [angular-seed] project layout


### step-1

- We have converted the seed application by removing all of the boiler-plate code.
- We have added single static HTML file which shows a static list of phones. (we will convert this
static page into dynamic one with the help of angular)


### step-2

- Converted static page into dynamic one by:
- create a root controller for the application
- extracting the data...

CSS

body
{
    margin: 0;
    padding: 0;
}
textarea
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
}

JavaScript

var myApp = angular.module('myApp', [])

myApp.directive('markdown', function () {
    var converter = new Showdown.converter();
    
    var editTemplate =
        '<textarea ng-init="foo()" ng-show="isEditMode" ng-dblclick="updatePreview(); isEditMode = false" ng-model="markdown"></textarea>';
    
    var previewTemplate =
            '<preview ng-hide="isEditMode" ng-dblclick="isEditMode = true">Load initial content?</preview>';

    return {
        restrict:'E',
        compile:function (tElement) {
            //grab the original content before passing in the template or you'll lose it
            var markdown = tElement.html();
            tElement.html(editTemplate);
            
            var preview = angular.element(previewTemplate);
            tElement.append(preview);

            return function (scope, element) {
                scope.markdown = markdown;
                scope.updatePreview = function () {
                    preview.html(converter.makeHtml(scope.markdown));
                };

                scope.updatePreview();
            }
        }
    }
})