路由提供商混淆

Question

Angular JS的新手，但这不应该真的引起我任何问题，但它是。

好了，我的设置是这样的：

应用程序/ storelocator.html 应用程序/ stores.html

从storelocator.html

所以我想导航到个人商店页面，使用此格式：

<div ng-controller="StoreController as store" class="row" ngcloak> 
     <form method='get' id='searchForm' ng-controller="StoreController as storeCtrl" ng-submit="store.submit()"> 
      <label for="postcode" class="controls__label">Postcode</label> 
      <input type="text" name="postcode" placeholder="Search..." ng-model="store.postcode"> 
      <input type="submit" value="Search"> 
     </form> 

     <br /> 

     <section class="cards"> 
      <header ng-show="store.postcode"> 
       <h2>You searched for {{store.postcode}}</h2> 
      </header> 
      <article ng-repeat="store in store.stores" class="card"> 
       <address> 
        <h3 ng-if="store.outlet" class="title">{{store.outlet}}</h3> 
        <p ng-if="store.phone" class="tel">t. {{store.phone}}</p> 
        <p class="address1"><span ng-if="store.addressOne">{{store.addressOne}}, <br /></span> 
         <span ng-if="store.addressTwo">{{store.addressTwo}}, <br /> </span> 
         <span ng-if="store.addressThree">{{store.addressThree}}, <br /></span> 
         <span ng-if="store.town">{{store.town}}, <br /></span> 
         <span ng-if="store.county">{{store.county}}, <br /></span> 
         <span ng-if="store.postCode">{{store.postCode}}</span> 
         <span ng-if="store.distance">{{store.distance}}</span> 
        </p> 
        <a class="btn btn--primary" href="/app/stores/{{store.outlet}}">View Store</a> 

       </address> 
      </article> 
     </section> 
    </div> 

和我的控制器：

'use strict'; 


angular.module('store',["ngRoute"]) 
    .config(["$routeProvider", function ($routeProvider) { 
     $routeProvider 
      .when('/', 
     { 
      templateURL: "index.html", 
      controller: "StoreController", 
      controllerAs: "app" 
     }) 
     .when('/stores', { 
      template: "store page" 
     }) 
     .otherwise({ 
      template: "This doesn't exist" 
     }) 
}]) 

.controller('StoreController', ['$http',function($http){ 
    var store = this; 
    store.stores = []; 
    $http.get('my/json/file').success(function(data){ 
     store.stores = data; 
    }); 
    store.submit = function() { 

     $http.get('my/json/file' + store.postcode).success(function(data){ 
      store.stores = data; 
     }); 


    }; 
}]); 

我在做什么错了？只是似乎无法工作这一个。

Answer 1

代码中的错误太多了。我将精确定位两件主要事情：您甚至没有定义店铺详情的路线，并且您未打开HTML5路由模式，因此，如果没有“＃”，您的链接将无法正常工作。你最好踢这样开始的一些工作示例：https://docs.angularjs.org/api/ngRoute/service/$route#example

而且接下来的时间，请告诉我们究竟什么是错的和什么是你想完成。错误日志和在线工作代码示例（例如Plunker或JSBin）也很有帮助。