AngularJS calendar directive

Question

1. Is adding CSS to template via <style> the right approach?
2. How should I structure the application?

Plunker link to the code

app = angular.module("app",[]);
app.controller('main', ['$scope', function($scope){
	$scope.name="here";
	$scope.date = new Date('2/1/2016');
}])
app.directive('cal', function(){
	var directive = {};
	directive.restrict = 'E';
	directive.templateUrl = "template.html";
	directive.scope = {
		date : "=date"
	};
	directive.controller = function($scope){
		$scope.name = 'the name';
		var d = $scope.date;
		var m = (d.getMonth()+2)%12;
		if(m==1){
			d =  new Date(m+'/1/'+(d.getFullYear()+1));
		}
		d = new Date(m+'/1/'+d.getFullYear());
		d.setDate(d.getDate()-1);
		d = d.getDate();
		$scope.days = d;
		d = $scope.date;
		$scope.d = d.getDay();
	}
	return directive;
});

<!--the template that the directive uses-->
<style type="text/css">
	.calendar .element{
		text-align: center;
		border: 1px solid black;
		display: inline-block;
		width: 30px;
	}
	.calendar .row{
		text-align: center;
	}
	.calendar{
		display: inline-block;
	}
</style>
<div class="calendar" ng-init="m=['jan','feb','mar','apr','may','jun','july','aug','sep','oct','nov','dec']">
	<div class="row">
		<span>{{m[date.getMonth()] | uppercase}} {{date.getFullYear()}}</span>
	</div>
	<div class="row">
		<div class="element" ng-repeat="i in [1,2,3,4,5,6,7]">
			<span ng-if="i<=d">{{'-'}}</span>
			<span ng-if="i>d">{{i-d}}</span>
		</div>
	</div>
	<div class="row">
		<div class="element" ng-repeat="i in [8,9,10,11,12,13,14]">
			<span ng-if="i<=d">{{' '}}</span>
			<span ng-if="i>d">{{i-d}}</span>
		</div>
	</div>
	<div class="row">
		<div class="element" ng-repeat="i in [15,16,17,18,19,20,21]">
			<span ng-if="i<=d">{{'-'}}</span>
			<span ng-if="i>d">{{i-d}}</span>
		</div>
	</div>
	<div class="row">
		<div class="element" ng-repeat="i in [22,23,24,25,26,27,28]">
			<span ng-if="i<=d">{{'-'}}</span>
			<span ng-if="i>d">{{k=(i-d)}}</span>
		</div>
	</div>
	<div class="row" ng-if="(29-d)<days">
		<div class="element" ng-repeat="i in [29,30,31,32,33,34,35]">
			<span ng-if="(i-d)>days">{{'-'}}</span>
			<span ng-if="(i-d)<=days">{{k=(i-d)}}</span>
		</div>
	</div>
	<div class="row" ng-if="(35-d)<days">
		<div class="element" ng-repeat="i in [36,37,38,39,40,41,42]">
			<span ng-if="(i-d)>days">{{'-'}}</span>
			<span ng-if="(i-d)<=days">{{i-d}}</span>
		</div>
	</div>
</div>

Answer 1

1. Using the style tag inside your directive's template is not very good. Use separate file for it. It will be easier to maintain and also not every code editor has support of CSS in .html files.

2. There are several approaches to structure your project - so called 'by feature', 'by component type', combined. I prefer to structure by feature, cause in this way your components are loosely coupled. an example of such approach:

   app/
     dashboard/
       dashboard.controller.js
       dashboard.html
       dashboadr.css
     users/
      users.controller.js
      users.html
   ....
   

   I also recommend you to read this style guide by John Papa.