Installation of Package:
- Download this module (TODO more instructions once on Github/npm)
npm installdependencies . (npm install --productionto avoid pulling in dev dependencies)
The /dist/ folder contains built and ready-to-go parials.
win95Global.jssets the global variablewin95win95Directivejust returns the directive
Sample js for nodejs application:
var win95Directive = require("windows95Theme/dist/win95Theme");
var win95Explorer = win95Theme.explorer;
var startQueue = win95Theme.queue;
var programs = [{name: "Test1"},{name: "Test2"}];
var app = angular.module("myApp", []);
app.directive("win95theme", win95Explorer);
app.directive("startqueue", startQueue);
app.controller("testcontentcontroller", ['$scope', function($scope) {
$scope.data1 = programs[0];
$scope.data2 = programs[1];
}]);
app.controller("testqueuecontroller", ['$scope', function($scope){
$scope.programs = programs;
}]);
Sample html:
<html>
<head>
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fwww.github.com%2F.%2Fpublic%2Fwin95Style.css">
</head>
<body ng-app="myApp" style="background-color: green;" class="computer-container">
<div class="computer-content" ng-controller="testcontentcontroller">
<win95theme options="data1">Test 1</win95theme>
<win95theme options="data2">Test2</win95theme>
</div>
<div class="computer-footer" ng-controller="testqueuecontroller">
<startqueue class="start-queue" programs="programs"></startqueue>
</div>
<script src="proxy.php?url=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js" ></script>
<script src="proxy.php?url=https%3A%2F%2Fwww.github.com%2FmyAngularApp.js" ></script>
</body>
</html>
- Where we assume
myAngularApp.jsrefers to the bundledjs created by a tool like webpack or browserify
pure html using Global-version mentioned above (assuming the files in dist are mounted on /):
<html>
<head>
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fwww.github.com%2F.%2Fwin95Style.css">
</head>
<body>
<div ng-app="myApp">
<win95theme options="myoptions"></win95theme>
</div>
<script src="proxy.php?url=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js" ></script>
<script src="proxy.php?url=https%3A%2F%2Fwww.github.com%2F.%2Fwin95Global.js" ></script>
<script>
if (win95){
var app = angular.module("myApp", []);
app.directive("win95theme", win95);
}
</script>
</body>
</html>