wwsun/app.js

## app.js
angular.module('exampleApp', [
    'exampleApp.Controllers',
    'exampleApp.Filters',
    'exampleApp.Services',
    'exampleApp.Directives'
]);

## controllers.js
angular.module('exampleApp.Controllers', [])

    .controller('dayCtrl', function (days) {
        var vm = this;
        vm.day = days.today;
    })

    .controller('tomorrowCtrl', function (days) {
        var vm = this;
        vm.day = days.tomorrow;
    });

## directives.js

angular.module('exampleApp.Directives', [])

    // tells NG that I want to receive the filter service objecct when my function is called
    .directive("highlight", function ($filter) {

        // $filter gives me access to all of the filters that have been defined
        // obtain the filter by name
        var dayFilter = $filter('dayName');

        /**
         * scope: for the view
         * element: to which the directive has been applied
         * attributes: of that element
         */
        return function(scope, element, attrs) {

            console.log(scope.day); // { day: "Tuesday" }

            if(dayFilter(scope.day.day) === attrs["highlight"]) {
                element.css("color", "red");
            }
        }
    });

## example.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AngularJS Demo</title>

    <link rel="stylesheet" href="../libs/bootstrap/dist/css/bootstrap.min.css"/>

</head>
<body ng-app="exampleApp">

<div class="container">
    <div class="panel">
        <div class="page-header">
            <h3>AngularJS App</h3>
        </div>

        <h4 ng-controller="dayCtrl as day" highlight="Tuesday">Today is {{day.day || "(unknown)" | dayName}}</h4>
        <h4 ng-controller="tomorrowCtrl as tomorrow">Tomorrow is {{tomorrow.day || "(unknown)" | dayName}}</h4>
    </div>
</div>

<!--JavaScript Dependencies-->
<script src="../libs/angular/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
</body>
</html>

## filters.js
angular.module('exampleApp.Controllers', [])

    .controller('dayCtrl', function (days) {
        var vm = this;
        vm.day = days.today;
    })

    .controller('tomorrowCtrl', function (days) {
        var vm = this;
        vm.day = days.tomorrow;
    });

## services.js
angular.module('exampleApp.Services', [])

    // custom service
    .service("days", function() {
        this.today = new Date().getDay();
        this.tomorrow = this.today + 1;
    });
	angular.module('exampleApp', [
	'exampleApp.Controllers',
	'exampleApp.Filters',
	'exampleApp.Services',
	'exampleApp.Directives'
	]);
	angular.module('exampleApp.Controllers', [])

	.controller('dayCtrl', function (days) {
	var vm = this;
	vm.day = days.today;
	})

	.controller('tomorrowCtrl', function (days) {
	var vm = this;
	vm.day = days.tomorrow;
	});

	angular.module('exampleApp.Directives', [])

	// tells NG that I want to receive the filter service objecct when my function is called
	.directive("highlight", function ($filter) {

	// $filter gives me access to all of the filters that have been defined
	// obtain the filter by name
	var dayFilter = $filter('dayName');

	/**
	* scope: for the view
	* element: to which the directive has been applied
	* attributes: of that element
	*/
	return function(scope, element, attrs) {

	console.log(scope.day); // { day: "Tuesday" }

	if(dayFilter(scope.day.day) === attrs["highlight"]) {
	element.css("color", "red");
	}
	}
	});
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>AngularJS Demo</title>

	<link rel="stylesheet" href="../libs/bootstrap/dist/css/bootstrap.min.css"/>

	</head>
	<body ng-app="exampleApp">

	<div class="container">
	<div class="panel">
	<div class="page-header">
	<h3>AngularJS App</h3>
	</div>

	<h4 ng-controller="dayCtrl as day" highlight="Tuesday">Today is {{day.day \|\| "(unknown)" \| dayName}}</h4>
	<h4 ng-controller="tomorrowCtrl as tomorrow">Tomorrow is {{tomorrow.day \|\| "(unknown)" \| dayName}}</h4>
	</div>
	</div>

	<!--JavaScript Dependencies-->
	<script src="../libs/angular/angular.min.js"></script>
	<script src="js/app.js"></script>
	<script src="js/controller.js"></script>
	<script src="js/filters.js"></script>
	<script src="js/services.js"></script>
	<script src="js/directives.js"></script>
	</body>
	</html>
	angular.module('exampleApp.Services', [])

	// custom service
	.service("days", function() {
	this.today = new Date().getDay();
	this.tomorrow = this.today + 1;
	});