CODEWITHSUNDEEP
javascriptruby-on-railsangularjsangular-ui-routerangularjs-routing
Peter Boomsma
Peter Boomsma

Reputation: 9844

AngularJS, Rails and ui-router not showing template

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.

Upvotes: 1

Views: 987

Answers (2)

Sia
Sia

Reputation: 9221

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

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136194

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

Upvotes: 1

Related Questions