AngularJS Question

angular not rendering templates

i have a rails app that i have started to link in with angular, when using the following code in my js everything working until i put in the routes/templates

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
]


my templates are in /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

just pass route provider dependency in you app like this:

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

and you also need to add the dependancy in you application.js if not already added.

Comments