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.