Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Commit 294eae2

Browse files
l-linl-lin
committed
Refactoring - Following Angular best practices
* Following [John Papa's Angular styleguide](https://github.com/johnpapa/angularjs-styleguide) * Using [ng-annotate](https://github.com/olov/ng-annotate) instead of ng-min
1 parent b879399 commit 294eae2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+3134
-2355
lines changed

‎.jshintrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"strict": true,
1919
"trailing": true,
2020
"smarttabs": true,
21+
"latedef": "nofunc",
2122
"globals": {
2223
"angular": false,
2324
"jQuery": false,

‎Gruntfile.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
module.exports = function(grunt) {
44
var path = require('path');
5-
5+
66
require('load-grunt-tasks')(grunt);
77
require('time-grunt')(grunt);
8-
8+
99
require('load-grunt-config')(grunt, {
1010
configPath: path.join(process.cwd(), 'grunt'),
1111
init: true, //auto grunt.initConfig
@@ -52,7 +52,7 @@ module.exports = function(grunt) {
5252
'clean:dist',
5353
'concat:build',
5454
'wrap',
55-
'ngmin',
55+
'ngAnnotate',
5656
'cssmin',
5757
'uglify',
5858
'concat:banner',

‎demo/advanced/angularWayDataChange.html

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -16,29 +16,29 @@ <h1><i class="fa fa-play"></i>&nbsp;Changing data with the Angular way</h1>
1616
<tabset>
1717
<tab heading="Preview">
1818
<article class="preview">
19-
<div ng-controller="angularWayChangeDataCtrl">
20-
<form class="form-inline" ng-submit="addPerson()">
21-
<table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="row-border hover">
19+
<div ng-controller="AngularWayChangeDataCtrl as showCase">
20+
<form class="form-inline" ng-submit="showCase.addPerson()">
21+
<table datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="row-border hover">
2222
<thead>
2323
<tr>
2424
<th>
2525
<div class="form-group">
2626
<label>
27-
<input class="form-control" type="number" name="id" ng-model="person2Add.id" value=""/>
27+
<input class="form-control" type="number" name="id" ng-model="showCase.person2Add.id" value=""/>
2828
</label>
2929
</div>
3030
</th>
3131
<th>
3232
<div class="form-group">
3333
<label>
34-
<input type="text" class="form-control" name="firstName" ng-model="person2Add.firstName" value=""/>
34+
<input type="text" class="form-control" name="firstName" ng-model="showCase.person2Add.firstName" value=""/>
3535
</label>
3636
</div>
3737
</th>
3838
<th>
3939
<div class="form-group">
4040
<label>
41-
<input type="text" class="form-control" name="lastName" ng-model="person2Add.lastName" value=""/>
41+
<input type="text" class="form-control" name="lastName" ng-model="showCase.person2Add.lastName" value=""/>
4242
</label>
4343
</div>
4444
</th>
@@ -56,13 +56,13 @@ <h1><i class="fa fa-play"></i>&nbsp;Changing data with the Angular way</h1>
5656
</tr>
5757
</thead>
5858
<tbody>
59-
<tr ng-repeat="person in persons">
59+
<tr ng-repeat="person in showCase.persons">
6060
<td>{{ person.id }}</td>
6161
<td>{{ person.firstName }}</td>
6262
<td>{{ person.lastName }}</td>
6363
<td>
64-
<button type="button" ng-click="modifyPerson($index)" class="btn btn-warning"><i class="fa fa-edit"></i></button>
65-
<button type="button" ng-click="removePerson($index)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
64+
<button type="button" ng-click="showCase.modifyPerson($index)" class="btn btn-warning"><i class="fa fa-edit"></i></button>
65+
<button type="button" ng-click="showCase.removePerson($index)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
6666
</td>
6767
</tr>
6868
</tbody>
@@ -73,29 +73,29 @@ <h1><i class="fa fa-play"></i>&nbsp;Changing data with the Angular way</h1>
7373
</tab>
7474
<tab heading="HTML">
7575
<div hljs>
76-
<div ng-controller="angularWayChangeDataCtrl">
77-
<form class="form-inline" ng-submit="addPerson()">
78-
<table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="row-border hover">
76+
<div ng-controller="AngularWayChangeDataCtrl as showCase">
77+
<form class="form-inline" ng-submit="showCase.addPerson()">
78+
<table datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="row-border hover">
7979
<thead>
8080
<tr>
8181
<th>
8282
<div class="form-group">
8383
<label>
84-
<input autofocus class="form-control" type="number" name="id" ng-model="person2Add.id" value=""/>
84+
<input class="form-control" type="number" name="id" ng-model="showCase.person2Add.id" value=""/>
8585
</label>
8686
</div>
8787
</th>
8888
<th>
8989
<div class="form-group">
9090
<label>
91-
<input type="text" class="form-control" name="firstName" ng-model="person2Add.firstName" value=""/>
91+
<input type="text" class="form-control" name="firstName" ng-model="showCase.person2Add.firstName" value=""/>
9292
</label>
9393
</div>
9494
</th>
9595
<th>
9696
<div class="form-group">
9797
<label>
98-
<input type="text" class="form-control" name="lastName" ng-model="person2Add.lastName" value=""/>
98+
<input type="text" class="form-control" name="lastName" ng-model="showCase.person2Add.lastName" value=""/>
9999
</label>
100100
</div>
101101
</th>
@@ -113,13 +113,13 @@ <h1><i class="fa fa-play"></i>&nbsp;Changing data with the Angular way</h1>
113113
</tr>
114114
</thead>
115115
<tbody>
116-
<tr ng-repeat="person in persons">
116+
<tr ng-repeat="person in showCase.persons">
117117
<td>{{ person.id }}</td>
118118
<td>{{ person.firstName }}</td>
119119
<td>{{ person.lastName }}</td>
120120
<td>
121-
<button type="button" ng-click="modifyPerson($index)" class="btn btn-warning"><i class="fa fa-edit"></i></button>
122-
<button type="button" ng-click="removePerson($index)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
121+
<button type="button" ng-click="showCase.modifyPerson($index)" class="btn btn-warning"><i class="fa fa-edit"></i></button>
122+
<button type="button" ng-click="showCase.removePerson($index)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
123123
</td>
124124
</tr>
125125
</tbody>
@@ -130,40 +130,42 @@ <h1><i class="fa fa-play"></i>&nbsp;Changing data with the Angular way</h1>
130130
</tab>
131131
<tab heading="JS">
132132
<div hljs language="js">
133-
angular.module('datatablesSampleApp', ['ngResource', 'datatables']).
134-
controller('angularWayChangeDataCtrl', function ($scope, $resource, DTOptionsBuilder, DTColumnDefBuilder) {
135-
var _buildPerson2Add = function (id) {
136-
return {
137-
id: id,
138-
firstName: 'Foo' + id,
139-
lastName: 'Bar' + id
140-
}
141-
};
133+
angular.module('datatablesSampleApp', ['ngResource', 'datatables']).controller('AngularWayChangeDataCtrl', AngularWayChangeDataCtrl);
142134

143-
$scope.persons = $resource('data1.json').query();
144-
$scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');
145-
$scope.dtColumnDefs = [
135+
function AngularWayChangeDataCtrl($resource, DTOptionsBuilder, DTColumnDefBuilder) {
136+
var vm = this;
137+
vm.persons = $resource('data1.json').query();
138+
vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');
139+
vm.dtColumnDefs = [
146140
DTColumnDefBuilder.newColumnDef(0),
147141
DTColumnDefBuilder.newColumnDef(1),
148142
DTColumnDefBuilder.newColumnDef(2),
149143
DTColumnDefBuilder.newColumnDef(3).notSortable()
150144
];
145+
vm.person2Add = _buildPerson2Add(1);
146+
vm.addPerson = addPerson;
147+
vm.modifyPerson = modifyPerson;
148+
vm.removePerson = removePerson;
151149

152-
$scope.person2Add = _buildPerson2Add(1);
153-
$scope.addPerson = function () {
154-
$scope.persons.push(angular.copy($scope.person2Add));
155-
$scope.person2Add = _buildPerson2Add($scope.person2Add.id + 1);
156-
};
157-
158-
$scope.modifyPerson = function (index) {
159-
$scope.persons.splice(index, 1, angular.copy($scope.person2Add))
160-
$scope.person2Add = _buildPerson2Add($scope.person2Add.id + 1);
161-
};
162-
163-
$scope.removePerson = function (index) {
164-
$scope.persons.splice(index, 1);
165-
};
166-
});
150+
function _buildPerson2Add(id) {
151+
return {
152+
id: id,
153+
firstName: 'Foo' + id,
154+
lastName: 'Bar' + id
155+
};
156+
}
157+
function addPerson() {
158+
vm.persons.push(angular.copy(vm.person2Add));
159+
vm.person2Add = _buildPerson2Add(vm.person2Add.id + 1);
160+
}
161+
function modifyPerson(index) {
162+
vm.persons.splice(index, 1, angular.copy(vm.person2Add));
163+
vm.person2Add = _buildPerson2Add(vm.person2Add.id + 1);
164+
}
165+
function removePerson(index) {
166+
vm.persons.splice(index, 1);
167+
}
168+
}
167169
</div>
168170
</tab>
169171
<tab heading="Example data">

‎demo/advanced/angularWayDataChange.js

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,37 @@
11
'use strict';
2-
angular.module('datatablesSampleApp').controller('angularWayChangeDataCtrl', function ($scope, $resource, DTOptionsBuilder, DTColumnDefBuilder) {
3-
var _buildPerson2Add = function (id) {
4-
return {
5-
id: id,
6-
firstName: 'Foo' + id,
7-
lastName: 'Bar' + id
8-
};
9-
};
2+
angular.module('datatablesSampleApp').controller('AngularWayChangeDataCtrl', AngularWayChangeDataCtrl);
103

11-
$scope.persons = $resource('data1.json').query();
12-
$scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');
13-
$scope.dtColumnDefs = [
4+
function AngularWayChangeDataCtrl($resource, DTOptionsBuilder, DTColumnDefBuilder) {
5+
var vm = this;
6+
vm.persons = $resource('data1.json').query();
7+
vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');
8+
vm.dtColumnDefs = [
149
DTColumnDefBuilder.newColumnDef(0),
1510
DTColumnDefBuilder.newColumnDef(1),
1611
DTColumnDefBuilder.newColumnDef(2),
1712
DTColumnDefBuilder.newColumnDef(3).notSortable()
1813
];
14+
vm.person2Add = _buildPerson2Add(1);
15+
vm.addPerson = addPerson;
16+
vm.modifyPerson = modifyPerson;
17+
vm.removePerson = removePerson;
1918

20-
$scope.person2Add = _buildPerson2Add(1);
21-
$scope.addPerson = function () {
22-
$scope.persons.push(angular.copy($scope.person2Add));
23-
$scope.person2Add = _buildPerson2Add($scope.person2Add.id + 1);
24-
};
25-
26-
$scope.modifyPerson = function (index) {
27-
$scope.persons.splice(index, 1, angular.copy($scope.person2Add))
28-
$scope.person2Add = _buildPerson2Add($scope.person2Add.id + 1);
29-
};
30-
31-
$scope.removePerson = function (index) {
32-
$scope.persons.splice(index, 1);
33-
};
34-
});
19+
function _buildPerson2Add(id) {
20+
return {
21+
id: id,
22+
firstName: 'Foo' + id,
23+
lastName: 'Bar' + id
24+
};
25+
}
26+
function addPerson() {
27+
vm.persons.push(angular.copy(vm.person2Add));
28+
vm.person2Add = _buildPerson2Add(vm.person2Add.id + 1);
29+
}
30+
function modifyPerson(index) {
31+
vm.persons.splice(index, 1, angular.copy(vm.person2Add));
32+
vm.person2Add = _buildPerson2Add(vm.person2Add.id + 1);
33+
}
34+
function removePerson(index) {
35+
vm.persons.splice(index, 1);
36+
}
37+
}

‎demo/advanced/bindAngularDirective.html

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ <h1><i class="fa fa-play"></i>&nbsp;Binding Angular directive to the DataTable</
1111
<tabset>
1212
<tab heading="Preview">
1313
<article class="preview">
14-
<div ng-controller="bindAngularDirectiveCtrl">
14+
<div ng-controller="BindAngularDirectiveCtrl">
1515
<p class="text-danger"><strong>{{ message }}</strong></p>
1616
<br />
1717
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
@@ -20,7 +20,7 @@ <h1><i class="fa fa-play"></i>&nbsp;Binding Angular directive to the DataTable</
2020
</tab>
2121
<tab heading="HTML">
2222
<div hljs>
23-
<div ng-controller="bindAngularDirectiveCtrl">
23+
<div ng-controller="BindAngularDirectiveCtrl">
2424
<p class="text-danger"><strong>{{ message }}</strong></p>
2525
<br />
2626
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
@@ -29,43 +29,48 @@ <h1><i class="fa fa-play"></i>&nbsp;Binding Angular directive to the DataTable</
2929
</tab>
3030
<tab heading="JS">
3131
<div hljs language="js">
32-
angular.module('datatablesSampleApp').
33-
controller('bindAngularDirectiveCtrl', function ($scope, $compile, DTOptionsBuilder, DTColumnBuilder) {
34-
$scope.message = '';
35-
$scope.edit = function(id) {
36-
$scope.message = 'You are trying to edit the row with ID: ' + id;
37-
// Edit some data and call server to make changes...
38-
// Then reload the data so that DT is refreshed
39-
$scope.dtOptions.reloadData();
40-
};
41-
$scope.delete = function(id) {
42-
$scope.message = 'You are trying to remove the row with ID: ' + id;
43-
// Delete some data and call server to make changes...
44-
// Then reload the data so that DT is refreshed
45-
$scope.dtOptions.reloadData();
46-
};
32+
angular.module('datatablesSampleApp', ['datatables']).controller('BindAngularDirectiveCtrl', BindAngularDirectiveCtrl);
4733

34+
function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder) {
35+
$scope.message = '';
36+
$scope.edit = edit;
37+
$scope.delete = deleteRow;
4838
$scope.dtOptions = DTOptionsBuilder.fromSource('data1.json')
4939
.withPaginationType('full_numbers')
50-
.withOption('createdRow', function(row, data, dataIndex) {
51-
// Recompiling so we can bind Angular directive to the DT
52-
$compile(angular.element(row).contents())($scope);
53-
});
40+
.withOption('createdRow', createdRow);
5441
$scope.dtColumns = [
5542
DTColumnBuilder.newColumn('id').withTitle('ID'),
5643
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
5744
DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
5845
DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
59-
.renderWith(function(data, type, full, meta) {
60-
return '<button class="btn btn-warning" ng-click="edit(' + data.id + ')">' +
61-
' <i class="fa fa-edit"></i>' +
62-
'</button>&nbsp;' +
63-
'<button class="btn btn-danger" ng-click="delete(' + data.id + ')">' +
64-
' <i class="fa fa-trash-o"></i>' +
65-
'</button>';
66-
})
46+
.renderWith(actionsHtml)
6747
];
68-
});
48+
49+
function edit(id) {
50+
$scope.message = 'You are trying to edit the row with ID: ' + id;
51+
// Edit some data and call server to make changes...
52+
// Then reload the data so that DT is refreshed
53+
$scope.dtOptions.reloadData();
54+
}
55+
function deleteRow(id) {
56+
$scope.message = 'You are trying to remove the row with ID: ' + id;
57+
// Delete some data and call server to make changes...
58+
// Then reload the data so that DT is refreshed
59+
$scope.dtOptions.reloadData();
60+
}
61+
function createdRow(row, data, dataIndex) {
62+
// Recompiling so we can bind Angular directive to the DT
63+
$compile(angular.element(row).contents())($scope);
64+
}
65+
function actionsHtml(data, type, full, meta) {
66+
return '<button class="btn btn-warning" ng-click="edit(' + data.id + ')">' +
67+
' <i class="fa fa-edit"></i>' +
68+
'</button>&nbsp;' +
69+
'<button class="btn btn-danger" ng-click="delete(' + data.id + ')">' +
70+
' <i class="fa fa-trash-o"></i>' +
71+
'</button>';
72+
}
73+
}
6974
</div>
7075
</tab>
7176
</tabset>

0 commit comments

Comments
 (0)