e2e/_unused/correct-example.html
<!doctype html>
<html ng-app="bpAppModule" ng-hint>
<!-- Best practice: name modules with lowerCamelCase and an application specific prefix.
Here `bp` is short for `best practices`. This ensures the modules prefixed with this namespace
will be unique and not overwritten by third party modules. Additionally, this application
correctly uses only one module with `ng-app`. -->
<head>
<meta charset="utf-8">
<title>Angular Best Practices</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<header>
<h1> Angular Best Practices </h1>
</header>
<div id="subtitle1">
*You'd think a best practices application would follow the best practices.
</div>
<div id="subtitle2">
In this case you'd be right!
</div>
<!-- Best practice: name controllers with UpperCamelCase and the suffix 'Controller' -->
<div ng-controller="BestPracticesController">
<div id="whichBestPractices">
Show Best Practices For:
<div id="selectKind">
<!-- Best practice: use ng-repeat rather than manipulating the DOM from controllers. -->
<span ng-repeat="type in types">
<input type="checkbox" id="{{type.name}}" ng-model="type.isChecked">
{{type.name}}
</span>
</div>
</div>
<div ng-repeat="type in types">
<!-- Best practice: use ng-show rather than manipulating the DOM from controllers. -->
<table ng-show="type.isChecked">
<tr ng-repeat="practice in type.practices">
<td>
{{practice}}
</td>
</tr>
</table>
</div>
<!-- Best practice: name custom directives with an application specific prefix. -->
<!-- Additionally, use directives according to their `restrict` designation. -->
<div bp-our-visitors info="erin"></div>
<ul id="contributors">
App contributors:
<li ng-repeat="contributor in contributors">
{{contributor}}
</li>
</ul>
</div>
<script src="../../node_modules/angular/angular.js"></script>
<script src="../../dist/hint.js"></script>
<script>
angular.module('bpAppModule', [])
/**
* Best practice: declare controllers on modules rather than on global scope.
**/
.controller('BestPracticesController', ['$scope', function($scope) {
$scope.types = [
{ name: 'Controllers', practices: ['Do not use global controllers. Define controllers ' +
'on modules.', 'Name controllers with UpperCamelCase.', 'Name controllers with the ' +
'suffix "Controller".'], isChecked: false},
{ name: 'Directives', practices: ['Include required attributes.', 'Follow the restrict ' +
'property', 'Do not use deprecated options like "replace".', 'Use Angular event ' +
' directives in place of HTML event attributes like "onclick".', 'Use ng-repeat ' +
' options in the correct order.', 'Use a namespace for custom directives that ' +
' uniquely identifies the directive. Use lowerCamelCase and preferably a custom ' +
'prefix unique to the scope of the application.'], isChecked: false},
{ name: 'DOM', practices: ['Do not manipulate the DOM from within Angular Controllers. Use' +
' logic in the view like "ng-repeat" or "ng-show".'], isChecked: false},
{ name: 'Events', practices: ['Double check that functions or variables you bind to are ' +
'defined.'], isChecked: false},
{ name: 'Interpolation', practices: ['Make sure the whole variable you are interpolating' +
'is defined.'], isChecked: false},
{ name: 'Modules', practices: ['Use a namespace for modules that ' +
' uniquely identifies the module. Use lowerCamelCase and preferably a custom ' +
'prefix unique to the scope of the application.', 'Do not create and load ' +
'modules that are not used.', 'Remember to load ngRoute if you are using routing.',
'Only bootstrap one module with "ng-app".'], isChecked: false}
];
$scope.erin = {
name: 'Erin',
bestPractice: 'Do not manipulate the DOM from within Angular Controllers.'
};
$scope.contributors = ['Me', 'You'];
}])
.directive('bpOurVisitors', function() {
return {
restrict: 'A',
template: '<br>Site Visitors:<br>Name: {{visitor.name}}. Favorite Best Practice: {{visitor.bestPractice}}',
scope: {
visitor: '=info'
}
};
});
</script>
</body>
</html>