Adding a Front End View - wtg/elections GitHub Wiki

Creating the AngularJS Controller

  • Create a file in the public/javascripts/controllers/ directory, and name it <ControllerName>Controller.js.
  • Inside this file, paste the following, replacing <ControllerName> with the name of your controller (should match your filename, excluding the file extension):
app.controller('<ControllerName>Controller', ['$scope', function($scope) {
     // Controller code goes here
}]);
  • Add the following to views/index.html, replacing <filename> with the name of the file you created for your controller:
<script src="/javascripts/controllers/<filename>"></script>
  • For instructions on how to create AngularJS Controllers, read the documentation here.

Creating the partial for the view

  • Create a file in the views/partials/ directory, and name it <viewname>.html (should ideally match the name used for the controller, but this is not required).
  • Open public/javascripts/app.js in the text editor of your choice, except Notepad, and paste the following prior to the line that contains otherwise({ (Replace <route> with your view's desired route, <viewname> with the name used for the partial, and <ControllerName> with the name used for the controller):
    when('/<route>', {
        templateUrl: 'partials/<viewname>.html',
        controller: '<ControllerName>Controller'
    }).
⚠️ **GitHub.com Fallback** ⚠️