Directive - Valentjs vs AngularJS

angularjs-directive.js

angular.module('example').directive('helloWorld', function() {
 return {
   restrict: 'E',
   template: '<div> {{ name }} </div>',
   link: function(scope, element) {
    // scope.name = 1;
     element.addClass('orange')l
   },
   controller: ['$scope', funtion($scope) {
     $scope.name = 1;
   }]
 }
});

valentjs-directive-with-static-render.js

class HelloWorldController {
  name = 1;
  
  constructor() {
  
  }
  
  link(element) {
    element.addClass('orange');
  }
  
  static render() {
     return '<div> {{ name }} </div>';
  }
}

valent.component('hello-world', HelloWorldController);

valentjs-directive.js

class HelloWorldController {
  name = 1;
  
  constructor() {
  
  }
  
  link(element) {
    element.addClass('orange');
  }
}

valent.component('hello-world', HelloWorldController, {
  template: '<div> {{ name }} </div>',
});