Angular ui-router load specific view before resolve - javascript

I know it sounds counter-intuitive, but please hear my situation out. I have a "topbar" view and a "main" view. The topbar has no specific data associated with any one particular view, but it can change depending on the user's login status. This really helps to keep that part of my website robust, however it comes at a terrible cost: When I want to use "resolve", the topbar goes completely missing. I understand the logic behind this, but I am wondering if there is anyway to target which view to actually block with resolve?
If I could only block my "main" view, but allow my "topbar" view to render, then that would be perfect. I also don't want to avoid using resolve to avoid the main view flashing nonsense when the view is first loaded.
What my routes look like:
$stateProvider..state("about", {
url: "/about",
views: {
"topbar": {
templateUrl: "/app/templates/topnav.html"
},
"main": {
templateUrl: "/app/home/about.html",
controller: ["$rootScope", function ($rootScope) {
$rootScope.pageTitle = "About";
}]
}
}
}).state("courses", {
url: "/courses",
views: {
"topbar": {
templateUrl: "/app/templates/topnav-loggedin.html"
},
"main": {
templateUrl: "/app/courses/courses.html",
controller: "coursesController"
}
},
resolve: {
currentCourse: ["$http", function($http) {
// load course
}]
}
});

I'd probably make a parent, abstract state for all states requiring the logged-in topbar template. For example
.state('loggedin', {
abstract: true,
views: {
topbar: {
templateUrl: '/app/templates/topnav-loggedin.html'
}
}
}).state('courses', {
parent: 'loggedin', // or name the state 'loggedin.courses'
url: '/courses',
views: {
'main#': { // the "main" view in the root state
templateUrl: '/app/courses/courses.html',
controller: 'coursesController'
}
},
resolve: { ... }
});

Related

Multiple named views not showing

I'm trying to build from scratch a very simple angular app using ui-router.
Every page will have the same appearance, and will have the following 4 sections (vertically, from top to bottom):
HEADER (common to all pages)
HORIZONTAL MENU (common to all pages)
CONTENT (this is the only content that will change)
FOOTER (common to all pages)
My index.html has <div ui-view></div> inside the <body> tag.
I also have a simple html file (portal.html) that contains the structure of every page:
<div ui-view="header"></div>
<div ui-view="menu"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
I've have created a parent state, where I set the common sections to every page:
$stateProvider
.state('portal', {
url: '/portal',
templateUrl: 'app/main/portal.html',
views: {
header: {
templateUrl: 'app/main/section/header.html'
},
menu: {
templateUrl: 'app/main/section/menu.html'
},
footer: {
templateUrl: 'app/main/section/footer.html'
}
}
});
And some child states (one for each menu option - page), where I set the variable content to every page:
$stateProvider
.state('portal.home', {
url: '/home',
views: {
'content#portal': {
controller: 'HomeCtrl as homeVM',
templateUrl: 'app/portal/home.html'
}
},
resolve: { /* whatever */ }
})
// ... and so on ...
.state('portal.contactUs', {
url: '/contact-us',
views: {
'content#portal': {
controller: 'ContactUsCtrl as contactUsVM',
templateUrl: 'app/portal/contactUs.html'
}
},
resolve: { /* whatever */ }
});
But this won't display anything on screen... Am I missing something here?
I finally found a solution. What actually helped me was this StackOverflow post, that is quite similar to mine, and specially the plunker example shown there.
The mistake was in the state configuration object passed to the $stateProvider.state(). The parent state should be set the following way:
$stateProvider
.state('portal', {
url: '/portal',
views: {
'#': {
templateUrl: 'app/main/portal.html'
},
'header#portal': {
templateUrl: 'app/main/public/header.html'
},
'menu#portal': {
templateUrl: 'app/main/public/menu.html'
},
'footer#portal': {
templateUrl: 'app/main/public/footer.html'
}
}
});

Error: Could not resolve 'storysolo' from state 'index'

