feat(sampleApps): add directive examples to sample applications

Add good and bad uses of custom directives in example and correctExample
to show more ngHint options for directives.

#36

Author: Erin Altenhof-Long

correctExample/app.css

@@ -43,4 +43,5 @@ h1 {
 
 #contributors {
   list-style-type: none;
+  -webkit-padding-start: 0px;
 }

correctExample/index.html

@@ -39,6 +39,8 @@ <h1> Angular Best Practices </h1>
         </table>
       </div>
 
+      <div bp-our-visitors info="erin"></div>
+
       <ul id="contributors">
         App contributors:
         <li ng-repeat="contributor in contributors">
@@ -50,8 +52,8 @@ <h1> Angular Best Practices </h1>
     <script src="../bower_components/angular/angular.js"></script>
     <script src="../dist/hint.js"></script>
     <script>
-      angular.module('bpAppModule', []);
-      angular.module('bpAppModule').controller('BestPracticesController', ['$scope', function($scope) {
+      angular.module('bpAppModule', [])
+        .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 ' +
@@ -74,9 +76,21 @@ <h1> Angular Best Practices </h1>
               '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>
 

example/app.css

@@ -43,4 +43,5 @@ h1 {
 
 #contributors {
   list-style-type: none;
+  -webkit-padding-start: 0px;
 }

example/index.html

@@ -21,20 +21,22 @@ <h1> Angular Best Practices </h1>
     <div ng-controller="bestPractices">
       <div id="whichBestPractices">
         Show Best Practices For:
-        <form id="selectKind" action="">
+        <div id="selectKind">
           <input type="checkbox" id="controllers" onclick="changeList()">Controllers</input>
           <input type="checkbox" id="directives" onclick="changeList()" checked>Directives</input>
           <input type="checkbox" id="DOM" onclick="changeList()">DOM</input>
           <input type="checkbox" id="events" onclick="changeList()">Events</input>
           <input type="checkbox" id="interpolation" onclick="changeList()">Interpolation</input>
           <input type="checkbox" id="modules" ng-click="changeList()">Modules</input>
-        </form>
-
+        </div>
       </div>
 
       <table id="bestPracticesList">
       </table>
 
+      <div ng-controller="Controller">
+        <div our-visitors info="erin"></div>
+      </div>
       <ul id="contributors">
         <li ng-reapet="contributor in contributors">
           {{contributor.name}}
@@ -45,9 +47,7 @@ <h1> Angular Best Practices </h1>
     <script src="../dist/hint.js"></script>
     <script>
       angular.module('bpAppModule', []);
-      angular.module('AppModule2', []);
-      angular.module('AppModule2', []).
-        controller('bestPractices', ['$scope', function($scope) {
+        function bestPractices($scope) {
           var bestPractices = {
             'controllers': ['Do not use global controllers. Define controllers ' +
             'on modules.', 'Name controllers with UpperCamelCase.', 'Name controllers with the ' +
@@ -86,7 +86,24 @@ <h1> Angular Best Practices </h1>
             }
           }
           $scope.contributors = ['Me', 'You'];
-        }]);
+        }
+
+      angular.module('AppModule2', []).controller('Controller', ['$scope', function($scope) {
+        $scope.erin = {
+          name: 'Erin',
+          bestPractice: 'Do not manipulate the DOM from within Angular Controllers.'
+        };
+      }]);
+      angular.module('AppModule2', []).directive('OurVisitors', function() {
+        return {
+          restrict: 'A',
+          template: '<br>Site Visitors:<br>Name: {{visitor.name}}. Favorite Best Practice: {{visitor.bestPractice}}',
+          scope: {
+            visitor: '=info'
+          },
+          replace: true
+        };
+      });
     </script>
   </body>