title: using angular-ui-router with express/node, file structure
body: <p>I am following <a href="https://hackhands.com/mongodb-crud-mvc-way-with-passport-authentication/" rel="nofollow">this</a> tutorial, and I have an app structure like this. I've tried to show only the relevant bits as it is sort of a lot of code.</p>
  
  <pre><code>/app
      /views
          index.ejs
  /config
      express.js
  /public
      /external_libs
          angular.js
          angular-ui-router.js
      /js
          app.js
          controllers.js
      /partials
          home.html
  server.js
  </code></pre>
  
  <p>Inside my express.js (relevant bit)</p>
  
  <pre><code>app.use(express.static('./public');
  </code></pre>
  
  <p>I am able to set up my angular controllers, so I know this directory is being hit. For example, my index.ejs</p>
  
  <pre><code>&lt;html ng-app="myapp"&gt;
      &lt;head&gt;
          &lt;script src="external_libs/angular.js"&gt;&lt;/script&gt;
          &lt;script src="external_libs/angular-ui-router.js"&gt;&lt;/script&gt;
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
          &lt;script src="js/controllers.js"&lt;/script&gt;
      &lt;/head&gt;
      &lt;body ng-controller= "MainCtrl"&gt; &lt;!-- an alert in my controller fires, so I know the public directory is accessible, at least the js folder--&gt;
          &lt;div ui-view&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In my app.js</p>
  
  <pre><code>var app = angular.module('myapp', ['ui.router']);
  app.config([
      function($stateProvider, $urlRouterProvider) {
          $urlRouterProvider.otherwise('/home');
          $stateProvider
              .state('home', {
                  url: '/home',
                  templateUrl: 'partials/home.html'
              });
      }
  ]);
  </code></pre>
  
  <p>In controllers.js</p>
  
  <pre><code>var app = angular.module('myapp', []);
  app.controller('MainCtrl', [
      '$scope', function($scope) {
          alert("This alert is indeed alerted");
      }
  ]);
  </code></pre>
  
  <p>home.html</p>
  
  <pre><code>&lt;h1&gt; This is a test to see if the view on index.ejs is being populated &lt;/h1&gt;
  </code></pre>
  
  <p>I have tried many different combinations for the "templateUrl" inside app.js, including</p>
  
  <pre><code>"partials/home.html"
  "/partials/home.html"
  "../partials/home.html"
  </code></pre>
  
  <p>None of these result in home.html being placed inside the div ui-view element on my index.ejs page. I realize I have posted a somewhat limited amount of code, but the fact that I am able to hit my controllers and see an alert message leads me to believe that I am almost there. I am using server side routing to render the initial index.ejs, but other than that I want to handle things client side. Does anyone know how to make angular-ui-router locate my partial with this set up?</p>