This is the start of a project to provide a project as a starting point for new applications, applying actual in practice useage of John Papa's style Guide, https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="bestPracticeApp.module.js"></script>
  </head>

  <body ng-app="bestPracticeApp">
    <div ng-controller="mainController as vm">
      <p>{{vm}}</p>
      <p>{{vm.name}}</p>
    </div>
  </body>

</html>

// Code goes here
//always create in IIFE to keep  Global Namespace clear
angular.module('bestPracticeApp',[]);

/* Styles go here */

//contain in IIFE
(function(){
  angular.module('bestPracticeApp')
    .controller('mainController',mainController);
    
    function mainController(){ 
      var vm = this; //use a capture variable
      
      //keep bindings at the top for readability
      vm.id = 0;
      vm.name = 'Best Practices and Using consistent patterns are important';
      
      changeIdToTwo();
      
      //implementation Details go below bindables and executions.
      //internals below never use anonymous functions, they are harder to debug
      function changeIdToTwo(){
        vm.id = 2;
      }
      
      
    }
    
    /* No need to wrap the above function in an array to 
      pass in the variable names
    */
    mainController.$inject = []; 
    /*
      if you had some injectables. You won't need to pass any
      if you use controllerAs sytax and attach this to a local variable
    */
                                
})();