thesabbir · October 18, 2015 06:20
diff --git a/app.js b/app.js
 var App = angular.module("App",[]);
 App.controller('main',['$scope', function($scope){
  $scope.message="Welcome to Tiny App";
  $scope.box = { "content" : "This is a Box "};
 }]);

 App.directive('boxy', function() {
   return {
     restrict: 'E',
     template: '<div class="box">{{box.content}}</div>'
    };
  
 });
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html ng-app="App">
 <head>
  <meta charset="utf-8">
  <title>Tiny App</title>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body ng-controller="main">
   {{message}}
  <boxy></boxy>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <script src='app.js'></script>
 </body>
 </html>
diff --git a/style.css b/style.css
 .box {
  height:100px;
  width:100px;
  display:block;
  background:#aaa;
  padding: 30px;
  margin: 5px;
  text-align: center;
  vertical-align: middle;
  line-height:100px;
  box-shadow:1px 1px 5px #000;
  color:#eee;
  
 }
	var App = angular.module("App",[]);
	App.controller('main',['$scope', function($scope){
	$scope.message="Welcome to Tiny App";
	$scope.box = { "content" : "This is a Box "};
	}]);

	App.directive('boxy', function() {
	return {
	restrict: 'E',
	template: '<div class="box">{{box.content}}</div>'
	};

	});
	<!DOCTYPE html>
	<html ng-app="App">
	<head>
	<meta charset="utf-8">
	<title>Tiny App</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body ng-controller="main">
	{{message}}
	<boxy></boxy>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
	<script src='app.js'></script>
	</body>
	</html>