Angular POC

by Paulo Ávila

HTML

<div data-ng-app="myApp" data-ng-controller="MyCtrl">
    <input data-ng-model="hello" data-foo-bar="currency" value="1847.218" />
    {{hello}}
    <br /><br />

    <!--
    /_locales/en/messages.json
    {
        "_key_": {
            "value": "Translated content with option $placeHolderName$ or numbered placeholders: $1, $2. Use $$ for a dollar sign",
            "description": "Describes what this content is suppose to be",
            "placeholders": {
                "placeHolderName": {
                    "content": "The substitution variable passed in is: $1",
                    "example": "Clarifies which substitution variable was provided."
                }
            }
        }
    }

    https://developer.chrome.com/extensions/i18n-messages.html#message
    http://codingsmackdown.tv/blog/2012/12/14/localizing-your-angularjs-app/
    -->
    {{ 'hi' | uppercase }}
    <br /><br />
    <span ng-bind="'hi' | uppercase"></span>
    <br /><br />

        
    <!--
    need to have a dot inside ng-model
    http://www.youtube.com/watch?v=ZhfUv0spHCY#t=32m50s
    -->
    <input type="range" />
    <br /><br />
    <input type="range" data-ng-model="ranger" /> {{ranger}}
    <br /><br />
    <button ng-click="showMySvc()">Log Decorated Svc</button>
</div>

JavaScript

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

app.constant('myObj', {
    id: 'myObjID'
});

app.run(['mySvc', function (mySvc) {
    console.log(mySvc);
}]);

app.service('mySvc', function () {
    this.id = 'mySvcId';
});

app.config(['$provide', function ($provide) {
    $provide.decorator('mySvc', function ($delegate) {
        console.log("in decorator 1");
        $delegate['decoratedProp1'] = 'I came from the decorator';
        return $delegate;
    });
}]);

app.config(['$provide', function ($provide) {
    $provide.decorator('mySvc', function ($delegate) {
        console.log("in decorator 2");
        $delegate['decoratedProp2'] = 'I ALSO came from the decorator';
        return $delegate;
    });
}]);

function MyCtrl($scope, $filter, mySvc) {
    var currency = $filter('currency');
    $scope.myFn = function(input) {
        return currency(input);
    };
    
    $scope.showMySvc = function () {
        console.log(mySvc);
    };
}

app.directive('fooBar', function($parse, $filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elm, attrs, model) {
            model.$parsers.push(function(input) {
                return $filter(attrs.fooBar)(input);
            });
        }
    };            
});