I am Working On AngularJs, If I Type On Browser like
http://localhost/vistorsday it went to,
http://localhost/vistorsday/vapp/home.
I Want To Change My URL to http//localhost/vistorsday/home or http//localhost/visitorsday.
Here is my code below
.state('vapp', {
abstract: true,
url: '/vapp',
templateUrl: 'tpl/vtapp.html',
controller: "headerCtrl"}
)
.state('vapp.home', {
url: '/home',
templateUrl: 'tpl/home.html',
controller: "homeCtrl"}
) // JavaScript Document
Please help me out with this Situation.
Just change the URL of the vapp, so that it points to '/' instead of '/vapp' (unless you have any specific reason to keep it as '/vapp').
.state('vapp', {
abstract: true,
url: '/',
templateUrl: 'tpl/vtapp.html',
controller: "headerCtrl"}
)
Hope this helps.
Related
I m new to angularjs and ui-router...I m facing hard time in solving issue
I have ui router configured.It works well upto two nested states but when i add new nested state ,it stop working.i cant figure out the reason,can some one point me what i miss??
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('settings', {
url: '/settings',
templateUrl: 'public1/settings.html'
})
.state('settings.profile', {
url: '/profile',
templateUrl: 'public1/profile.html',
controller: 'ProfileController'
})
.state('settings.account', {
url: '/account',
templateUrl: 'public1/account.html',
controller: 'AccountController'
});
.state('settings.login', {
url: '/login',
templateUrl: 'public1/login.html'
});
$urlRouterProvider.otherwise('/public1/profile');});
The end of your settings.account 'state', you have a semi-colon before the .state('settings.login ...
That's what's causing your error, I suspect.
Remove ";" from account state
.state('settings.account', {
url: '/account',
templateUrl: 'public1/account.html',
controller: 'AccountController'
})
.state('settings.login', {
url: '/login',
templateUrl: 'public1/login.html'
});
The issue I'm having is that for some reason when navigating to the users home aside from it not loading and causing my browser to freeze when I inspect the console. (I take out the abstract: true from app.user) in the console it shows the 's of my of app.user.base nested inside each other with the top being the mainview and the footer getting loading inside of it. What Am i doing wrong?
.state('app', {
abstract: true,
url: '',
template: '<ui-view/>'
})
.state('app.user', {
abstract: true,
url: '/user',
templateURL: 'app/user/user.html'
})
.state('app.user.base, {
url: '',
views: {
mainView: {
template: '<ui-view/>'
}
footer: {
templateUrl: 'app/user/views/footer.html',
controller: 'footerCtrl'
}
}
})
.state('app.user.base.home', {
url: '/home',
templateURL: 'app/user/views/home.html',
controller: 'uHomeCtrl'
})
.state('app.user.base.profile', {
url: '/profile',
templateURL: 'app/user/views/profile.html',
controller: 'uProfileCtrl'
})
.state('app.main, {
abstract: true,
url: '',
templateURL: 'app/main/main.html'
})
.state('app.main.home, {
url: '/home',
views: {
landing: {
templateUrl: 'app/main/views/landing.html',
controller: 'landingCtrl'
},
about: {
templateUrl: 'app/main/views/about.html',
controller: 'aboutCtrl'
}
}
})
not sure if you can have it the same url's '/home' in few places, please read this article about nested states I may help to fix you issue.
You need to make sure to remove url property from all the states you have that are not navigable. Do that first, then see what new errors you get. URLs are not at all required to be able to navigate to a state.
in my app.js folder I have a
$stateProvider
.state('state1', {
url: '/',
templateUrl: 'app/list.html',
controller: 'Ctrl1',
})
.state('state2', {
url: '/details',
templateUrl: 'app/details.html',
controller: 'Ctrl2'
})
.state('state3', {
url: '/list',
templateUrl: 'app/list.html',
controller: 'Ctrl3'
});
At the moment I am calling all of these altogether in index.html using
Is there a way to specify which controller you want displayed in each part of the page. As I'm calling it now it seems that it simply calls everything where it is called in the index.html page which makes it quite hard to organise.
I started building ionic app, and I want to change the views, I am not using tag, I have separate file for every view.
The states look like this:
var route = angular.module('route', []);
route.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
abstract: true,
templateUrl: 'home.html',
})
.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('register', {
url: '/register',
templateUrl: 'register.html'
})
.state('manage-booking', {
url: '/manage-booking',
templateUrl: 'manage_booking.html'
})
.state('clinic-list', {
url: '/clinic-list',
templateUrl: 'clinic_list.html'
})
$urlRouterProvider.otherwise('/home');
});
When I run the app, the url defaults to '/#/home'
I am not able to figure out why is it not loading the home page. When I change the otherwise to point to '/#/login', everything works.
Remove the abstract: true property (source)
I have states in 2 languages, like this:
$stateProvider
.state('contacts', {
url: "/contacts",
templateUrl: 'contacts.html'
});
$stateProvider
.state('contacts.edit', {
url: "/edit",
templateUrl: 'contacts.html'
})
$stateProvider
.state('contatos', {
url: "/contatos",
templateUrl: 'contacts.html'
})
$stateProvider
.state('contatos.editar', {
url: "/editar",
templateUrl: 'contacts.html'
})
Right now I'm looping an array to push all my states.
Is there another way to do that?
Sure. Your state name isn't used for what the user does, so that doesn't need to be translated. Only the URL does. Unfortunately ui-router doesn't yet support having multiple URLs in a single state, but somebody has a solution using urlMatcherFactory decoration here:
https://github.com/angular-ui/ui-router/issues/185#issuecomment-48124930