+ MainMenu component; - MainMenu directive; other

src/client/app.js

@@ -2,6 +2,7 @@
  * Created by tmshv on 04/11/14.
  **/
 
+import MainMenu from './components/MainMenu';
 import Document from './components/Document';
 import Award from './components/Award';
 import GalleryItem from './components/GalleryItem';
@@ -91,7 +92,6 @@ app.run(($location, $rootScope, $http) => {
     api,
     IOService,
     MenuService,
-    require('./directives/mainMenu'),
     require('./directives/backgroundPicture'),
     require('./ui/breadcrumbs'),
     require('./ui/timeline'),
@@ -103,6 +103,7 @@ app.run(($location, $rootScope, $http) => {
     require('./pages/gallery'),
     require('./controllers/ContactsController'),
     require('./controllers/CopyrightController'),
+    MainMenu,
     Document,
     Award,
     GalleryItem,

src/client/components/MainMenu.js

@@ -0,0 +1,14 @@
+import template from '../../templates/components/main-menu.html';
+
+export default function (app) {
+    app.component('mainMenu', {
+        bindings: {
+            menu: '=items'
+        },
+        controller: function(menu){
+            this.isActive = item => menu.current ? item.url == menu.current.url : false;
+            this.isValid = item => 'url' in item;
+        },
+        template: template
+    });
+};

src/client/directives/mainMenu.js

@@ -1,24 +0,0 @@
-module.exports = function (app) {
-    app.directive('mainMenu', function (menu) {
-        return {
-            restrict: 'E',
-            templateUrl: '/views/menu.html',
-            scope: {
-                menu: '=items'
-            },
-            link: function(scope, element){
-                scope.isActive = function (item) {
-                    if (menu.current) {
-                        return item.url == menu.current.url;
-                    } else {
-                        return false;
-                    }
-                };
-
-                scope.isValid = function (item) {
-                    return 'url' in item;
-                };
-            }
-        }
-    });
-};

src/templates/components/main-menu.html

@@ -0,0 +1,6 @@
+<nav role="navigation" class="main-menu">
+    <li ng-repeat="item in $ctrl.menu" class="{{item.color}}" ng-class="{selected: $ctrl.isActive(item)}">
+        <span ng-hide="$ctrl.isValid(item)">{{item.text}}</span>
+        <a href="{{item.url}}" ng-show="$ctrl.isValid(item)">{{item.text}}</a>
+    </li>
+</nav>

src/templates/views/menu.html

@@ -1,6 +0,0 @@
-<nav role="navigation" class="main-menu">
-    <li ng-repeat="item in menu" class="{{item.color}}" ng-class="{selected: isActive(item)}">
-        <span ng-hide="isValid(item)">{{item.text}}</span>
-        <a href="{{item.url}}" ng-show="isValid(item)">{{item.text}}</a>
-    </li>
-</nav>