Wednesday, June 5, 2024
 Popular · Latest · Hot · Upcoming
160
rated 0 times [  162] [ 2]  / answers: 1 / hits: 21705  / 11 Years ago, tue, august 27, 2013, 12:00:00

edit: Based on the answer by @actor2019 I want to update my question to better explain the problem:



Using Angular UI-Router(v0.0.2), I've setup the app to properly navigate between main pages/state, while inheriting the base state.



Index.html:



<div ui-view></div>


base.html:



<!-- Header -->
<div>
<!-- Header markup -->

<!-- Search View -->
<div ui-view=search></div>
</div>

<!-- Page Content view -->
<div ui-view></div>


The issue is here in the app.js file. When I add the views parameter to the base state, everything stops working(100% blank page). Without that parameter, the page renders correctly, but I have no search view.



app.js:



$urlRouterProvider.otherwise('/');

//
// Now set up the states
$stateProvider
.state('base', {
abstract: true,
templateUrl: 'views/base.html',
views: {
search: {
templateUrl: views/search.html
}
}
})
.state('base.home', {
url: /,
templateUrl: views/home.html
})
.state('base.page2', {
url: /page2,
templateUrl: views/page2.html
});


How do I add views to this parent 'base' state?



enter



UPDATE:
The problem with @actor2019's answer here is that the search view gets reinitialized when the state changes. I'd like the views off the base level to persist through state changes.


More From » angularjs

 Answers
15

The first obvious mistake:



You can't specify controller and template on the state while your using views. They are mutually exclusive...



This is because when there is no views but a controller and template on the state, UI-Router automatically creates the views property and pulls those properties to an empty view...



.state('base', {
abstract: true,
templateUrl: 'views/base.html', //Can't do this
views: { // when this is there.
search: {
templateUrl: views/search.html
}
}
})


Instead do:



.state('base', {
abstract: true,
views: {
: {
templateUrl: 'views/base.html'
},
search: {
templateUrl: views/search.html
}
}
})


Second problem:



How views targeting works with nested views etc. is not very logical, it may work well if you restrict your self to one view in one view all the way down, but ones you start working with multiple named views it all gets confusing... Add unnamed views on top and many people gets lost...



The way views work in UI-Router is the worst part of UI-Router...



Given you example I am not even entirely sure of the way to target the search view from your abstract parent state... Might be:



.state('base', {
abstract: true,
views: {
: {
templateUrl: 'views/base.html'
},
search@base: {
templateUrl: views/search.html
}
}
})


If it can even be made to work... Alternatively you can move the search view out of base.html, but I guess you added it in there for a reason.



The whole view concept is the biggest reason why I ended up writing https://github.com/dotJEM/angular-routing instead.


[#76090] Monday, August 26, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
anais

Total Points: 672
Total Questions: 118
Total Answers: 121

Location: Oman
Member since Fri, Dec 23, 2022
1 Year ago
anais questions
Fri, Jul 29, 22, 00:00, 2 Years ago
Mon, Jul 19, 21, 00:00, 3 Years ago
Tue, May 11, 21, 00:00, 3 Years ago
Fri, Apr 2, 21, 00:00, 3 Years ago
;