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.

score 1 · Accepted Answer · answered Aug 10 '15 at 19:15

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
    )
])

@PeterBoomsma does it helped? – Pankaj Parkar Aug 14 '15 at 05:53 — Pankaj Parkar, Aug 14 '15 at 05:53

score 0 · Answer 2 · edited May 23 '17 at 12:01

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 '17 at 12:01

Community

1
1

answered Aug 23 '15 at 16:14

Sia

8,894
5
31
50

AngularJS, Rails and ui-router not showing template

2 Answers2