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

Commit 17ed6ae

Browse files
author
Erin Altenhof-Long
committed
feat(correctExample): add a sample application identical to the example, but that uses best practices
The `example` application looks superficially correct but does not adhere to best practices. It therefore generates many hints. This correctExample uses appropriate best practices to generate the same functionality. It should not produce any hints.
1 parent d22db98 commit 17ed6ae

File tree

2 files changed

+129
-0
lines changed

2 files changed

+129
-0
lines changed

‎correctExample/app.css

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
html {
2+
padding: 0;
3+
margin: 0;
4+
background-color: rgb(246, 247, 247);
5+
width: 100%;
6+
}
7+
8+
header {
9+
background-color: rgb(220, 232, 245);
10+
box-shadow: 2px 2px 5px #888888;
11+
margin-top: -10px;
12+
margin-left: -10px;
13+
margin-right: -10px;
14+
margin-bottom: 5px;
15+
padding: 10px;
16+
17+
}
18+
19+
h1 {
20+
padding: 0;
21+
margin: 0;
22+
}
23+
24+
#subtitle1 {
25+
26+
}
27+
28+
#subtitle2 {
29+
font-style: italic;
30+
}
31+
32+
#whichBestPractices {
33+
margin-top: 10px;
34+
}
35+
36+
.bestPracticesListShow {
37+
margin-top: 10px;
38+
padding: 5px;
39+
background-color: white;
40+
border-radius: 20px;
41+
box-shadow: 2px 2px 5px #888888;
42+
}
43+
44+
#contributors {
45+
list-style-type: none;
46+
}

‎correctExample/index.html

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!doctype html>
2+
<html ng-app="bpAppModule" ng-hint>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Angular Best Practices</title>
6+
7+
<link rel="stylesheet" type="text/css" href="app.css">
8+
9+
</head>
10+
<header>
11+
<h1> Angular Best Practices </h1>
12+
</header>
13+
<body>
14+
<div id="subtitle1">
15+
*You'd think a best practices application would follow the best practices.
16+
</div>
17+
<div id="subtitle2">
18+
In this case you'd be right!
19+
</div>
20+
<div ng-controller="BestPracticesController">
21+
<div id="whichBestPractices">
22+
Show Best Practices For:
23+
<div id="selectKind">
24+
<span ng-repeat="type in types">
25+
<input type="checkbox" id="{{type.name}}" ng-model="type.isChecked">
26+
{{type.name}}
27+
</span>
28+
</div>
29+
30+
</div>
31+
32+
<div ng-repeat="type in types">
33+
<table ng-show="type.isChecked">
34+
<tr ng-repeat="practice in type.practices">
35+
<td>
36+
{{practice}}
37+
</td>
38+
</tr>
39+
</table>
40+
</div>
41+
42+
<ul id="contributors">
43+
App contributors:
44+
<li ng-repeat="contributor in contributors">
45+
{{contributor}}
46+
</li>
47+
</ul>
48+
</div>
49+
50+
<script src="../bower_components/angular/angular.js"></script>
51+
<script src="../dist/hint.js"></script>
52+
<script>
53+
angular.module('bpAppModule', []);
54+
angular.module('bpAppModule').controller('BestPracticesController', ['$scope', function($scope) {
55+
$scope.types = [
56+
{ name: 'Controllers', practices: ['Do not use global controllers. Define controllers ' +
57+
'on modules.', 'Name controllers with UpperCamelCase.', 'Name controllers with the ' +
58+
'suffix "Controller".'], isChecked: false},
59+
{ name: 'Directives', practices: ['Include required attributes.', 'Follow the restrict ' +
60+
'property', 'Do not use deprecated options like "replace".', 'Use Angular event ' +
61+
' directives in place of HTML event attributes like "onclick".', 'Use ng-repeat ' +
62+
' options in the correct order.', 'Use a namespace for custom directives that ' +
63+
' uniquely identifies the directive. Use lowerCamelCase and preferably a custom ' +
64+
'prefix unique to the scope of the application.'], isChecked: false},
65+
{ name: 'DOM', practices: ['Do not manipulate the DOM from within Angular Controllers. Use' +
66+
' logic in the view like "ng-repeat" or "ng-show".'], isChecked: false},
67+
{ name: 'Events', practices: ['Double check that functions or variables you bind to are ' +
68+
'defined.'], isChecked: false},
69+
{ name: 'Interpolation', practices: ['Make sure the whole variable you are interpolating' +
70+
'is defined.'], isChecked: false},
71+
{ name: 'Modules', practices: ['Use a namespace for modules that ' +
72+
' uniquely identifies the module. Use lowerCamelCase and preferably a custom ' +
73+
'prefix unique to the scope of the application.', 'Do not create and load ' +
74+
'modules that are not used.', 'Remember to load ngRoute if you are using routing.',
75+
'Only bootstrap one module with "ng-app".'], isChecked: false}
76+
];
77+
78+
$scope.contributors = ['Me', 'You'];
79+
}]);
80+
</script>
81+
</body>
82+
83+
</html>

0 commit comments

Comments
 (0)