<html>
<head>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/tv4/tv4.js"></script>
<script type="text/javascript" src="bower_components/objectpath/lib/ObjectPath.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script>
</head>
<body ng-app="test" ng-cloak>
<div ng-controller="FormController">
<form name="myForm"
sf-schema="schema"
sf-form="form"
sf-model="model"
ng-submit="onSubmit(myForm)"></form>
</div>
<script type="text/javascript">
angular.module('myModule', ['schemaForm']);
angular.module('myModule', ['schemaForm'])
.controller('FormController', function($scope) {
$scope.schema = {
type: "object",
properties: {
name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" },
title: {
type: "string",
enum: ['dr','jr','sir','mrs','mr','NaN','dj']
}
}
};
$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];
$scope.model = {};
});
//Submit code
function FormController($scope) {
$scope.schema = {
type: "object",
properties: {
name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" },
title: {
type: "string",
enum: ['dr','jr','sir','mrs','mr','NaN','dj']
}
}
};
$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];
$scope.model = {};
$scope.onSubmit = function(form) {
// First we broadcast an event so all fields validate themselves
$scope.$broadcast('schemaFormValidate');
// Then we check if the form is valid
if (form.$valid) {
alert('submitted!');
// ... do whatever you need to do with your data.
}
}
}
</script>
</body>
</html>
I am trying to follow the quick start guide and get up and running but I dont seem to be having any success. I have followed the guide;
https://github.com/json-schema-form/angular-schema-form
All includes are there. But I am getting in the console.
angular.js:38 Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=test&p1=Error%3A%20…gular-schema-form%2Fbower_components%2Fangular%2Fangular.min.js%3A22%3A179)
at angular.js:38
at angular.js:4920
at q (angular.js:403)
at g (angular.js:4880)
at eb (angular.js:4802)
at c (angular.js:1914)
at Sc (angular.js:1935)
at ue (angular.js:1820)
at angular.js:33367
at HTMLDocument.b (angular.js:3431)
New to angular so this is all new to me! Seen some SO questions but none with a full working example.
Ok I have fixed the problem. It seems angular was not being initialised correctly.
ng-app="test"
Should be
ng-app="myModule"
I have also taken out the duplicate code for the submit portion. The quick start assumes one is knowledgeable with angular and puts in the correct ng-app tag, Full code below...
<html>
<head>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/tv4/tv4.js"></script>
<script type="text/javascript" src="bower_components/objectpath/lib/ObjectPath.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script>
</head>
<body ng-app="myModule" ng-cloak>
<div ng-controller="FormController">
<form name="myForm"
sf-schema="schema"
sf-form="form"
sf-model="model"
ng-submit="onSubmit(myForm)"></form>
</div>
<script type="text/javascript">
angular.module('myModule', ['schemaForm']);
angular.module('myModule', ['schemaForm'])
.controller('FormController', function($scope) {
$scope.schema = {
type: "object",
properties: {
name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" },
title: {
type: "string",
enum: ['dr','jr','sir','mrs','mr','NaN','dj']
}
}
};
$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];
$scope.model = {};
$scope.onSubmit = function(form) {
// First we broadcast an event so all fields validate themselves
$scope.$broadcast('schemaFormValidate');
// Then we check if the form is valid
if (form.$valid) {
alert('submitted!');
// ... do whatever you need to do with your data.
}
}
});
</script>
</body>
</html>
Related
I am tying to use malhar-angular-dashboard to add widget to my application.
https://github.com/dtpublic/malhar-angular-dashboard
I am just experimenting tying to add a widget to a tab in my web application.
Here is the View:
<html>
<head>
<script src = "/portal_demo/lib/1_6_10/angular.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-animate.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-aria.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-messages.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-cookies.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-route.js"></script>
<script src = "/portal_demo/lib/1_1_9/angular-material.js"></script>
<script src = "/portal_demo/lib/2_5_0/ui-bootstrap-tpls-2.5.0.js"></script>
<script src = "mainController.js"></script>
<link rel = "stylesheet" href = "/portal_demo/lib/3_3_7/bootstrap.css">
<link rel = "stylesheet" href = "/portal_demo/lib/1_1_9/angular-material.css">
<link rel="stylesheet" href="/portal_demo/lib/dash/malhar-angular-dashboard.css">
<script src="/portal_demo/lib/dash/malhar-angular-dashboard.js"></script>
<script src="/portal_demo/lib/dash/sortable.js"></script>
</head>
<body ng-app = "classApp" ng-controller="mainController" >
<header style="position: relative;">
<h2 style="display: inline-block;">Portal</h2>
</header>
<md-content>
<!--- home page for default user --->
<md-tabs md-dynamic-height="" md-stretch-tabs="never" md-border-bottom="" style="background: #f5f5f5;">
<md-tab label="MY VIEW" >
<md-content>
<div dashboard="dashboardOptions"></div>
</md-content>
</md-tab>
<md-tab label="PROJECT 1">
<md-content class="md-padding">
</md-content>
</md-tab>
</md-tabs>
</md-content>
</body>
</html>
Here is the Controller:
var app = angular.module("classApp", ['ngMaterial','ngAnimate', 'ui.bootstrap','ngRoute', 'ui.dashboard']);
//Main Controller
app.controller("mainController", mainController);
function mainController($scope, $http, $window, $window, $location, widgetDefinitions, defaultWidgets) {
//run initMain function during initialization
initMain();
function initMain() {
$scope.dashboardOptions = {
widgetButtons: true,
widgetDefinitions: widgetDefinitions,
defaultWidgets: defaultWidgets,
storage: $window.localStorage,
storageId: 'explicitSave',
explicitSave: true
};
}
};
However, currently I am getting this error:
Error: [$injector:unpr] Unknown provider: widgetDefinitionsProvider <- widgetDefinitions <- mainController
I am just tying to define a default widget, add it to dashboardOptions and then display it in my view using . The widgetDefinitions should already be defined in malhar-angular-dashboard.js. Am I missing a library or is there something else I am doing wrong.
You are not missing any library, it's just that you have to have a factory which returns your widget definitions, for example.
.factory('widgetDefinitions', function (RandomDataModel, MyChartDataModel) {
return [
{
name: 'random',
directive: 'wt-scope-watch',
attrs: {
value: 'randomValue'
}
},
{
name: 'time',
directive: 'wt-time'
},
{
name: 'datamodel',
directive: 'wt-scope-watch',
dataAttrName: 'value',
dataModelType: RandomDataModel
},
{
name: 'resizable',
templateUrl: 'template/resizable.html',
attrs: {
class: 'demo-widget-resizable'
}
},
{
name: 'fluid',
directive: 'wt-fluid',
size: {
width: '50%',
height: '250px'
}
},
{
name: 'My Chart',
directive: 'wt-my-chart',
attrs: {
config: 'config',
toolbar: {
icons: [
'glyphicon glyphicon-tags',
'glyphicon glyphicon-film'
]
}
},
size: {
width: '50%',
height: '250px'
}
}
];
})
.value('defaultWidgets', [
{name: 'random'},
{name: 'time'},
{name: 'datamodel'},
{
name: 'random',
style: {
width: '50%'
}
},
{
name: 'time',
style: {
width: '50%'
}
},
{name: 'My Chart'}
])
.controller('DemoCtrl', function ($scope, $interval, $window, widgetDefinitions, defaultWidgets) {
$scope.dashboardOptions = {
widgetButtons: true,
widgetDefinitions: widgetDefinitions,
defaultWidgets: defaultWidgets,
storage: $window.localStorage,
storageId: 'demo_simple'
};
$scope.randomValue = Math.random();
$scope.config = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
title: {
text: 'Demo'
},
loading: false
};
$interval(function () {
$scope.randomValue = Math.random();
}, 5000);
$scope.doCallback = function () {
console.log('execute callback...');
}
});
I am trying to sort json from an external file in angular js.I am able to sort the file easily when i declared json internally as an array but cant able get data when declared json in external file.Please help me.
My code is:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Angularjs UI-Grid Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
var app = angular.module("uigridApp", ["ui.grid"]);
app.controller("uigridCtrl", function ($scope, $http) {
$http.get("views.json")
.then(function (response) {$scope['users'] = response.data;console.log(response.data);
//$scope['counter'] = Object.keys(response.data).length;
});
/*$scope.users = [
{ name: "Madhav Sai", age: 10, location: 'Nagpur' },
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
{ name: "Rohini Alavala", age: 29, location: 'Chennai' },
{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },
{ name: "Sateesh Chandra", age: 27, location: 'Vizag' }
];*/
});
</script>
<style type="text/css">
.myGrid {
width: 500px;
height: 200px;
}
</style>
</head>
<body ng-app="uigridApp">
<h2>AngularJS UI Grid Example</h2>
<div ng-controller="uigridCtrl">
<div ui-grid="{ data: users }" class="myGrid"></div>
</div>
</body>
</html>
and views.json contains
[
{
name:"Madhav Sai",
age:10,
location:"Nagpur"
},
{
name:"Suresh Dasari",
age:30,
location:"Chennai"
},
{
name:"Rohini Alavala",
age:29,
location:"Chennai"
},
{
name:"Praveen Kumar",
age:25,
location: "Bangalore"
},
{
name:"Sateesh Chandra",
age:27,
location:"Vizag"
}
]
Please help me.
You can do this,
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location' }
]
};
$http.get('data.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
}]);
DEMO
First of all, here is the image:
... and link to the live example.
Yes, the live example doesn't work, that's why I post the question to the SO.
Each item in the left column can have one or multiple colors, specified in the json file. In my example, the sky is blue, the sun is yellow, the grass is green, and the bike is blue and yellow. You can see it directly in the file itself.
What I want?
If I choose "blue" in the first dropdown and leave the second dropdown blank, then the table will show me the sky and the bike.
And if I choose "blue" in the first dropdown and "yellow" in the second, the table will show only the bike.
How it may be done?
Although I believe that live example is more comfortable to use, I also post all the code directly here.
index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<br>
<br>
<button id='toggleFiltering' ng-click="toggleFiltering()" class="btn btn-success">Toggle Filtering</button>
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
test.json
[
{
"name": "sky",
"color": {
"color1": "blue",
"color2": ""
}
},
{
"name": "sun",
"color": {
"color1": "yellow",
"color2": ""
}
},
{
"name": "grass",
"color": {
"color1": "green",
"color2": ""
}
},
{
"name": "john's bike",
"color": {
"color1": "blue",
"color2": "yellow"
}
}
]
app.css
.header-filtered {
color: blue;
}
app.js
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.gridOptions = {
enableFiltering: true,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
},
columnDefs: [
{ field: 'name', headerCellClass: $scope.highlightFilteredHeader },
// THE COLORS GOES HERE
{ field: 'color', filters: [
{
type: uiGridConstants.filter.SELECT,
selectOptions: [ { value: '1', label: 'blue' }, { value: '2', label: 'yellow' }, { value: '3', label: 'green'} ]
},
{
type: uiGridConstants.filter.SELECT,
selectOptions: [ { value: '1', label: 'blue' }, { value: '2', label: 'yellow' }, { value: '3', label: 'green'} ]
}
], cellFilter: 'mapColor', headerCellClass: $scope.highlightFilteredHeader},
]
};
$http.get('https://rawgit.com/johncja/b8bf0cf099f5437025a5/raw/42c80882674bd5700fd2bd399992e8eab9afb4a8/test.json')
.success(function(data) {
$scope.gridOptions.data = data;
data.forEach( function addDates( row, index ){
if (row.color==='blue') {
row.color = '1';
} else if (row.color==='yellow') {
row.color = '2';
} else if (row.color==='green') {
row.color = '3';
}
});
});
$scope.toggleFiltering = function(){
$scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
};
}])
.filter('mapColor', function() {
var colorHash = {
1: 'blue',
2: 'yellow',
3: 'green'
};
return function(input) {
if (!input){
return '';
} else {
return colorHash[input];
}
};
});
I have use ag-grid earlier for exactly same as your requirements(wants a filtering options on column).
I created ui-grid that has three columns, by default, the column header have a 'v' shaped icon (marked in red circle in the image) :
Here the code and the plunker:
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable', 'ui.grid.selection', 'ui.grid.pinning']);
app.controller('ThirdCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {
expandableRowTemplate: 'expandableRowTemplate.html',
expandableRowHeight: 150,
onRegisterApi: function (gridApi) {
gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
if (row.isExpanded) {
row.entity.subGridOptions = {
columnDefs: [
{ name: 'name'},
{ name: 'gender'},
{ name: 'company'}
]};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
row.entity.subGridOptions.data = data;
});
}
});
}
}
$scope.gridOptions.columnDefs = [
{ name: 'id', pinnedLeft:true },
{ name: 'name'},
{ name: 'age'},
{ name: 'address.city'}
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);
.grid {
width: 100%;
height: 400px;
}
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="ThirdCtrl">
<div ui-grid="gridOptions" ui-grid-expandable class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
In the image above the grid I have created in my project.
My question is how can I remove the "v" sign in header row in red circle?
What you want is:
$scope.gridOptions = {
enableColumnMenus: false
...
}
If you want to remove it from all column do the following as suggested by Chris:
$scope.gridOptions = {
enableColumnMenus: false
...
}
But if you want to remove it from one or more but not all columns you need
$scope.gridOptions = {
columnDefs: [
{
enableColumnMenu: false,
...
}
Note that the default value of enableColumnMenus is true.
You can disable sorting
$scope.gridOptions = {
enableSorting: false,
..
}
I managed this by specifying enableSorting: false on the relevant column definition, this is contrary to the documentation which specified sortable: false.
var uiGrid = [];
var columnsUiGrid = [
{ displayName: 'Column A', field: 'model.ColumnA' },
{ displayName: 'Column B', field: 'model.ColumnB', enableSorting: false }
];
$scope.uiGridOptions = {
enableSorting: true,
columnDefs: columnsUiGrid,
data: uiGrid
};
I'm evaluating KendoUI for use within my Angular applications.
I'm having issues with using KendoUI Gird widget: I specify the data source to be a JSON array defined in my controller, but I got absolutely nothing on the page, not even an empty grid.
Here is my html:
<div>
<kendo-grid k-data-source="dataSource">
</kendo-grid>
</div>
Here is my controller:
'use strict';
angular.module('wizardApp').controller('ApplicationGeneralWizardCtrl', ['$scope',
function ($scope) {
console.log('Entering ApplicationGeneralWizardCtrl');
$scope.dataSource = new kendo.data.DataSource({
data: [
{ id: 1, name: 'Tennis Balls', department: 'Sports', lastShipment: '10/01/2013' },
{ id: 2, name: 'Basket Balls', department: 'Sports', lastShipment: '10/02/2013' },
{ id: 3, name: 'Oil', department: 'Auto', lastShipment: '10/01/2013' },
{ id: 4, name: 'Filters', department: 'Auto', lastShipment: '10/01/2013' },
{ id: 5, name: 'Dresser', department: 'Home Furnishings', lastShipment: '10/01/2013' }
],
columns:
[
{ "field": "name", "title": "Name"},
{ "field": "department", "title": "Department"},
{ "field": "lastShipment", "title": "Last Shipment" }
]
});
}
]);
Here is my main app.js:
'use strict';
var app = angular.module('wizardApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'mgo-angular-wizard',
'ngGrid',
'kendo.directives'
]);
app.value('host', false /*use local host*/ ? "http://localhost:63428" : "http://sampleservice.breezejs.com");
app.controller('ApplicationTableCtrl', ['$scope', '$location', '$rootScope','ngGrid',
function ($scope, $location, $rootScope) {
}
]);
app.controller('MainCtrl',
['$scope', 'datacontext','$timeout','WizardHandler','$location',
function($scope, datacontext, $timeout,WizardHandler,$location) {
function Customer(name,number,address,contact)
{
this.customerName = name;
this.customerNumber = number;
this.customerAddress = address;
this.customerContact = contact;
}
console.log('created MainCtrl');
$scope.items = [];
// $scope.logList = logger.logList;
// $scope.lastLog = function(){return logger.lastLog;};
$scope.step_1_Action = function(name,number){
console.log('MainCtrl : step_1_Action dataInput: ' + name + ' ' + number);
$scope.currentCustomer = new Customer('','','','');
$scope.currentCustomer.customerName = name;
$scope.currentCustomer.customerNumber = number;
}
$scope.step_2_Action = function(address,contact){
console.log('MainCtrl : step_2_Action dataInput: ' + address + ' ' + contact);
$scope.currentCustomer.customerAddress = address;
$scope.currentCustomer.customerContact = contact;
}
$scope.saveCustomerRecord = function(){
datacontext.addCustomer($scope.currentCustomer);
datacontext.commit();
$scope.currentCustomer = new Customer('','','','');
//$scope.step1Form.$setPristine();
$scope.currentCustomer = {};
WizardHandler.wizard().goTo(0);
}
}]
);
app
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/IntroductionWizard', {
templateUrl: 'views/Wizards/IntroductionWizard/IntroductionWizard.html',
controller: 'IntroductionWizardCtrl'
})
.when('/ApplicationGeneralWizard', {
templateUrl: 'views/Wizards/ApplicationGeneralWizard/ApplicationGeneralWizard.html',
controller: 'ApplicationGeneralWizardCtrl'
})
.otherwise({
redirectTo: '/'
});
}).run(
function ($rootScope, $location) {
$rootScope.go = function (path) {
$location.path(path);
}
});
Here is my index.html:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="kendo.all.min.js"></script>
<script src="angular-kendo.js"></script>
<link href="styles/kendo.common.min.css" rel="stylesheet">
<link href="styles/kendo.default.min.css" rel="stylesheet">
</head>
<body ng-app="wizardApp">
<div class="container" ng-view=""></div>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- Breeze: -->
<script src="scripts/q.min.js"></script>
<script src="scripts/breeze.min.js"></script>
<script src="scripts/breeze.angular.js"></script>
<script src="scripts/breeze.metadata-helper.js"></script>
<!-- ng-grid: -->
<script src="bower_components/ng-grid/build/ng-grid.debug.js"></script>
<link rel="stylesheet" href="bower_components/ng-grid/ng-grid.css" />
<link rel="stylesheet" href="styles/style.css" />
<!-- the actual app: -->
<script src="scripts/app.js"></script>
<script src="scripts/model.js"></script>
<script src="scripts/datacontext.js"></script>
<script src="scripts/metadataFactory.js"></script>
<script src="scripts/controllers/introductionWizard.js"></script>
<script src="scripts/controllers/applicationGeneralWizard.js"></script>
<script src="scripts/controllers/KendoGridDemoController.js"></script>
<script src="scripts/ngLogger.js"></script>
<script src="bower_components/angular-wizard/dist/angular-wizard.js"></script>
<link rel="stylesheet" href="bower_components/angular-wizard/dist/angular-wizard.css">
</body>
</html>
What am I doing wrong, and what is the right 'Angular-Kendo' way to do it?
Basically your did good, the only thing i can think of is the use of new kendo.data.DataSource({}), you don't need to create a new instance since you're already using the Kendo ui directive that creates it for you (although using this code as is also works), another thing is the fact that we sometimes forget properly adding the third-party library to angular.
function ctrl($scope){
$scope.dataSource = {
data: [
{ id: 1, name: 'Tennis Balls', department: 'Sports', lastShipment: '10/01/2013' },
{ id: 2, name: 'Basket Balls', department: 'Sports', lastShipment: '10/02/2013' },
{ id: 3, name: 'Oil', department: 'Auto', lastShipment: '10/01/2013' },
{ id: 4, name: 'Filters', department: 'Auto', lastShipment: '10/01/2013' },
{ id: 5, name: 'Dresser', department: 'Home Furnishings', lastShipment: '10/01/2013' }
],
columns:
[
{ "field": "name", "title": "Name"},
{ "field": "department", "title": "Department"},
{ "field": "lastShipment", "title": "Last Shipment" }
]
};
}
Live example: http://jsfiddle.net/choroshin/Ysxa6/2/