1,Install AngularJs scraffold tool:generator-angular-fullstack
reference to :https://github.com/DaftMonk/generator-angular-fullstack
2,Create an angularjs project:angulardemo
1)mkdir angulardemo
2)cd angulardemo
3) yo angular-fullstack
4)grunt serve( run angularjs project)
5)browser project:http://localhost:9000
3,Integrate kendo ui
1)edit angulardemo/client/index.html,add the following css and js files
js file added behind the line:""
2)edit angulardemo/client/app/app.js
add 'kendo.directives' behind 'ui.bootstrap',looks like as below:
angular.module('angulardemoApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router',
'ui.bootstrap',
'kendo.directives'
])
4, add a schedular component to angularjs project
1)edit angulardemo/client/app/main.html,looks like as below:
2) edit angulardemo/client/app/main.controller.js,looks like as below:
//---------------------------------------start
angular.module('testdemoApp')
.controller('MainCtrl', function ($scope, $http) {
var dataEvents = [
{ id:1, title:"[email protected]", start: new Date(), end: new Date() },
{ id:2, title:"[email protected]", start: new Date(), end: new Date() }
];
$scope.events = new kendo.data.SchedulerDataSource({
transport: {
read: function(options) {
options.success(dataEvents);
}
}
});
})
.directive( 'peopleScheduler',
function() {
return {
restrict: 'E',
replace: true,
scope: {
source: "=eventSource",
},
controller: function($scope, $timeout) {
$scope.schedulerOptions = {
date: new Date(),
dataSource: $scope.source
};
},
template: ''
}
}
);
//-------------------------end