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' ])
merchant.factory 'Merchants', [
($resource) ->
$resource '/shopping/merchants.json', {},
method: 'GET'
isArray: true
create: method: 'POST'
merchant.factory 'Merchant', [
($resource) ->
$resource '/shopping/merchants/:id.json', {},
show: method: 'GET'
method: 'PUT'
params: id: '@id'
method: 'DELETE'
params: id: '@id'
merchant.controller 'MerchantCtrl', [
($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'


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

my templates are in /public/merchants/

<div class='mdl-cell mdl-cell--12-col' ng-controller='MerchantCtrl'>
<h3 ng-hide='merchants.length'>
No merchants
<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 class='mdl-list__item-secondary-content'>
<i class='material-icons'>


%html{lang: :en, 'ng-app' => 'CupTown'}
= render 'shared/meta_data'
= stylesheet_link_tag 'application'
= yield :head
/ Material Design icon font
%link{:href => '//', :rel => 'stylesheet'}/
= csrf_meta_tags
%body{'ng-view' => ''}
/ Always shows a header, even in smaller screens.
/ Title
.mdl-layout-title= content_for?(:title) ? yield(:title).upcase : t('.site_name')
/ Navigation. We hide it in small screens.
- if signed_in?
= render 'shared/top_cart'
- if signed_in?
/ Display brand logo within drawer header
= render 'shared/compact_menu'
- flash.each do |key, value|
%div{:class => "alert alert-#{key}"}= value
= yield
= render 'shared/footer'
%script{:defer => '', :src => '//'}
%script{:defer => '', :src => '//'}
= javascript_include_tag 'application'

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download