路由提供商混淆

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）也很有幫助。