0

I'm trying to use Angular and ui router in my rails app and I think I'm almost there. It all works and angular displays my partial in the correct place but I can't seem to navigate away from the angular page. When I click a link the links address appears correctly in the navigation bar but the browser doesn't navigate to the new page and I see no activity in my rails console. However if I then click reload on my browsers address bar the correct page loads. I have turbolinks disabled.

my HTML

%h1 Angular Page
%a{"href" => "/"} non angular home page
%br
.angular-view(ui-view)
%script#template{"type"=>"text/ng-template"}=render 'template'

my Angular routing

@myApp.config ($httpProvider, $stateProvider, $urlRouterProvider,$locationProvider) ->
  $locationProvider.html5Mode(true)
  $stateProvider
    .state('state1', {
      url: "/clubs/:Club_id/training",
      templateUrl: "template"
     })

I wanted to use ui router to handle all the different 'routes' within the angular page but I wanted to leave the rest of my routing to rails for now. Is this possible?

I found the solution thanks to Sergeys' comment below. The answer is that angular intercepts clicks in order to manipulate the URL. I inserted

myApp.run(($location, $rootElement) ->
  $rootElement.off('click')
)

as suggested in this answer which fixed it for me.

Community
  • 1
  • 1
RoyTheBoy
  • 648
  • 1
  • 6
  • 15

0 Answers0