This might not even be possible, but I'm going to try anyway. In my website I have a couple of states defined with ui-router. One of these states should link to another domain. Is this possible?
$stateProvider
.state('index', {
url: "/index",
templateUrl: "views/home.html",
controller: "MainController",
ncyBreadcrumb: {
label: 'Home'
}
})
.state('about', {
url: "/about",
templateUrl: "views/about.html",
controller: "AboutController",
ncyBreadcrumb: {
label: 'About',
parent: 'index'
}
})
.state('Us', {
url: "/us",
parent: "about",
views : {
'#': {
templateUrl: 'views/us.html',
},
}
})
.when('contact', 'http://www.example.com')
UI router is handling internal application URL's. anyway you can achieve using script redirection.
$stateProvider.state('contact', {
url: '/',
template: 'Redirecting...<script>window.location="http://www.example.com"</script>'
});
Related
My website has 2 main routes:
/home
/:something
Any request to / should go to /home and this is done by using 'otherwise', anything else that does not match home AND is not empty should go to app.lista. The thing is, app.lista matches / because is like :slug is empty, so otherwise is not being called:
$stateProvider
.state('app', {
url: '/',
abstract: true,
templateUrl: '/_/common/templates/main.html',
controller: 'main'
})
.state('app.home', {
url: 'home',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/home.html',
controller: 'home'
}
}
})
.state('app.lista', {
url: ':slug',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
$urlRouterProvider.otherwise('/home');
How can I tell the stateProvider to not match app.lista if :slug is empty?
Looks like same issue which is logged Here on github and solution seems to be the use ragular expression
I think changing your slug route to
.state('app.lista', {
url: '/{slag:[^\/]+}',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
Should solve your problem plunker
Make your app route non-abstract and change the template and controller to point to that of app.home. Since it is defined before app.list, '/' will match app route instead.
$stateProvider
.state('app', {
url: '/',
templateUrl: '/_/common/templates/home.html',
controller: 'home'
})
.state('app.home', {
url: 'home',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/home.html',
controller: 'home'
}
}
})
.state('app.lista', {
url: ':slug',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
$urlRouterProvider.otherwise('/home');
Use UI Routers resolve to check if route params are missing.
//Example of a single route
.state('app.lista', {
url: '/:slug',
templateUrl: '----.html',
controller: 'list',
resolve: function($stateParams, $location){
//Check if url parameter is missing.
if ($stateParams.slug=== undefined) {
//Do something such as navigating to a different page.
$location.path('/somewhere/else');
}
}
})
It doesn't work with the last one where there are three states. How do I make it work?
There is no error. The page itself doesn't load (It`s like I press link and nothing changes (except url in browser address line) )
.state('parent', {
url: '/home',
abstract: true,
template: '<ui-view/>'
})
.state('parent.index', {
url: '/index',
template: '<h1>test1</h1>'
})
.state('parent.contact', {
url: '/contact',
template: '<h1>test2</h1>'
})
.state('parent.contact.test', {
url: '/test',
template: '<h1>test3</h1>'
})
Try for this,
To be short, contact states are children of parentstate, so they can't have access of Test view, because it's related to test state.
So you need to write :
.state('parent.contact.test', {
url: "/test",
views: {
'Test#test' :{
templateUrl: "test.html"
}
}
})
I want use nested views in AngularJS 1.6, with UI-router.
I have 3 states, the first is an abstract view named settings, and the second and the third are two views.
.state('settings', {
url: '/settings',
abstract: true,
template: '<ui-view />'
})
.state('settings.account', {
url: '/account',
templateUrl: './partials/settings/account.html',
resolve: {
loginRequired: loginRequired
}
})
.state('settings.password', {
url: '/password',
templateUrl: './partials/settings/password.html',
resolve: {
loginRequired: loginRequired
}
})
The problem is that nothing appears when I go to settings/account or settings/password...
I am trying to develop an app using Angular 1.4.(Refer below image). I need suggestions on below
What is the best way to develop home Page in this. Should I use <ui-view>(UI routing) to creates the 8 states or should I use 8 different custom directives to tabs(tab1, tab2, tab3, etc...)
Can my application has both routeprovider and stateprovider together in config file.(Another post from Stackoverflow)
--------------------------------------------------------------------------->
My view/idea for developing this---->
will be using ng-view to load the pages(home, nav2, nav3, etc)
will be using ui-view to load the tabs/panel inside home page(tab1, tab2, tab3, etc)
Using Both ng-view and ui-view does not show any results in the file. i.e, App crashes.. So I have moved to ui-view to display all the states.
Below is the code which works fine.
Tutorial
.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state("home", {
url:"/home",
views:{
"":{
templateUrl: "views/home.html"
},
"profile#home":{
templateUrl: "views/home/profile.html"
},
"companyAnnouncement#home":{
templateUrl: "views/home/company-announcement.html"
},
"leaveBalance#home":{
templateUrl: "views/home/leave-balance.html"
},
"leaveDetails#home":{
templateUrl: "views/home/leave-details.html"
},
"attendenceDetails#home":{
templateUrl: "views/home/attendence-details.html"
},
"holidayList#home":{
templateUrl: "views/home/holiday-list.html"
},
"queryStatus#home":{
templateUrl: "views/home/query-status.html"
},
"payrolQueryStatus#home":{
templateUrl: "views/home/payrol-query-status.html"
}
}//views ends here
})
.state("login", {
url: "/login",
templateUrl: "views/login.html"
})
.state("selfService", {
url:"/self-service",
views:{
"":{
templateUrl: "views/self-service.html"
}
}
})
.state("edirectory", {
url: "/edirectory",
templateUrl: "views/edirectory.html",
controller: 'edirectoryController',
controllerAs: 'edirectoryCtrl',
resolve: {
employeeList: function (edirectoryService) {
return edirectoryService.getAllEmployees();
}
}
})
.state("myLeave", {
url: "/my-leave",
templateUrl: "views/my-leave.html"
})
.state("attendence", {
url: "/attendence",
templateUrl: "views/attendence.html"
})
.state("compOffRequest", {
url: "/comp-off-request",
templateUrl: "views/comp-off-request.html"
})
.state("raiseQuery", {
url: "/raise-query",
templateUrl: "views/raise-query.html"
})
.state("eacademy", {
url: "/eacademy",
templateUrl: "views/eacademy.html"
})
.state("downloads", {
url: "/downloads",
templateUrl: "views/downloads.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.