Angular routes for a detailed view, using Foundation

Question

Problem

New to Angular and I'm using "Foundation for Apps: to help with building a business directory in Angular. I'm looking to create routes for a detailed view for each of the businesses, which would look like http://localhost:8080/nameofbusiness.

I've been reading the Angular docs and this example pretty much does exactly what I'm trying to do, I've tried using in a similar snippet (see below) into app.js, but it doesn't seem to be compiling correctly.

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

Snippet

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 (Main view of all the businesses)

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

expanded.html (Detailed view of just one of the businesses)

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

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

Answer 1

You will need to define a parent view for your expanded template using the simplified built in plugin, then foundation for apps will use that to generate the proper $routeProvider's configuration. You can also use that same plugin to define a wrapper controller for it.

Your expanded.html file may look like this :

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

now if /#!/home is the url to what you decided to be a parent page or product listing page, then /#!/home/nameofbusiness will take you to it's child page "expanded", and it will set the id value of $stateParams to "nameofbusiness" $stateParams -> {"id":"nameofbusiness"} which will be accessible directly in your expand template or within it's related controller if you need to build some logic on top of it.

You will find more details in Foundation for apps Dynamic Routing documentation