Угловые маршруты для детального просмотра, используя фундамент

Question

проблема

Новичок в Angular, и я использую "Foundation for Apps: для создания бизнес-каталога в Angular. Я ищу создание маршрутов для подробного представления для каждого из предприятий, которое выглядело бы как http://localhost:8080/nameofbusiness,

Я читал документы Angular, и этот пример в значительной степени делает то, что я пытаюсь сделать, я пытался использовать в похожем фрагменте (см. Ниже) в app.js, но, похоже, он не компилируется правильно.

Github: https://github.com/onlyandrewn/angular

отрывок

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

app.js

'use strict';

  var myApp = angular.module('application', [
    'ui.router',
    'ngAnimate',

    //foundation
    'foundation',
    'foundation.dynamicRouting',
    'foundation.dynamicRouting.animations'
  ])
    .config(config)
    .run(run)
  ;

  config.$inject = ['$urlRouterProvider', '$locationProvider'];

  function config($urlProvider, $locationProvider) {
    $urlProvider.otherwise('/');

    $locationProvider.html5Mode({
      enabled:false,
      requireBase: false
    });

    $locationProvider.hashPrefix('!');
  }

  function run() {
    FastClick.attach(document.body);
  }

home.html (основной вид всех предприятий)

---
name: home
url: /
---

<div ng-controller="MainCtrl">
    <header>
        <p class="sponsored" id="top">Sponsored by </p>
        <img src="http://placehold.it/200x30" class="sponsors" alt="">
        <h1>Business Directory</h1>
        <div class="find">
            <input type="search" placeholder="What are you looking for?" ng-model="query">
        </div><!-- /.find -->
    </header>

    <div class="businesses">
        <div class="storeIcon">
            <img src="/assets/img/store.png" class="store" alt="">
        </div><!-- /.storeIcon -->

        <p class="number">Search {{businesses.length}} businesses in Brandon</p><button class="filter button">Filter by <i class="fa fa-chevron-down"></i></button>
        <div class="options">
            <div class="cat">
                <div class="categories">
                    <div class="group">
                        <p class="name">Grade Level</p>
                        <div class="check">
                            <input type="radio" name=""><p>Auto</p>
                            <input type="checkbox" name=""><p>Restaurant</p>
                            <input type="checkbox" name=""><p>Other</p>
                        </div><!-- /.check -->
                    </div><!-- /.group -->

                    <div class="group">
                        <p class="name">School Type</p>
                        <div class="check">
                            <input type="checkbox">
                            <input type="checkbox">
                            <input type="checkbox">
                            <input type="checkbox">
                            <input type="checkbox">
                        </div><!-- /.check -->
                    </div><!-- /.group -->
                </div><!-- /.categories -->
            </div><!-- /.cat -->
        </div><!-- /.options -->
    </div><!-- /.businesses -->



    <div class="all">
        <div class="business large-4.columns" data-ng-repeat="business in businesses | filter:query | orderBy:'name'" >
            <div class="overlay">
                <a href=""><img src="http://placehold.it/300x300" class="storefront" alt=""></a>
            </div><!-- /.overlay -->
            <div class="info">
                <a href=""><p class="name">{{business.name}}</p></a>
                <p class="description">{{business.description}}</p>
                <p class="address">{{business.address}}</p>
                <a href="" class="website">{{business.website}}</a>
            </div><!-- /.info -->
        </div>
    </div>

    <footer>
    <hr>
        <i class="fa fa-twitter"></i>
        <i class="fa fa-facebook"></i>

    <div class="backContainer">
        <a href="#top"><p class="back">Back to top</p></a>
    </div><!-- /.backContainer -->
    </footer>
</div>

extended.html (подробный вид только одного из предприятий)

---
name: expand
url: /:id
---

<div ng-controller="MainCtrl">
    <p>This is the expanded view for each of the businesses</p>
</div>

Answer 1

Вам нужно будет определить родительское представление для вашего расширенного шаблона, используя упрощенный встроенный плагин, тогда фундамент для приложений будет использовать его для генерации правильной конфигурации $ routeProvider. Вы также можете использовать этот же плагин для определения контроллера оболочки для него.

Ваш файл extended.html может выглядеть так:

---
name: expand
url: /:id
parent: home
controller: EditCtrl
---
<p>This is the expanded view for each of the businesses</p>
<pre> {{$stateParams}}</pre>

сейчас если /#!/home это ссылка на то, что вы решили стать родительской страницей или страницей со списком продуктов, тогда /#!/home/nameofbusiness переместит вас на свою дочернюю страницу "развернуто" и установит значение id для $ stateParams в "nameofbusiness" $stateParams -> {"id":"nameofbusiness"} который будет доступен непосредственно в вашем расширенном шаблоне или в связанном с ним контроллере, если вам нужно построить некоторую логику поверх него.

Более подробную информацию вы найдете в документации по динамической маршрутизации Foundation для приложений.