2

我正在尝试运行一个基本示例，该示例将 Steroids 和 Angular-UI/UI-routes 用于具有嵌套视图的应用程序。我使用此处的启动示例创建了一个 Steroids 应用程序，然后我尝试使用此处的 angular-UI/UI-raouter 示例填充它（这是他们的 Plunkr）。

我的打开页面只显示“ State 1 State 2”字面意思。所以有些东西不对劲，但我认为我的调试和猜测技巧已经到了尽头。到目前为止，这是我所拥有的：

我在 中添加了一个“partials”文件夹app/views，并且必须调整steroids-make.coffee文件夹中的文件以允许 Steroids 与 不直接绑定到控制器node_modules/grunt-steroids/tasks的文件夹一起“查看”该文件夹。layouts

# 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

这让我在没有类固醇抱怨的情况下再次加载应用程序。一旦我有了部分，我放置了state1.html, state2.html, state1.list.html, 并且state2.list.html在 Angular-UI 演练中进行了描述。在主控制器 js 文件中（app/controller/recipe.js来自 Steroids 示例）：

// 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 文件：

<!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>

我还应该做什么？是否有另一个在我应该使用的 Steroids 中使用嵌套视图的示例？

4

0 回答 0