0
\$\begingroup\$
  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>

\$\endgroup\$
0

1 Answer 1

2
\$\begingroup\$
  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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.