Angular.js

• If you have a question, speak up! If you don't ask questions and don't understand the presentation, it's your fault and not mine. 

1. I can talk for 50 minutes about Angular and show you code samples and whatever comes to mind.
2. You can tell me what you are concerned about, and we can have a discussion for 50 minutes about the validity of the concerns and ways to mitigate them.

git clone https://github.com/angular/angular-seed.git new_project
cd new_project
npm install

npm start

angular.module('myApp.controllers', [])
    .controller('MyCtrl1', ['$scope', function($scope) {
        $scope.data = { text: 'this is text' };
    }])

<p>This is the partial for view 1.  Our data is "{{ data.text }}"</p>
    
<p>While we're at it, this is bound to the data too: <input type="text" ng-model="data.text"></p>

@font-face {
    font-family: 'GCBubbles';
    src: url('fonts/GradeCamBubbles-Bubbles.eot');
    src: url('fonts/GradeCamBubbles-Bubbles.eot?#iefix') format('embedded-opentype'), url('fonts/GradeCamBubbles-Bubbles.woff') format('woff'), url('fonts/GradeCamBubbles-Bubbles.ttf') format('truetype'), url('fonts/GradeCamBubbles-Bubbles.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

angular.module('myApp.directives', []).
    directive('gcBubbleRow', [function() {
        return {
            restrict: 'EA', // This directive is an element or attribute
            scope: {
                choices: '=' // Map in the choices attribute on the directive element
            },
            templateUrl: 'partials/gcBubbleRow.html', // Use this template
            link: function(scope, element, attrs) {
                // We'll use this later.
            }
        };
    }]). // Leave the trailing . for the next directive

<div class="bubbleRow">
    <b class="bubble" ng-repeat="bubble in choices">{{ bubble }}</b>
</div>

<p>Here is our bubble row directive:</p>

<gc-bubble-row choices="'ABCDE'"></gc-bubble-row>

.bubbleRow { font-family: 'GCBubbles'; }