CODEWITHSUNDEEP
javascriptruby-on-railsangularjsangular-ui-router
Kelvin
Kelvin

Reputation: 2288

AngularJS, Rails and ui-router not showing template after switch from ngRoute

Hi I am trying to switch over from ngRoute to ui-Router but after I made the switch, the templates are not loading anymore.

I added ui-Router in my application.html.erb:

<%= javascript_include_tag 'application' %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>

This is the code in my app.js

var app = angular.module("alliance",['ui.router', 'ui.bootstrap']);

app.config(['$stateProvider','$urlRouterProvider',function($stateProvider, 

$urlRouterProvider) {

  $stateProvider
    .state('dashboard', {
      url:'/',
      templateUrl: "<%= asset_path('pages/dashboard.html') %>",
      controller:   "DashboardController"
    });

  $urlRouterProvider.otherwise("dashboard");
}]);

Original ngRoute code that was working.

var app = angular.module("alliance",['ngRoute', 'ui.bootstrap']);

app.config(['$routeProvider',function($routeProvider) {
   $routeProvider
     .when('/', {
       templateUrl:  "<%= asset_path('pages/dashboard.html') %>",
       controller:   "DashboardController"
     })

It is now showing the default rails view.

I checked that the ui router script is loaded. Does order matter?

I have also played about with the state name, url but that didn't seem to be it.

Any help is appreciated. Thanks a lot in advance.

EDIT:

I changed the load order from application.js

//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-ui-router
//= require angular-ui-bootstrap-tpls
//= require_tree .

and I changed the url in the config to /dashboard but it's still giving me the default rails view.

Upvotes: 1

Views: 155

Answers (1)

Leandro Zubrezki
Leandro Zubrezki

Reputation: 1150

Order matters, you need to load ui-router after angular and before your app.

Also the $urlRouterProvider.otherwise("dashboard"); is wrong, your state is called dashboard but the url is /. You need to define the url of dashboard as /dashboard and then $urlRouterProvider.otherwise("/dashboard");

Upvotes: 1

Related Questions