title: Angular routes for a detailed view, using Foundation
body: <h1>Problem</h1>
  
  <p>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 <code>http://localhost:8080/nameofbusiness</code>.</p>
  
  <p>I've been reading the <a href="https://docs.angularjs.org/tutorial/step_07" rel="nofollow">Angular docs</a> and <a href="http://angular.github.io/angular-phonecat/step-7/app/#/phones" rel="nofollow">this example</a> pretty much does exactly what I'm trying to do, I've tried using in a similar snippet (see below) into <code>app.js</code>, but it doesn't seem to be compiling correctly.</p>
  
  <h1>Github: <a href="https://github.com/onlyandrewn/angular" rel="nofollow">https://github.com/onlyandrewn/angular</a></h1>
  
  <h1>Snippet</h1>
  
  <pre><code>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'
        });
    }]);
  </code></pre>
  
  <h1>app.js</h1>
  
  <pre><code>'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);
    }
  </code></pre>
  
  <h2>home.html (Main view of all the businesses)</h2>
  
  <pre><code>---
  name: home
  url: /
  ---
  
  &lt;div ng-controller="MainCtrl"&gt;
      &lt;header&gt;
          &lt;p class="sponsored" id="top"&gt;Sponsored by &lt;/p&gt;
          &lt;img src="http://placehold.it/200x30" class="sponsors" alt=""&gt;
          &lt;h1&gt;Business Directory&lt;/h1&gt;
          &lt;div class="find"&gt;
              &lt;input type="search" placeholder="What are you looking for?" ng-model="query"&gt;
          &lt;/div&gt;&lt;!-- /.find --&gt;
      &lt;/header&gt;
  
      &lt;div class="businesses"&gt;
          &lt;div class="storeIcon"&gt;
              &lt;img src="/assets/img/store.png" class="store" alt=""&gt;
          &lt;/div&gt;&lt;!-- /.storeIcon --&gt;
  
          &lt;p class="number"&gt;Search {{businesses.length}} businesses in Brandon&lt;/p&gt;&lt;button class="filter button"&gt;Filter by &lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;div class="options"&gt;
              &lt;div class="cat"&gt;
                  &lt;div class="categories"&gt;
                      &lt;div class="group"&gt;
                          &lt;p class="name"&gt;Grade Level&lt;/p&gt;
                          &lt;div class="check"&gt;
                              &lt;input type="radio" name=""&gt;&lt;p&gt;Auto&lt;/p&gt;
                              &lt;input type="checkbox" name=""&gt;&lt;p&gt;Restaurant&lt;/p&gt;
                              &lt;input type="checkbox" name=""&gt;&lt;p&gt;Other&lt;/p&gt;
                          &lt;/div&gt;&lt;!-- /.check --&gt;
                      &lt;/div&gt;&lt;!-- /.group --&gt;
  
                      &lt;div class="group"&gt;
                          &lt;p class="name"&gt;School Type&lt;/p&gt;
                          &lt;div class="check"&gt;
                              &lt;input type="checkbox"&gt;
                              &lt;input type="checkbox"&gt;
                              &lt;input type="checkbox"&gt;
                              &lt;input type="checkbox"&gt;
                              &lt;input type="checkbox"&gt;
                          &lt;/div&gt;&lt;!-- /.check --&gt;
                      &lt;/div&gt;&lt;!-- /.group --&gt;
                  &lt;/div&gt;&lt;!-- /.categories --&gt;
              &lt;/div&gt;&lt;!-- /.cat --&gt;
          &lt;/div&gt;&lt;!-- /.options --&gt;
      &lt;/div&gt;&lt;!-- /.businesses --&gt;
  
  
  
      &lt;div class="all"&gt;
          &lt;div class="business large-4.columns" data-ng-repeat="business in businesses | filter:query | orderBy:'name'" &gt;
              &lt;div class="overlay"&gt;
                  &lt;a href=""&gt;&lt;img src="http://placehold.it/300x300" class="storefront" alt=""&gt;&lt;/a&gt;
              &lt;/div&gt;&lt;!-- /.overlay --&gt;
              &lt;div class="info"&gt;
                  &lt;a href=""&gt;&lt;p class="name"&gt;{{business.name}}&lt;/p&gt;&lt;/a&gt;
                  &lt;p class="description"&gt;{{business.description}}&lt;/p&gt;
                  &lt;p class="address"&gt;{{business.address}}&lt;/p&gt;
                  &lt;a href="" class="website"&gt;{{business.website}}&lt;/a&gt;
              &lt;/div&gt;&lt;!-- /.info --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;footer&gt;
      &lt;hr&gt;
          &lt;i class="fa fa-twitter"&gt;&lt;/i&gt;
          &lt;i class="fa fa-facebook"&gt;&lt;/i&gt;
  
      &lt;div class="backContainer"&gt;
          &lt;a href="#top"&gt;&lt;p class="back"&gt;Back to top&lt;/p&gt;&lt;/a&gt;
      &lt;/div&gt;&lt;!-- /.backContainer --&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>expanded.html (Detailed view of just one of the businesses)</h2>
  
  <pre><code>---
  name: expand
  url: /:id
  ---
  
  &lt;div ng-controller="MainCtrl"&gt;
      &lt;p&gt;This is the expanded view for each of the businesses&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>