angular-ui/ui-router with Steroids

问题

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 here, and then I am trying to populate it with the angular-UI/UI-raouter example here (this is their Plunkr).

My opening page only shows "State 1 State 2" 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:

I added a 'partials' folder in the app/views, and had to adjust the steroids-make.coffee file in node_modules/grunt-steroids/tasks folder to allow Steroids to 'see' the folder along with the layouts folder that isn't tied to a controller directly.

# 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

This got me loading the app again without Steroids complaining. Once I had the partials, i placed state1.html, state2.html, state1.list.html, and state2.list.html that are described in the Angular-UI walkthrough. In the main controller js file (this is app/controller/recipe.js from the Steroids example):

// 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=<id>
recipeApp.controller('ShowCtrl', function ($scope, $filter, RecipeRestangular) {
   ......    
});

index.html file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>Steroids App</title>

  <link rel="stylesheet" href="/vendor/topcoat/css/topcoat-mobile-light.css" />
  <link rel="stylesheet" href="/stylesheets/application.css" />

  <script src="/cordova.js"></script>
  <script src="/components/steroids-js/steroids.js"></script>

  <script src="/components/angular/angular.min.js"></script>
  <script src="/components/angular-ui-router/angular-ui-router.min.js"></script>

  <script src="/components/underscore/underscore-min.js"></script>
  <script src="/components/restangular/dist/restangular.min.js"></script>

  <script src="/vendor/hammerjs/hammer.min.js"></script>
  <script src="/vendor/angular-hammer/angular-hammer.js"></script>

  <script src="/models/models.js"></script>

  <script src="/controllers/<%= yield.controller %>.js"></script>
</head>
<body>
  <div ui-view></div>
    <!-- We'll also add some navigation: -->
    <a ui-sref="state1">State 1</a>
    <a ui-sref="state2">State 2</a>
</body>
</html>

What else should I do? Is there another example of using nested views within Steroids I should use?

来源：https://stackoverflow.com/questions/22157357/angular-ui-ui-router-with-steroids

标签

angularjs

angular-ui

angular-routing

steroids