JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://code.angularjs.org/1.2.0/angular-route.js"></script>
<div ng-app="ngDecoratorApp">
<a href="#/">Home</a> | <a href="#/cows">Cows</a>
<div ng-view=""></div>
</div>
JavaScript
var app = angular.module('ngDecoratorApp', ['ngRoute']);
app.config(['$provide',function($provide) {
$provide.decorator('ngViewDirective', function($delegate) {
var directive = $delegate[0];
directive.replace = true;
return $delegate;
});
}
]);
app.controller('RootCtrl', ['$scope', function ($scope) {
$scope.title = "Home Page";
$scope.cal={
"December" : [],
"November" : [],
"October" : [],
"September" : [],
"August" : [],
"July" : [
{
"day" : "21",
"title" : "Event Title",
"summary" : "Event Summary",
"description" : "oEvent Description",
"_id" : ObjectId("53f252537d343a9ad862866d")
}
],
"June" : [],
"May" : [],
"April" : [],
"March" : [],
"February" : [],
"January" : []
}
}]);
app.controller('CowsCtrl', ['$scope', function ($scope) {
$scope.title = "Cows Page";
}]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
controller: 'RootCtrl',
template: '<div ng-repeat="item in cal | orderBy: key.day">
<a href="/events/{{item.day}}">
<article class="eventslist">
<div class="numberedDate">
<h3>{{item.day}}</h3>
</div>
<div class="calInfo">
<h5>{{item.title}}</h5>
<p>{{item.summary}} <a>more</a></p>
</div>
</article>
</div>'
})
.when('/cows', {
controller: 'CowsCtrl',
template: '<h1>{{title}}</h1>'
})
.otherwise({
redirectTo: '/'
});
}]);