I have my index.php page with a ui-sref link as follows
<a ui-sref="storysolo({ storyId: headline.nid })">
I have my main js file loading the angular code as follows
var rebelFleet = angular.module("CougsApp", ["ui.router","ngAnimate", "ui.bootstrap", "ngSanitize", "slick","CougsApp.headlines","CougsApp.story","CougsApp.recentstories" ]);
rebelFleet.config(function($stateProvider) {
// For any unmatched url, redirect to /state1
$stateProvider
.state('index', {
url: "",
views: {
"navViewPort": { templateUrl: '/components/nav/nav.html'
},
"contentViewPort": {
templateUrl: '/components/headlines/headlines.html',
controller: "headlinesCtrl"
},
"eventsViewPort": { templateUrl: '/components/scroller/scroller.html' },
"bottomContentViewPort": { templateUrl: '/components/recentstories/recentstories.html',
controller: "recentstoriesCtrl"
},
"rightsideViewPort": { templateUrl: '/components/social/social.html' },
"footerViewPort": { templateUrl: '/components/footer/footer.html' }
}
})
Then I have my story.js file trying to load with it's own routing. as follows
var ywing = angular.module('CougsApp.story', ["ui.router"]);
ywing.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('storySolo', {
url: '/story/:storyId',
views: {
"navViewPort": { templateUrl: '/components/nav/nav.html'
},
"contentViewPort": {
templateUrl: '/components/story/story.html',
controller: "storyCtrl"
},
"footerViewPort": { templateUrl: '/components/footer/footer.html' }
}
})
});
So when I load my page and click on the ui-sref link I get this error
Could not resolve 'storysolo' from state 'index'
my order of files being loaded is as follows
angular.js,
angular-sanitize.js,
angular-ui-router.js,
rebelFleet.js, (the main js file)
story.js
I'm guessing I'm doing something wrong with the way the routes are being loaded and UI-Router hates it. Any help would be much appreciated.
There is a working example
Believe or not, it is very simple - it is about case sensitivity. State names must fit on the 1) definition as well on the 2) call side
// small solo
<a ui-sref="storysolo({ storyId: headline.nid })">
// capitalized Solo
$stateProvider.state('storySolo', {...
so just use one or the other, e.g.:
// not small solo
<a ui-sref="storySolo({ storyId: headline.nid })">
// the same name here
$stateProvider.state('storySolo', {...
Check the example here

AngularJS, UI Router - Navigating to "foo/bar" goes to "foo"

For a particular app I've got several states defined, but I'm having trouble with two in particular.
Here's what they look like:
$stateProvider.state('foo', {
url: '/foo',
views: {
"main": {
controller: 'fooController',
controllerAs: 'ctrl',
templateUrl: 'a.html'
},
}
}).state('bar', {
url: '/foo/bar/:id',
views: {
"main": {
controller: 'barController',
controllerAs: 'ctrl',
templateUrl: 'b.html'
},
}
});
Issue: Whenever I navigate in browser directly to /foo/bar/123 the route works. However if I navigate to /foo, and then to /foo/bar/123 the state briefly loads and then navigates back to /foo.
Question: Apart from changing '/foo/bar' to be '/bar' how can I resolve this issue?
I believe all you are looking for is one change to your config.
$stateProvider.state('foo', {
url: '/foo',
views: {
"main": {
controller: 'fooController',
controllerAs: 'ctrl',
templateUrl: 'a.html'
},
}
}).state('foo.bar', {
url: '/bar/:id', //This will still evaluate to /foo/bar/:id
views: {
"main": {
controller: 'barController',
controllerAs: 'ctrl',
templateUrl: 'b.html'
},
}
});
your url should still be /foo/bar/:id, but ui-router will concat them together for you because you are saying that foo is a parent route to bar.
It's likely getting confused right now because it sees two routes that use /foo and doesn't know which to use, so it defaults to the first one defined.
Reference:
https://github.com/angular-ui/ui-router/wiki/URL-Routing

How to update only the named view using UI-Router

I am creating a web app to help students in science, history and math. When you first land on the site I have a home/landing page. When you click get started I route to /exam/instructions. Each of my steps instructions, math and science our templates that I load into the ui-view="exam-detail". Currently the whole ui-view loads when I navigate to and from instructions through sciences. Ideally I simply want an area for pagination and an area for the subject matter and only want the ui-view="exam-detail" to update with the correct template.
I have not used UI-Router at all and any assistance would be greatly appreciated.
index.html
<div ui-view></div>
state-exam>exam.html
<div class="state-exam">
<nav ui-view="exam-pagination"></nav>
<section ui-view="exam-detail"></section>
</div>
route.js
(function() {
'use strict';
angular
.module('studentPortal')
.config(routeConfig);
function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
})
.state('exam', {
url: '/exam/:step',
abstract: true,
templateUrl: 'app/state-exam/exam.html',
controller: 'ExamController',
controllerAs: 'examController',
})
.state('exam.instructions', {
url: '/instructions',
views: {
'exam-pagination':{
templateUrl: 'app/state-exam/exam-pagination.html'
},
'exam-detail' : {
templateUrl: 'app/state-exam/exam-instructions.html'
}
}
})
.state('exam.math', {
url: '/math',
views: {
'exam-pagination':{
templateUrl: 'app/state-exam/exam-pagination.html'
},
'exam-detail' : {
templateUrl: 'app/state-exam/exam-math.html'
}
}
});
$urlRouterProvider.otherwise('/');
}
})();
There is a working plunker
There is a similar Q & A in fact, with working plunker:
Angular UI Router - Nested States with multiple layouts
Solution here, is to move the static view from child to parent. It won't be reloaded for each child (view is reloaded only if parent state is changed). We will use absolute naming (see included links for more details)
So this is the code adjustment
.state('exam', {
url: '/exam/:step',
abstract: true,
// the root view and the static pagination view
// will be defined here, so we need views : {}
views: {
'':{
templateUrl: 'app/state-exam/exam.html',
controller: 'ExamController',
controllerAs: 'examController',
},
// absolute naming targets the view defined above
'exam-pagination#exam':{
templateUrl: 'app/state-exam/exam-pagination.html'
},
}
})
.state('exam.instructions', {
url: '/instructions',
views: {
// 'exam-pagination':{}, // defined in parent
'exam-detail' : {
templateUrl: 'app/state-exam/exam-instructions.html'
}
}
})
.state('exam.math', {
url: '/math',
views: {
// 'exam-pagination':{}, // defined in parent
'exam-detail' : {
templateUrl: 'app/state-exam/exam-math.html'
}
}
});
Also check this to get more details about absolute view naming
Angular UI router nested views
Angular-UI Router: Nested Views Not Working
The working example is here

Angular UI Router - Views in an Inherited State

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.
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.
The Child state should be home.search instead of header.search. In your case, you may want to write some abstract state to hold the layout,
base.html
<div class="row-fluid">
<div class="header">
<div class="span3" ui-view="logo"></div>
<div class="span9" ui-view="menu"></div>
</div>
</div>
<div class="row-fluid">
<div class="content">
<div class="span2" ui-view="sidebar"></div>
<div class="span10" ui-view="entry"></div>
</div>
</div>
in app.js
$stateProvider
.state('base',{
abstract:true,
url:'/',
templateUrl: viewBase+'base.html'
})
.state('base.main',{
url:'',
views:{
"logo":{
templateUrl:viewBase+'main/logo.html'
},
"menu":{
templateUrl:viewBase+'main/menu.html'
},
"sidebar":{
templateUrl:viewBase+'main/sidebar.html'
},
"entry":{
templateUrl: viewBase+'main/entry.html'
}
}})
According to the ui-router documentation, when the application is in a particular state—when a state is "active"—all of its ancestor states are implicitly active as well. So, for example, when the "contacts.list" state is active, the "contacts" state is implicitly active as well, because it's the parent state to "contacts.list". Child states will load their templates into their parent's ui-view. I'd reccomend looking over the section of their documentation entitled Nested States & Views to gain a fuller understanding of how to do this.
In the code you have provided us here, the parent state of the search template is home, while
.state('header.search', {
templateUrl: "views/search.html",
controller: "SearchCtrl"
})
implies that the parent state of the search template should be header in order for the view to get loaded correctly. So, I believe the following changes to your app.js will fix your issue.
app.js
$stateProvider
.state('home', {
url: "/",
views: {
'': {
templateUrl: "views/mainContent.html",
controller: "MainCtrl"
},
'header': {
templateUrl: "views/header.html"
},
'footer': {
templateUrl: "views/footer.html"
},
}
})
.state('home.search', {
views: {
'search': {
templateUrl: "views/search.html",
controller: "SearchCtrl"
}
})
.state('anotherPage', {
url: "/anotherPage",
templateUrl: "views/anotherPage.html"
});
This works for me.
$stateProvider
.state('base', {
abstract: true,
url:'/',
templateUrl: 'views/base.html'
})
.state('base.home', {
url: "",
views: {
"search#base": {
templateUrl: "views/searchOfHome.html"
}
//content#base, contentOfHome.html
}
})
.state('base.page2', {
url: "page2",
views: {
"search#base": {
templateUrl: "views/searchOfPage2.html"
}
//content#base, contentOfPage2.html
});
If 'base' is the root state, you don't need the '#base'

Categories