1

问题

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

我一直在阅读Angular 文档，这个示例几乎完全符合我的要求，我尝试在类似的片段（见下文）中使用 into 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);
  }

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>

expand.html（仅其中一项业务的详细视图）

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

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

1 回答 1

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"}，可以直接访问如果您需要在其上构建一些逻辑，请在您的扩展模板或其相关控制器中。

您将在Foundation for apps 动态路由文档中找到更多详细信息

于 2015-06-25T23:23:34.707 回答