0

I'm learning Angular by rewriting a JS web application in Angular, and I'm having some struggles with replacing ngRoute with ui-router. Although I realise that it is designed to build SPAs, I'm only rewriting a branch of pages in angular.

My current understanding is that ui-routing requires you to define the root route '/'. Mine looks something like:

var memberPage = angular.module('memberPage', ['ui.router']);

memberPage.config(['$stateProvider', function($stateProvider){

        $stateProvider
            .state('userpage', {
                    url: '/',
                    template: '<h1>test</h1>',
                    controller: 'dashBoardController'
            })
}]);

The problem - I think - is that the user never hits this route. The user logs in and is being redirected to /users/:id, and the page that is being rendered with this route loads the angular app.

The (sinatra) routing that happens on the server side before the angular app gets loaded:

get '/' do
 redirect "/login"
end

get '/login' do
  redirect_to_userpage_if_logged_in
  erb :login
end

post '/login' do
  redirect '/login' unless user_exists(params)
  if correct_password(params)
    set_session
    redirect "/users/#{session[:user_id]}"
  else
    redirect '/login'
  end
end

get '/users/:user_id' do |id|
        @user = User.find(id)
        erb :'users/index'  # from this point I want to run my angular app
end

I was looking for a way to tell the ui-router that it should regard that route as the applications root route, by doing url: '/users/:id', but that doesn't work.

Is there way to achieve what I'm looking for?

Thanks in advance

EDIT:

My god, I forgot to put the basic ng-app='myapp' directive somewhere in my html, which explains why my initial state never became active. Having changed that, my initial configuration works perfectly fine.

I'm not sure whether to delete this question or to keep it here for educational purposes.

2
  • I am missing some data, when you say "The user logs in and being redirected", can you provide the code that redirects after login? If you mean the user gets redirected before performing any action, please add the routes on server side. Commented Mar 1, 2015 at 7:40
  • can you try adding the line $urlRouterProvider.otherwise("/"); to your router config. Adding the service appropriately. Commented Mar 1, 2015 at 8:43

1 Answer 1

1

The defined routes are viable after the #. So the route defined as / will be accessible on /users/:id#/ or /users#/ or even /#/.

Sign up to request clarification or add additional context in comments.

1 Comment

Picked this as correct answer because it made me realise what the role of # is in angular routing

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.