2016-05-31 287 views
0

我有我已經開始了Rails應用程序與角鏈接,在我的js的一切使用下面的代碼工作,直到我把路由/模板角不渲染模板

merchant = angular.module('CupTown', [ 'ngResource' ]) 
#Factory 
merchant.factory 'Merchants', [ 
    '$resource' 
    ($resource) -> 
    $resource '/shopping/merchants.json', {}, 
     query: 
     method: 'GET' 
     isArray: true 
     create: method: 'POST' 
] 
merchant.factory 'Merchant', [ 
    '$resource' 
    ($resource) -> 
    $resource '/shopping/merchants/:id.json', {}, 
     show: method: 'GET' 
     update: 
     method: 'PUT' 
     params: id: '@id' 
     delete: 
     method: 'DELETE' 
     params: id: '@id' 
] 
#Controller 
merchant.controller 'MerchantCtrl', [ 
    '$scope' 
    '$http' 
    '$resource' 
    'Merchants' 
    'Merchant' 
    '$location' 
    ($scope, $http, $resource, Merchants, Merchant, $location) -> 
    $scope.merchants = Merchants.query() 

    $scope.deleteMerchant = (merchantId) -> 
     if confirm('Are you sure you want to delete this merchant?') 
     Merchant.delete { id: merchantId }, -> 
      $scope.merchants = Merchants.query() 
      $location.path '/merchants' 
      return 
     return 

    return 
] 


#Routes 
merchant.config [ 
    '$routeProvider' 
    '$locationProvider' 
    ($routeProvider, $locationProvider) -> 
    $routeProvider.when '/merchants', 
     templateUrl: '/templates/merchants/index.html' 
     controller: 'MerchantCtrl' 
    $routeProvider.otherwise redirectTo: '/merchants' 
    return 
] 

我的模板是當在/公/商家/

<div class='mdl-cell mdl-cell--12-col' ng-controller='MerchantCtrl'> 
    <h3 ng-hide='merchants.length'> 
     No merchants 
    </h3> 
    <ul class='merchant-list-three mdl-list' ng-repeat='merchant in merchants' ng-show='merchants.length'> 
     <a href='#/merchant/{{merchant.permalink}}'> 
      <li class='mdl-list__item mdl-list__item--three-line'> 
     <span class='mdl-list__item-primary-content'> 
      <span>{{merchant.name}}</span> 
     </span> 
     <span class='mdl-list__item-secondary-content'> 
      <i class='material-icons'> 
      chevron_right 
      </i> 
     </span> 
      </li> 
     </a> 
    </ul> 
</div> 

application.html.ham

!!! 
%html{lang: :en, 'ng-app' => 'CupTown'} 
    %head 
    = render 'shared/meta_data' 
    = stylesheet_link_tag 'application' 
    = yield :head 
    /Material Design icon font 
    %link{:href => '//fonts.googleapis.com/icon?family=Material+Icons', :rel => 'stylesheet'}/ 
    = csrf_meta_tags 
    %body{'ng-view' => ''} 
    /Always shows a header, even in smaller screens. 
    .mdl-layout.mdl-js-layout.mdl-layout--fixed-header 
     %header.mdl-layout__header 
     .mdl-layout__header-row 
     /Title 
      .mdl-layout-title= content_for?(:title) ? yield(:title).upcase : t('.site_name') 
      .mdl-layout-spacer 
     /Navigation. We hide it in small screens. 
      %nav.mdl-navigation.mdl-layout--large-screen-only 
      %nav.mdl-navigation 
      - if signed_in? 
       = render 'shared/top_cart' 
     - if signed_in? 
     .mdl-layout__drawer 
     /Display brand logo within drawer header 
      %span.mdl-layout-title 
      = render 'shared/compact_menu' 
     %main.mdl-layout__content 
     .page-content 
      .mdl-grid 
      - flash.each do |key, value| 
       %div{:class => "alert alert-#{key}"}= value 
      = yield 
     = render 'shared/footer' 
    %script{:defer => '', :src => '//code.getmdl.io/1.1.3/material.min.js'} 
    %script{:defer => '', :src => '//js.braintreegateway.com/v2/braintree.js'} 
    = javascript_include_tag 'application' 
+0

瀏覽器控制檯中是否有錯誤? –

+0

錯誤:[$ injector:modulerr]未能實例化模塊CupTown,原因如下: [$ injector:unpr]未知提供者:$ routeProvider –

回答

1

只是傳遞路線在您提供商的依賴應用程式是這樣的:

merchant = angular.module('CupTown', [ 'ngResource', 'ngRoute' ]) 

,您還需要添加扶養你的application.js如果尚未加入。