AngularJS Service Dependencies

by Edward Tanguay

HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<div ng-app="app">
    <div ng-controller="CalculatorController">
        <div id="calendar"></div>
        <button class="btn btn-default" ng-click="alterCalender()">Alter Calendar</button>
    </div>
</div>

CSS

body {
    font-family:sans-serif;
    background-color: #f5f5f5;
}
div {
    margin:20px 5px;
}

JavaScript

(function(factory) {
	factory(jQuery, moment);
})(function($, moment) {
    var fc = $.fullCalendar = { version: "2.4.0" };
	$.fn.fullCalendar = function(options) {    
        var res = this;
        var html = '';
        html += '<div>THE CALENDAR</div>';
        html += '<div>DATE: ' + options.defaultDate + '</div>';
        html += '<div>HEADER LEFT: ' + options.header.left + '</div>';
        html += '<hr/>';
        html += '<div>VERSION: ' + $.fullCalendar.version + '</div>';
        res.html(html);
   		return res;
    };
});

angular.module('app', [])
.controller('CalculatorController', function($scope) {
    
    $scope.displayCalendar = function() {
    	$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            defaultDate: '2015-08-26'
        });   
    };
    
    $scope.displayCalendar2 = function() {
    	$('#calendar').fullCalendar({
            header: {
                left: 'prev,next CHANGED',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            defaultDate: '2015-08-26'
        });   
    };
    
    $scope.displayCalendar();
    
    $scope.alterCalender = function() {
    	$scope.displayCalendar2();    
    };
});