角度路线，使用“基础”获得详细视图

Question

>问题

刚接触 Angular，我正在使用"应用程序基础：帮助在 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'
      });
  }]);

应用.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);
  }

首页.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>

展开.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配置。您还可以使用相同的插件为其定义包装器控制器。

展开.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是您决定作为父页面或产品列表页面的 URL，那么/#!/home/nameofbusiness将带您进入其子页面"展开"，并将 $stateParams 的 id 值设置为"NameofBusiness"$stateParams -> {"id":"nameofbusiness"}如果您需要在其上构建一些逻辑，可以直接在您的扩展模板或其相关控制器中访问该值。

有关更多详细信息，请参阅应用基础动态路由文档