<!DOCTYPE html>

<html ng-app="web">
<head>
  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <script src="directives.js"></script>
</head>

<body ng-controller="WebController">
   <!--angular에서 카멜케이스로 지정하지만 여기서는 '-'으로 구분 -->
  <div>
    <my-title />
  </div>

  <ul ng-repeat="Fruit in Fruits">
    <my-item></my-item>
  </ul>
</body>
</html>
(function() {

  var app = angular.module('web', []);

  app.controller("WebController", ["$scope", function($scope) {
    $scope.Fruits = ['Apple', 'Orange', 'Cherry'];
    $scope.Title = "TEST";
  }])

})();
/* Styles go here */

angular.module('web').directive('myTitle', function() {
  return {
    template: '<h1>테스트</h1>'
  }
});

angular.module('web').directive('myItem', function() {
  return {
    templateUrl: 'item.tmpl.html'
  }
});
<li>{{Fruit}}</li>