Javascript 角度路线的详细视图，使用基金会 问题

Angular新手，我正在使用“应用程序基础：帮助在Angular中构建业务目录。我正在为每个业务创建详细视图的路线，看起来像

http://localhost:8080/nameofbusiness

我一直在阅读，并且几乎完全做了我想做的事情，我尝试在

app.js

中使用类似的代码片段（见下文），但它似乎没有正确编译

github： 一小条 app.js home.html（所有业务的主视图）

---
姓名:home
网址：/
---
赞助商
商业目录
在Brandon中搜索{{business.length}}个企业
等级级别
自动的

餐厅

其他

学校类型
{{business.description}
{{business.address}

expanded.html（仅一项业务的详细视图）

---
名称：展开
url:/：id
---
这是每个业务的扩展视图

< /代码> 您需要使用简化的内置插件定义扩展模板的父视图，然后应用程序的基础将使用它来生成适当的$Routh提供商的配置。您也可以使用同一个插件来定义它的包装控制器。
扩展的.html文件可能如下所示：

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

---
名称：展开
url:/：id
家长：家
控制器：EditCtrl
---
这是每个业务的扩展视图

{{$stateParams}}

现在，如果
/#！/home
是您决定作为父页面或产品列表页面的url，那么
/#！/home/nameofbusiness
将把您带到它的子页面“展开”，并将$stateparms的id值设置为“nameofbusiness”
$stateparms->{“id”：“nameofbusiness”}
如果需要在扩展模板上构建一些逻辑，可以直接在扩展模板或相关控制器中访问

您将在中找到更多详细信息

'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);
  }

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

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

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

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