For years impressed with Dojo for its complete suite. It was quite sometimg, I started to fall in love with AngularJS for its plain way of working in DOM.
Dojo's modular code now supports the AMD, which is quite compliant with all the other libraries.
Normal Dojo page
<!doctype html>
<html>
<head>
<script src="path/to/dojo/1.7.x/dojo.js" type="text/javascript" data-dojo-config="parseOnLoad: true"></script>
<script type="text/javascript">
require(['dijit/form/DateTextBox']);
</script>
</head>
<body>
<input id="dateBox" data-dojo-widget="dijit/form/DateTextBox" />
</body>
</html>
AngularJS page
<!doctype html>
<html data-ng-app>
<head>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<script type="text/javascript">
function TestController($scope) {
$scope.date = new Date();
$scope.alert = function(msg) {
$scope.text = msg;
};
};
</script>
</head>
<body data-ng-controller="TestController">
<input id="dateBox" data-ng-model="date2" data-ng-change="alert(date2)" />
<span id="text">{{text}}</span>
</body>
</html>
Dojo + AngularJS page
<!doctype html>
<html data-ng-app="angular-dojo-test">
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" type="text/javascript"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js" type="text/javascript"></script>
<script src="angular-dojo.js" type="text/javascript"></script>
<script>
function TestController($scope) {
$scope.date = new Date();
$scope.alert = function(msg) {
$scope.date = msg;
};
};
var module = angular.module("angular-dojo-test", ['angular-dojo']);
</script>
</head>
<body class="claro" data-ng-controller="TestController">
<div>
<input id="dateBox" data-dojo-widget="dijit/form/DateTextBox" data-ng-model="date" data-ng-change="alert(date)" />
</div>
<h1>Date 1: {{date}} </h1>
</body>
</html>
The angular-dojo.js can be found in the github.
An amazing way to do the JS works
Dojo's modular code now supports the AMD, which is quite compliant with all the other libraries.
Normal Dojo page
<!doctype html>
<html>
<head>
<script src="path/to/dojo/1.7.x/dojo.js" type="text/javascript" data-dojo-config="parseOnLoad: true"></script>
<script type="text/javascript">
require(['dijit/form/DateTextBox']);
</script>
</head>
<body>
<input id="dateBox" data-dojo-widget="dijit/form/DateTextBox" />
</body>
</html>
AngularJS page
<!doctype html>
<html data-ng-app>
<head>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<script type="text/javascript">
function TestController($scope) {
$scope.date = new Date();
$scope.alert = function(msg) {
$scope.text = msg;
};
};
</script>
</head>
<body data-ng-controller="TestController">
<input id="dateBox" data-ng-model="date2" data-ng-change="alert(date2)" />
<span id="text">{{text}}</span>
</body>
</html>
Dojo + AngularJS page
<!doctype html>
<html data-ng-app="angular-dojo-test">
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" type="text/javascript"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js" type="text/javascript"></script>
<script src="angular-dojo.js" type="text/javascript"></script>
<script>
function TestController($scope) {
$scope.date = new Date();
$scope.alert = function(msg) {
$scope.date = msg;
};
};
var module = angular.module("angular-dojo-test", ['angular-dojo']);
</script>
</head>
<body class="claro" data-ng-controller="TestController">
<div>
<input id="dateBox" data-dojo-widget="dijit/form/DateTextBox" data-ng-model="date" data-ng-change="alert(date)" />
</div>
<h1>Date 1: {{date}} </h1>
</body>
</html>
The angular-dojo.js can be found in the github.
An amazing way to do the JS works
No comments:
Post a Comment