Question

我有一个rails应用程序，我已开始使用angular进行链接，在我的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
]

我的模板位于/ public / merchants /

<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'

Answer 1

只需在您的app中传递路由提供程序依赖项，如下所示：

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

如果尚未添加，还需要在application.js中添加依赖项。

角度不渲染模板

1 个答案: