Angular-UI / UI-маршрутизатор со стероидами

Я пытаюсь получить базовый пример выполнения, который использует стероиды и Angular-UI/UI-маршруты для приложения с вложенными представлениями. Я создал приложение Steroids, используя пример запуска, и затем я пытаюсь заполнить его примером angular-UI/UI-raouter ( это их Plunkr).

Моя стартовая страница показывает только State 1 State 2 "Буквально. Так что что-то не так, но я думаю, что я достиг конца своих навыков отладки и отгадывания. Вот что я имею до сих пор:

Я добавил папку "Partials" в app/views и пришлось скорректировать steroids-make.coffee файл в 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 из примера стероидов):

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

Что еще я должен сделать? Есть ли еще один пример использования вложенных видов в стероидах, которые я должен использовать?

Источник

0 ответов

Другие вопросы по тегам