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?
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.