I have two sections of my site, intro and core, that I want to have two different navigation bars.
Here is my navigation.yml
main:
- title: "Intro"
url: /intro/intro
- title: "Core"
url: /core/core-1
intro:
- title: Introduction
children:
- title: Intro
url: /intro/welcome
core:
- title: Core
children:
- title: Core
url: /core/core-1
Here is the relevant part of _config.yml
defaults:
- scope:
path: "intro"
type: pages
values:
layout: single
classes: wide
sidebar:
nav: "intro"
- scope:
path: "core"
type: pages
values:
layout: single
classes: wide
sidebar:
nav: "core"
My directory structure is:
/_pages/intro/welcome.md
/_pages/core/core-1.md
This results in neither navigation is displayed. What's going on here?
Michael Rose answered this question on his github issues page here.
It's not working because my paths were wrong. To make this work, I had to add _pages/ before the folder names.
defaults:
- scope:
path: _pages/intro
type: pages
values:
layout: single
classes: wide
sidebar:
nav: "intro"
- scope:
path: _pages/core
type: pages
values:
layout: single
classes: wide
sidebar:
nav: "core"
Related
I have this tab system, which works perfectly for me. I am learning VueJs. I have a concern
regarding components and/or templates. My concern is:
Using any tab windows as an example,how do I add two components inside a tab,I mean
one of its windows or sections.
Any help,please?
This is my codepen:
https://codepen.io/luis-tavarez/pen/dyOeRwO
It would be worth checking out Vue's Single File Components.
Using the layout you already have in place, you could add additional components to a tab by doing the following. Let's assume the new component will be named Custom.
Add an additional router-view to your HTML:
<section class="mainBody">
<router-view name="header"><button>asaaasas</button></router-view>
<router-view name="content"></router-view>
<router-view name="custom"></router-view>
</section>
Add a new template block to Home, for example above line 43 where you've described the Header template:
const Custom = {
template: `
<section class="content">
<div>
<h1>Here is your new custom component</h1>
</div>
</secion>
`
};
Update Components in your Routes description:
{
path: "/three",
name: 'three',
components: {
header: Header,
content: contentThree,
custom: Custom
},
props: {
header: true,
content: false
}
},
And here it is rendered:
I have a webpage which have buttons on it. I add the buttons with the code block below. How can I add opening links at new tab features to those buttons. Code is like that
var appList = [{
name: "<small>Clever.com</small>",
grades: "K-12",
url: "https://clever.com",
thumbnail: "clever.png"
},
{
name: "Learning.com",
grades: "K-12",
url: "http://login.learning.com/",
thumbnail: "learning.png"
}
];
If your code is generating pure HTML use target attribute for the <a/> tag.
Example:
Open in new tab
I have a jade template layout.jade file from wekan:
...
template(name="userFormsLayout")
section.auth-layout
//-h1.at-form-landing-logo
img(src="{{pathFor '/wekan-logo.png'}}" alt="Wekan")
section.auth-dialog
+Template.dynamic(template=content)
div.at-form-lang
...
i dont understand what exactly this line is doing:
+Template.dynamic(template=content)
Can somebody explain it to me, i am most curious about this content reference.
It's no related to jade syntax but to Blaze, see related documentation here.
An example of use: when you use a router, you can define what template name is the content dynamic template for each route. Here you are an example with FlowRouter (coffeescript syntax)
...
FlowRouter.route '/home',
name: 'home'
action: ->
BlazeLayout.render 'layout',
content: 'contentTemplateNameForHomeRoute'
FlowRouter.route '/user_profile',
name: 'userProfile'
action: ->
BlazeLayout.render 'layout',
content: 'contentTemplateNameForUserProfileRoute'
...
This could be your layout template (jadesyntax)
template(name='layout')
+header
+Template.dynamic template ='content'
...
I have problems implementing sticky tabs where each tab can have multiple child states using ui-router-tabs and ui-router-extras.
When I open a state, move to annother and then go back to the first state, the corresponding controller is getting reinitialized (although the ui-router-extras debug output says it reactivated the state)
When I open another state of the same tab (sibling state), the debug output, the url and the request of the html template is telling me that the new state is loaded, but the tab is showing an empty content and the api call of the state is not executed
This is my state/route configuration:
$stateProvider
.state('home', {
url: '/',
templateUrl: 'modules/core/views/home.client.view.html'
})
.state('home.feed', {
abstract: true,
url: '',
template: '<div ui-view="list" ng-show="$state.includes(\'home.feed.list\')"/>'+
'<div ui-view="view" ng-show="$state.includes(\'home.feed.view\')"/>'+
'<div ui-view="profile" ng-show="$state.includes(\'home.feed.profile\')"/>',
data: {
roles: ['user', 'admin']
},
sticky: true,
deepStateRedirect: true
})
.state('home.feed.list', {
url: 'posts',
views: {
'list#home.feed': {
templateUrl: 'modules/posts/views/list-feed.client.view.html'
}
},
sticky: true
})
.state('home.feed.view', {
url: 'posts/:postId',
views: {
'view#home.feed': {
templateUrl: 'modules/posts/views/view-post.client.view.html'
}
},
sticky: true
})
.state('home.create', {
abstract: true,
url: '',
template: '<div ui-view="form" ng-show="$state.includes(\'home.create.form\')"/>',
data: {
roles: ['user', 'admin']
},
sticky: true,
deepStateRedirect: true
})
.state('home.create.form', {
url: 'create',
views: {
'form': {
templateUrl: 'modules/posts/views/create-post.client.view.html'
}
},
sticky: true
});
The "home" state is containing the ui-view for all tabs as well as the navigation bar. Each abstract state is representing a single tab and contains the named views for all its child states. The 3rd level of the states (e.g. home.feed.list) is representing the actual content.
//home
<div data-ng-controller="HomeController">
<ui-view></ui-view>
<div class="navbar navbar-fixed-bottom">
<tabs data="tabData" type="tabs" justified="true" template-url="modules/core/views/custom-tab-template.client.view.html"></tabs>
</div>
</div>
//home.feed.list
<section data-ng-controller="PostsController" data-ng-init="loadPosts()">
...
</section>
//home.feed.view
<section data-ng-controller="PostsController" data-ng-init="findOne()">
...
</section>
//home.create.form
<section data-ng-controller="PostsController">
...
</section>
The views are using the same controller, but I already tried to add a seperate controller for each view. Furthermore I tried to remove the ui-router-tabs and called the states by url, same result.
Example debug output for: home.feed.list -> home.create.form -> home.feed.list
(Sry not enough reputation to post pictures)
Current transition: : {}: -> home.feed.list: {}
Before transition, inactives are: : []
After transition, inactives will be: []
Transition will exit: []
Transition will enter: ["ENTER: home", "ENTER: home.feed", "ENTER: home.feed.list"]
SurrogateFromPath: []
SurrogateToPath: ["home", "home.feed", "home.feed.list"]
I am initializing PostsController
Current state: home.feed.list, inactive states: []
Views: (__inactives.locals) / (root.locals) / (home.locals: '#' (home)) / (home.locals: '#' (home)) / (home.feed.locals: '#home' (home.feed)) / (home.feed.list.locals: 'list#home.feed' (home.feed.list))
Current transition: home.feed.list: {}: -> home.create.form: {}
Before transition, inactives are: : []
After transition, inactives will be: ["home.feed", "home.feed.list"]
Transition will exit: ["(home)", "INACTIVATE: home.feed", "INACTIVATE: home.feed.list"]
Transition will enter: ["(home)", "ENTER: home.create", "ENTER: home.create.form"]
SurrogateFromPath: ["home", "inactivate:home.feed", "inactivate:home.feed.list"]
SurrogateToPath: ["home", "home.create", "home.create.form"]
I am initializing PostsController
Current state: home.create.form, inactive states: ["home.feed.list", "home.feed"]
Views: (__inactives.locals: '#home' (home.feed), 'list#home.feed' (home.feed.list)) / (root.locals) / (home.locals: '#' (home)) / (home.locals: '#' (home)) / (home.create.locals: '#home' (home.create)) / (home.create.form.locals: 'form#home.create' (home.create.form))
Current transition: home.create.form: {}: -> home.feed.list: {}
Before transition, inactives are: : ["home.feed.list", "home.feed"]
After transition, inactives will be: ["home.create", "home.create.form"]
Transition will exit: ["(home)", "INACTIVATE: home.create", "INACTIVATE: home.create.form"]
Transition will enter: ["(home)", "REACTIVATE: home.feed", "REACTIVATE: home.feed.list"]
SurrogateFromPath: ["home", "reactivate_phase1:home.feed", "reactivate_phase1:home.feed.list", "inactivate:home.create", "inactivate:home.create.form"]
SurrogateToPath: ["home", "reactivate_phase1:home.feed", "reactivate_phase1:home.feed.list", "reactivate_phase2:home.feed", "reactivate_phase2:home.feed.list"]
I am initializing PostsController
Current state: home.feed.list, inactive states: ["home.create.form", "home.create"]
Views: (__inactives.locals: '#home' (home.create), 'form#home.create' (home.create.form)) / (root.locals) / (home.locals: '#' (home)) / (home.locals: '#' (home)) / (home.feed.locals: '#home' (home.feed)) / (home.feed.list.locals: 'list#home.feed' (home.feed.list))
The same output is generated when I am using 3 different controllers ("I am initializing.." is executed on every controller).
I have found the mistakes:
Because the second level of states (home.feed and home.create) need to be sticky as well they need a named parent ui-view. I forgot to change the single ui-view inside of the home-html into two named ui-views.
And of course I had to adapt the state definitions:
.state('home.feed', {
url: '',
views: {
'feed#home': {
template: '<div ui-view="list" ng-show="$state.includes(\'home.feed.list\')"></div>'+
'<div ui-view="view" ng-show="$state.includes(\'home.feed.view\')"></div>'+
'<div ui-view="profile" ng-show="$state.includes(\'home.feed.profile\')"></div>'
}
},
data: {
roles: ['user', 'admin']
},
sticky: true,
deepStateRedirect: {
default: { state: "home.feed.list" }
}
})
.state('home.create', {
abstract: true,
url: '',
views: {
'create#home': {
template: '<div ui-view="form" ng-show="$state.includes(\'home.create.form\')"></div>'
}
},
data: {
roles: ['user', 'admin']
},
sticky: true,
deepStateRedirect: true
})
This issue was caused by using div's with included closing tag. I changed this to the standard definition with a starting and closing tag (difference of the template definition above).
I am trying to use multiple UI-views in my AngularJS app and it is not working as expected. The app is a dashboard.
My directory structure is as follows:
index.html
app/
app.js
dashboard/
dashboard.html
dashboard.js
partials/
business.html
items.html
orders.html
sales.html
login/
login.html
login.js
The problem that I am having is that my index.html file has the following line of code:
<div ui-view></div>
The above line enables my application to show the login.html page and dashboard.html page. Now I want to be able to have partial views in my dashboard.html page and so I have also put the same line of code
<div ui-view></div>
in order to be able to embed partial views in my dashboard page. Instead of embedding though, the page instead just redirects. So for example if I am in my dashboard.html and click on a navigation item such as 'business', I am redirected to partials/business.html instead of the content being embedded.
1) Can I have multiple ui-views embedded within each other?
2) Am I correctly embedding the partial views?
I have scoured the internet but cannot find a solution. Thanks in advance for the help!
You can definitely have multiple embedded views.
Check out these AngularJS UI-Router tutorials: Nested Views and Multiple Named Views.
Let me know if you still have issues after looking them over.
You can define a ui-view inside another ui-view. I have implemented it in the following manner and its pretty straight forward.
Inside index.html I have code:
<div ui-view=""></div>
Then inside user.html I have code
<div ui-view=""></div>
And I have defined a config for displaying my views as
.config(function($urlRouterProvider, $stateProvider) {
var users = {
//Name must be in format Parent.Child
name: 'users',
url: '/user',
templateUrl: 'users/user.html',
controller: 'usersHandler',
data: {
pageTitle: 'Welcome to Users'
},
},
createUsers = {
name: 'users.createUsers',
url: '/createUser',
templateUrl: 'users/createUser.html',
data: {
pageTitle: 'Create Users'
}
},
listUsers = {
name: 'users.listUsers',
url: '/listUsers',
templateUrl: 'users/userLists.html',
data: {
pageTitle: 'Users listing'
}
},
getUserDealer = {
name: 'users.getUserDealer',
url: '/getUserDealer',
templateUrl: 'users/getUserDealer.html',
data: {
pageTitle: 'Users dealer listing'
}
},
editUser = {
name: 'users.editUser',
url: '/editUser',
templateUrl: 'users/editUser.html',
data: {
pageTitle: 'Edit User'
}
};
//Similarly define all the combination you want to separate
//add routes to stateProvider
$stateProvider
.state('users', users)
.state('users.createUsers', createUsers)
.state('users.listUsers', listUsers)
.state('users.getUserDealer', getUserDealer)
.state('users.editUser', editUser);
$urlRouterProvider.otherwise('/user/listUsers');
});
Whats happening is this that user.html is my parent file which is loaded inside index.html and editUser.html, getUserDealer.html and userLists.html etc are its children which I load within user.html using ui-view.
And I provide the links for nested pages as:
<ul class="nav navbar-nav">
<li>NEW USER</li>
<li>GET USER</li>
</ul>
This can be extended to additional parents and their children as per the need.
Hope it helps!!