AngularJS, Rails and ui-router not showing template

Question

I'm trying to do this tutorial and I'm on the part of Angular Routing. And they're using angular-ui-router instead of ng-route. So I found a AngularUI router on github which gives a bit more info in using it. But I'm not getting the desired result.

I've added the route-ui through bower using bower install angular-ui-router in the rootfolder of my project which created all needed files etc.

I've added the needed files in my application.js

//= require jquery
//= require jquery_ujs

//= require angular
//= require angular-ui-router
//= require angular-animate
//= require angular-rails-templates

//= require angular-app/app
//= require_tree ./angular-app/templates
//= require_tree ./angular-app/modules
//= require_tree ./angular-app/filters
//= require_tree ./angular-app/directives
//= require_tree ./angular-app/models
//= require_tree ./angular-app/services
//= require_tree ./angular-app/controllers

When I check the <head> I can see that the angular and router files are being loaded. Also my Angular functions are working.

In my angular-app folder I have a modules folder which has a searchModule.coffee.js file with the following content,

@app = angular.module('app.movieseat', [ 'ui.router' ]).config([

  '$urlRouterProvider', ($urlRouterProvider) ->
    $urlRouterProvider.otherwise '/state1'
    # Now set up the states

  '$stateProvider', ($stateProvider) ->
    $stateProvider.state('state1',
      url: '/state1'
      templateUrl: '../templates/state1.html').state('state1.list',
      url: '/list'
      templateUrl: '../templates/state1.list.html'
      controller: ($scope) ->
        $scope.items = [
          'A'
          'List'
          'Of'
          'Items'
        ]
        return
    )
])

The templates folder is also inside the angular-app folder.

My body looks like this,

%body{"ng-app" => "app.movieseat"}

  %div{"ui-view" => ""}
  %a{"ui-sref" => "state1"} State 1
  %a{"ui-sref" => "state2"} State 2

So I should include the state1.html in the ui-view but nothing is happening.

I am including the correct files, but the ui-view isn't doing anything. I'm also not getting a error in my console.

Pankaj Parkar · Accepted Answer · 2015-08-10 19:15:32Z

1

You had made an mistake while defining config block,

Add both the dependency in function one go.

Code

@app = angular.module('app.movieseat', [ 'ui.router' ]).config([

  '$urlRouterProvider', '$stateProvider', ($urlRouterProvider, $stateProvider) ->
    $urlRouterProvider.otherwise '/state1'
    # Now set up the states

  //'$stateProvider', ($stateProvider) ->//basiacally you don't need this line
    $stateProvider.state('state1',
      url: '/state1'
      templateUrl: '../templates/state1.html').state('state1.list',
      url: '/list'
      templateUrl: '../templates/state1.list.html'
      controller: ($scope) ->
        $scope.items = [
          'A'
          'List'
          'Of'
          'Items'
        ]
        return
    )
])

answered Aug 10, 2015 at 19:15

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pankaj Parkar Over a year ago

@PeterBoomsma does it helped?

Community · Accepted Answer · 2017-05-23 12:01:05Z

0

it seems that the angular-ui-router is incompatible with the new Rails sprockets. To fix this, add this earlier version of sprockets to your gemfile:

gem 'sprockets', '2.12.3'

And then run bundle update sprockets.

This was answered a few times in other similar questions, like the one below: Angular Rails Templates just not working

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Aug 23, 2015 at 16:14

Sia

9,2416 gold badges33 silver badges52 bronze badges

Collectives™ on Stack Overflow

AngularJS, Rails and ui-router not showing template

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related