I have the following state defined in my app module.
$stateProvider
.state('app', {
abstract: true,
url: '/',
views: {
'header': {
templateUrl: 'header.tpl.html'
},
'content': {
template: 'Content goes here'
},
'footer': {
templateUrl: 'footer.tpl.html'
}
}
});
But, I want to put header and footer in separate angular modules and load them as module dependency. Like - app.header & app.footer
Since, I can not redeclare a state. And, two states with same url doesn't work. So, is there any way I can achieve this?
Probably this is a bit old, but I guess answering might be useful as a future ref.
Have a look at this issue on ui-router GitHub, it seems to me that it could help.
The gist of the thing is represented by the following 2 code blocks:
// File1.js
angular.module('myApp').config(function($stateProvider) {
$stateProvider
.state("toplevelfeature", {
url: '/topleavelFeature'...
})
.state("toplevelfeature2", {
url: '/topleavelFeature2'...
})
.state("toplevelfeature.midfeature", {
url: '/midFeature'...
})
.state("toplevelfeature.midfeature2", {
url: '/midFeature2...'
})
.state("toplevelfeature.midfeature.anothernestedfeature", {
url: '/anothernestedfeature...'
})
});
// File2.js
angular.module('myApp').config(function($stateProvider) {
$stateProvider
.state("toplevelfeature.midfeature.anothernestedfeature.home", {...
})
.state("toplevelfeature.midfeature.anothernestedfeature.detail", {...
})
.state("toplevelfeature.midfeature.anothernestedfeature.other", {...
})
});
Related
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 have states
.state('main', {
url: '/',
template: '<div ui-view=""></div>'
})
.state('main.header', {
url: 'header',
templateUrl: 'modules/core/views/header.html'
})
.state('main.header.sidemenu', {
url: '/sidemenu',
templateUrl: 'modules/admin/views/adminsidemenu.html'
})
.state('main.header.sidemenu.businesslist', {
url: '^/business/businesslist',
templateUrl:'modules/business/views/business.list.view.html',
})
.state('main.header.sidemenu.tabs', {
url: '',
templateUrl:'modules/business/views/tabs.business.view.html',
})
.state('main.header.sidemenu.tabs.profile', {
url: '^/business/profile',
templateUrl:'modules/business/views/tabs.business.view.html',
})
My html code in state->main.header.sidemenu.tabs.profile-> template
<li>
<a href="javascript:void(0)"
ui-sref="main.header.sidemenu.businesslist">XXXXX</a>
</li>
Then it throwing error Could not resolve 'branchUrl' from state ->main.header.sidemenu.tabs when I click anchor
How to solve this issue.
Can you please help me to this?
This error occurs when you have not defined the branchUrl state. Please check inside your state configuration and make sure branchUrl should be there.
This kind of error usually means, that some part of (js) code was not loaded. That the state which is inside of ui-sref is missing . You don't need to specify the parent, states work in an document oriented way so, instead of specifying parent: main, you could just change the state to main.header
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/main.html");
$stateProvider.state('app', {
abstract: true,
templateUrl: "url"
});
$stateProvider.state('main', {
url: '/main',
templateUrl: "url1"
});
$stateProvider.state('main.header', {
url: '/main/header',
templateUrl: "url2"
});
$stateProvider.state('main.header.sidemenu', {
url: "/main/header/sidemenu",
templateUrl: "url 3"
});
$stateProvider.state('main.header.sidemenu.businesslist', {
url: "/main/header/sidemenu/businesslist",
templateUrl: "url 4"
});
for deep nesting you need to define all the states . hope it will help you
I'm trying to create a nested state config. When I go with the simple non-nested it works, but when I attempt to do it in a nested fashion it fails.
Below is the working code: (Notice the last state 'new')
app.config(
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/views/home.html',
controller: 'MainCtrl',
resolve: {
qstnrPromise: ['qstnrs', function(qstnrs) {
return qstnrs.getAll();
}]
}
})
.state('questionnaires', {
url: '/questionnaires/{id}',
templateUrl: '/views/questionnaire.html',
controller: 'QuestionsCtrl',
resolve: {
questionnaire: ['$stateParams', 'qstnrs', function($stateParams, qstnrs){
return qstnrs.get($stateParams.id);
}]
}
})
.state('new', {
url: '/questionnaires/{id}/new',
template: '<h3> testy </h3>'
});
//$urlRouterProvider.otherwise('home');
$urlRouterProvider.otherwise(function($injector, $location){
$injector.invoke(['$state', function($state) {
$state.go('home');
}]);
});
});
If I attempt to change it with the following, it fails. The URL on browser changes but I don't receive the template.
.state('questionnaires.new', {
url: '/new',
template: '<h3>New question</h3>'
});
Have I understood states incorrectly? Or where have I gone wrong?
Try changing your new state to:
.state('new', {
url: '/new',
parent: 'questionnaires',
template: '<h3>New question</h3>'
})
See if that works for you.
You can make the questionnaires state abstract.
$stateProvider
.state('questionnaires', {
abstract: true,
url: '/questionnaires',
})
.state('questionnaires.new', {
// url will become '/questionnaires/new'
url: '/new'
//...more
})
But in this case you will need to add one additional nested state in order to implement the functionality you need for the $stateParams.id.
after I did the update to angular 1.3 I'm not able to reach the controllers and views, they simply doesn't load.
the states in my root works perfectly, this is my app.js
$stateProvider.state("root",
{
url: '',
abstract: true,
views: {
'footer#': {
templateUrl: "/partial/footer/footer.html",
},
'header#': {
templateUrl: "/partial/header/header.html",
}
}
}).state('root.home', {
url: '/index',
views: {
'container#': {
templateUrl: '/partial/index/index.html',
controller: 'IndexCtrl'
}
}
}
).state('root.welcome', {
url: '/index/:status',
views: {
'container#': {
templateUrl: '/partial/index/index.html',
controller: 'IndexCtrl'
}
}
});
an also my configuration:
$urlRouterProvider.otherwise('index');
$locationProvider.hashPrefix('!');
$locationProvider.html5Mode({ enabled: false });
by after doing a stage.go or just by typing the url, I'm not able to reach any route in these states:
$stateProvider.state("candidate",
{
url: '',
abstract: true,
views: {
'footer#': {
templateUrl: "/partial/footer/footer.html"
},
'header#': {
templateUrl: "/user/partial/user.header/user.header.html",
},
'sideBar#': {
templateUrl: '/user/partial/user.sidebar/user.sidebar.html',
controller: 'SidebarCtrl',
resolve: {
user: 'currentUser'
}
},
'navBar#': {
templateUrl: '/user/partial/navbar/navbar.html'
}
}
}).state('candidate.dashboard',
{
url: '/dashboard',
views: {
'container#': {
templateUrl: '/user/partial/user.dashboard/user.dashboard.html',
controller: 'DashboardCtrl',
resolve: {
dashboardinfo: function ($resource, tracker) {
var resourceGet = $resource('/user/dashboard');
var promise = resourceGet.get().$promise;
tracker.addPromise(promise);
return promise;
}
}
}
}
})
I've spent a couple of hours trying to figure this out without any luck, maybe it's just a small detail I'm missing, any advice will be more than welcome.
PS: I'm using v0.2.12-pre1
I tried to replicate the issue, mentioned above in this working plunker. All the code is almost unchanged, I just used a custom version of UI-Router. The reason is this reported and known bug:
Impossible to disable html5Mode with angular 1.3.0-rc.3 #1397 (small cite:)
Due to: angular/angular.js#dc3de7f
the html5mode-check in urlRouter.js [line 383] is no longer correct. And thus it's impossible to disable html5mode.
A quick fix could be:
var isHtml5 = $locationProvider.html5Mode();
if (angular.isObject(isHtml5)) {
isHtml5 = isHtml5.enabled;
}
And this (the code above) is the change I made. Nothing else. All the code started to work then...
Check also this answer
ui-router not producing correct href attribute in angular
for a Chris T link to fixed version...
it turns out that the resolve method was failing, I'm using angular promise tracker
var resourceGet = $resource('/user/dashboard');
var promise = resourceGet.get().$promise;
tracker.addPromise(promise); <-- fails here
return promise;
it seems like resources and promises have breaking changes and my implementation could be deprecated.
I am using angular UI-Router. I have the following in my route config
.config(function config($stateProvider) {
$stateProvider.state('newsFeedView', {
url: '/newsFeed',
controller: 'newsFeedController',
templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html',
data: {
pageTitle: 'News Feed'
}
})
.state('tradeFeedView', {
url: '/tradeFeed',
controller: 'tradeFeedController',
templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html',
data: {
pageTitle: 'Trade Feed'
}
})
.state('bulletinBoard', {
url: '/bulletinBoard',
views: {
'tradeFeed': {
url: "",
controller: 'tradeFeedController',
templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html'
},
'newsFeed': {
url: "",
controller: 'newsFeedController',
templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html'
}
},
templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html'
});
})
In my index page I just invoke the view using:
<div class="container" ui-view></div>
In My bulletinBoard.html i want to have a nested view:
<div ui-view="tradeFeed"></div>
<div ui-view="newsFeed"></div>
For the /newsFeed page and the /tradeFeed pages this works perfectly but for the bulletin board i can't see anything on the page. Where am i going wrong?
I find the example on the official GitHub wiki to be very unintuitive. Here is a better one:
https://scotch.io/tutorials/angular-routing-using-ui-router
For instance:
...
.state('bulletinBoard', {
url: '/bulletinBoard',
views: {
// the main template will be placed here (relatively named)
'': { templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html' },
// the child views will be defined here (absolutely named)
'tradeFeed#bulletinBoard': { template: ..... },
// another child view
'newsFeed#bulletinBoard': {
templateUrl: ......
}
}
});
The syntax of each view attribute being viewName#stateName.
The .state() method's templateUrl is ignored when using the views object. See the ui-router wiki for more info:
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#user-content-views-override-states-template-properties