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.
$urlRouterProvider.otherwise("/");to your router config. Adding the service appropriately.