JSFiddle - React, Tailwind, and code Playground

by Nicolas Lips

HTML

<div ng-app="app" ng-controller="RootController">
  <p ng-controller="MainController as mainCtrl">
    <input ng-model="mainCtrl.name">
    <button ng-click="mainCtrl.addSection()">Add section</button>
  </p>
  <ul>
    <li ng-repeat="s in workspace.getSections()" ng-controller="SectionItem as itemCtrl">
      {{itemCtrl.getLabel(s)}}
    </li>
  </ul>  
  <h4>
    SectionsPage1
  </h4>
  <ul ng-controller="SectionsPage1 as ctrl">
    <li>
      <pre>{{ctrl | json}}</pre>
    </li>  
    <li ng-repeat="s in ctrl.sections">
      {{s.name}}
    </li>
  </ul>
  <h4>
    SectionsPage2
  </h4>
  <ul ng-controller="SectionsPage2 as ctrl">
    <li>
      <pre>{{ctrl | json}}</pre>
    </li>
    <li ng-repeat="s in ctrl.sections">
      {{s.name}}
    </li>
  </ul>
  <ul ng-controller="SectionsPage1 as ctrl">
    <li>
      <pre>{{ctrl | json}}</pre>
    </li>
    <li ng-repeat="s in ctrl.sections" ng-controller="SectionItem as itemCtrl">
      {{itemCtrl.getLabel(s)}}
    </li>
  </ul>
</div>

JavaScript

var app = angular.module("app", []);
app.controller("MainController", ["workspace", function(workspace) {	
	return {
  	name: name,
  	addSection: function() {
    	workspace.addSection(this.name);
    }
  };
}]);
app.service("workspace", [function() {
	var sections = [{
  	name:"section1"
  },{
  	name:"section2"
  }];
	return {
  	getSections: function() {
    	return sections;
    },
    addSection: function(name) {
    	sections.push({
      	name: name
      });
    }
  }
}]);
app.controller("SectionsPage1", ["workspace", function(workspace) {
	var controllerSections = workspace.getSections();
	return {
  	sections: controllerSections
  };
}]);
app.controller("SectionsPage2", ["$scope", "workspace", function($scope, workspace) {  
	$scope.$watchCollection(function () {
  	return workspace.getSections();
  }, function(newCollection, oldCollection, scope) {
  	buildControllerSections(newCollection);
  });
	var controllerSections = [];
  function buildControllerSections(workspaceSections) {
  	angular.copy([], controllerSections);
    for (var i = 0; i < workspaceSections.length; i++) {
      var section = workspaceSections[i];
      controllerSections.push({
        name: "XXX "+section.name+" XXX"
      });
    }
  }
	return {
  	sections: controllerSections
  };
}]);
app.controller("RootController", ["workspace", "$scope", function(workspace, $scope) {
	$scope.workspace = workspace;
});
app.controller("SectionItem", [function() {
	return {
  	getLabel: function(section) {
    	return "AAA" + section.name +" AAA";
    }
  };
}]);

-------------------
Business
-------------------
class Person
{
	string firstName;
  string lastName;
  date BirthDate
}

------------------
Vue
------------------
<span>{{p.name}} {{p.age}}</span>

1ere solution: traitement dans la vue (à éviter sauf cas hyper simple)
<span>{{p.firstname}} {{p.lastname}} {{(today - p.brithdate)  / 365.25}}</span>

2eme solution: controlleur d'adaptation
<span>{{ctrl.getName(p)}}...