title: angular-ui/ui-router with Steroids
body: <p>I am trying to get a basic example running that uses Steroids and Angular-UI/UI-routes for an app with nested views.  I created a Steroids app using the startup example <a href="https://github.com/AppGyver/steroids-angular-mpa" rel="nofollow">here</a>, and then I am trying to populate it with the angular-UI/UI-raouter example <a href="https://github.com/angular-ui/ui-router" rel="nofollow">here</a> (<a href="http://plnkr.co/edit/SDOcGS?p=preview" rel="nofollow">this is their Plunkr</a>).</p>
  
  <p>My opening page only shows "<code>State 1 State 2</code>" literally.  So something is off, but I think I have reached the end of my debugging and guessing skills.  Here is what I have thus far:</p>
  
  <p>I added a 'partials' folder in the <code>app/views</code>, and had to adjust the <code>steroids-make.coffee</code> file in <code>node_modules/grunt-steroids/tasks</code> folder to allow Steroids to 'see' the folder along with the <code>layouts</code>  folder that isn't tied to a controller directly.</p>
  
  <pre><code># get each view folder (except layout)
  for dirPath in grunt.file.expand "app/views/*" when fs.statSync(dirPath).isDirectory()
    basePath = path.basename(dirPath)
    // here I added the partials part
    unless basePath is "layouts" + path.sep or basePath is "layouts" or basePath is "partials" + path.sep or basePath is "partials"
      viewDirectories.push dirPath
  </code></pre>
  
  <p>This got me loading the app again without Steroids complaining.  Once I had the partials, i placed <code>state1.html</code>, <code>state2.html</code>, <code>state1.list.html</code>, and <code>state2.list.html</code> that are described in the Angular-UI walkthrough.  In the main controller js file (this is <code>app/controller/recipe.js</code> from the Steroids example):</p>
  
  <pre><code>// I appended `ui.router` to the dependencies
  var recipeApp = angular.module('recipeApp', ['RecipeModel', 'hmTouchevents', 'ui.router']);
  
  // And included the $stateProvider from the Ang-UI example
  recipeApp.config(function($stateProvider, $urlRouterProvider) {
    //
    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/state1");
    //
    // Now set up the states
    $stateProvider
      .state('state1', {
        url: "/state1",
        templateUrl: "partials/state1.html"
      })
      .state('state1.list', {
        url: "/list",
        templateUrl: "partials/state1.list.html",
        controller: function($scope) {
          $scope.items = ["A", "List", "Of", "Items"];
        }
      })
      .state('state2', {
        url: "/state2",
        templateUrl: "partials/state2.html"
      })
      .state('state2.list', {
        url: "/list",
        templateUrl: "partials/state2.list.html",
        controller: function($scope) {
          $scope.things = ["A", "Set", "Of", "Things"];
        }
      })
  });
  
  //Index Controller
  recipeApp.controller('IndexCtrl', function ($scope, RecipeRestangular) {
     ......    
  });
  
  
  // Show Controller: http://localhost/views/recipe/show.html?id=&lt;id&gt;
  recipeApp.controller('ShowCtrl', function ($scope, $filter, RecipeRestangular) {
     ......    
  });
  </code></pre>
  
  <p>index.html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf8"&gt;
    &lt;title&gt;Steroids App&lt;/title&gt;
  
    &lt;link rel="stylesheet" href="/vendor/topcoat/css/topcoat-mobile-light.css" /&gt;
    &lt;link rel="stylesheet" href="/stylesheets/application.css" /&gt;
  
    &lt;script src="/cordova.js"&gt;&lt;/script&gt;
    &lt;script src="/components/steroids-js/steroids.js"&gt;&lt;/script&gt;
  
    &lt;script src="/components/angular/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="/components/angular-ui-router/angular-ui-router.min.js"&gt;&lt;/script&gt;
  
    &lt;script src="/components/underscore/underscore-min.js"&gt;&lt;/script&gt;
    &lt;script src="/components/restangular/dist/restangular.min.js"&gt;&lt;/script&gt;
  
    &lt;script src="/vendor/hammerjs/hammer.min.js"&gt;&lt;/script&gt;
    &lt;script src="/vendor/angular-hammer/angular-hammer.js"&gt;&lt;/script&gt;
  
    &lt;script src="/models/models.js"&gt;&lt;/script&gt;
  
    &lt;script src="/controllers/&lt;%= yield.controller %&gt;.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div ui-view&gt;&lt;/div&gt;
      &lt;!-- We'll also add some navigation: --&gt;
      &lt;a ui-sref="state1"&gt;State 1&lt;/a&gt;
      &lt;a ui-sref="state2"&gt;State 2&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What else should I do?  Is there another example of using nested views within Steroids I should use?</p>