AngularJS templates

by Austin Anderson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<div ng-app="app">
  <system-notifications></system-notifications>
</div>

CSS

.message {
  border: solid 1px black;
  padding: 15px;
  margin: 15px;
  width: 50px;
}

JavaScript

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


angular.module('app').component('systemNotifications', {
  template: '<div class="message" ng-repeat="notification in vm.notifications" ng-click="vm.hideNotification(notification.Url)">{{notification.id}}</div>',
  controllerAs: 'vm',
  controller: systemNotifications

});

systemNotifications.$inject = ['$http', '$timeout', '$sce'];

function systemNotifications($http, $timeout, $sce) {
  this.$onInit = function() {
    var vm = this;
    vm.test = "world";
    vm.notifications = [{id:'1', Url:'url-1'}, {id:'2', Url:'url-2'}, {id:'3', Url:'url-3'}];
  };

  this.hideNotification = function(url) {
		$cookies.put('show-' + url, 'false');
  	alert(url);
  };
};