My problem is simple from my point of view, but I'm struggling fixing it.
On my Hugo folder, if I resume the structure of my layouts and content folders, it's like this:
layouts
|--- _default
|--- baseof.html
|--- list.html
|--- single.html
|--- blog
|--- list.html
|--- single.html
content
|--- blog
|--- posts
The code under /layouts/blog/list.html works fine -the design of the list page under the URL on local http://localhost:1313/blog/ is as I want it to be. However the code under /layouts/blog/single.html isn't working. Instead, I got the implementation of the code of the single page under /layouts/_default/single.html.
The source of this problem might be in the fact that I migrated my blog posts from WordPress with a plugin into Hugo. And the metadata of my blog posts are like this:
---
title: ...
author: ...
type: post
date: ...
url: /2020/10/title-of-the-post/
---
And the URL of my post on local is: http://localhost:1313/2020/10/title-of-the-post/.
What I did is obviously change the url in the metadata of the post to be like this:
---
url: /blog/2020/10/title-of-the-post/
---
Thus the URL of my post on local is now: http://localhost:1313/blog/2020/10/title-of-the-post/.
However, it didn't trigger the single page under /layouts/blog/single.html -the code implemented is still the one under /layouts/_default/single.html.
I don't have more idea to try. Has someone of you figured out how I could do it ?
Here are my permalinks configuration from the config.toml as I guess some of you might ask them:
[permalinks]
post = "/:year/:month/:title/"
I ended up finding the solution: it was to delete the line type: post in the front matter of my posts (or to change it to type: blog).
root
/ | \
/ | \
/ | \
header content navbar
|
|
library (abstract)
/ | \
/ | \
/ | \
Authors Books Movies
Using my beautiful graphic above I would like to explain a few things:
header has some API data to retrieve about the user (e.g. GET /user/me)
Authors has its own GET /authors it uses to populate that view
Books and Movies are the same as Authors, they are just their own state
Now this is what I want:
I want a cascading layout whereby the main layout of the page can be loaded first, then the "library" application can be loaded on top of it without any "lag" or blocking of the UX.
However, with how ui-router seems to work today, if I have 1 resolve in this entire application and I place it in the "library" state, what happens is the "header" and "navbar" states are blocked until the resolve completes. What I would expect to happen is the parent states load first with their views, then the "library" state blocks on the resolve. That way you could see the navbar and header in the browser as soon as the page is loaded, but you would get a loading bar or spinner until the "library" resolve finished.
Any easy way to achieve this functionality would be to not use resolves and instead just have all the API logic inside the controller, however this causes the scope of each of the 3 resources to be limited to their controller and that is it. Meaning, if you are in the Movies controller, you have no visibility into the Authors resources because Authors are scoped to only the "Authors" controller. This makes things like web sockets less efficient and even unusable.
Am I doing something wrong here which is causing me to not get the desired functionality or is this not possible with this kind of architecture?
As I am working on a backbone application, I came across the Router. My problem is, that i do not know, how to put links onto my website, so that backbone routes them. Imagine the following constellation:
Homepage: localhost/mypage
Now I want to set up a -Tag, that brings me to another page, like:
localhost/mypage/#!/subPage/subSubPage
Can someone help? How does the route and the tag look like?
Thanks!
EDIT 1:
Imagine situation:
I am at: http://localhost/page/#!/de/home
Click on with href: http://localhost/page/#!/de/masterplaner
It brings me to: http://localhost/page/#//de/home=undefined&page=#!/de/masterplaner
Why?
EDIT 2:
The route I want to be called is:
!/:language/masterplaner
I have a page and tabs on it, I want each tab to to have a URL (I use angular UI to switch tabs)
What would be the best way to include the tab ID in the url? I trie the simplest - using # - but it seems angular has routing issues using hash locations.
See on angular-route-segment (http://angular-route-segment.com);
Click in demo on Item 1 or Item2 and see tabs.
Or use ui-router.
I'm using grunt to concatenate my .js files for my Angular app.
I've just gone through and tidied up the codebase to follow the conventions discussed here, specifically, grouping my code into small modules that represent features.
However, I'm finding that the order of concatenation appears to break the app, if a module is consumed before it is declared.
eg:
|-- src/
| |-- app/
| | |-- userProfile/
| | | | userProfile.js
| | | |-- deposits/
| | | | |-- depositFormCtrl.js
Where:
// userProfile.js
var userProfile = angular.module('userProfile',[])
// depositFormCtrl.js
angular.module('userProfile')
.controller('DepositFormCtrl', function($scope) {...});
When grunt performs the concatenation, depositFormCtrl.js appears before userProfile.js. This causes the app to throw an error, complaining:
Uncaught Error: No module: userProfile
I see lots of talk about the possibilities of using RequireJS / AMD to manage the load order of the modules. However, often it's stated that this is overkill / not required, as Angular handles this for you.
E.g: Brian Ford of the Angular team mentioned:
My personal take is that RequireJS does too much; the only feature that AngularJS's DI system is really missing is the async loading.
He's also stated elsewhere that he doesn't recommend RequireJS with Angular.
I've also seen mentioned made to using angular-loader.js, as shown on the seed project. However, as I understand it, (there's little official documentation) the loader aims to solve the problem of loading modules out of order, rather than them being referenced before used.
Adding angular-loader.js to my project didn't resolve the issue.
Is there a declaration I should be using that prevents the errors I'm having?
What is the correct way to declare modules & controllers, so that the order files are concatenated doesn't impact the code at runtime?
One technique I sometimes use is to put declarations at the start of the concatenated file. I do this by putting them in a dedicated file that will be the first one to be picked up by the concatenation utility.
//app/_declarations.js
angular.module('userProfile',[]);
//app/userProfile/userProfile.js
angular.module('userProfile')
.config(['$routeProvider', function ($router) {...});
//app/userProfile/deposits/depositFormCtrl.js
angular.module('userProfile')
.controller('DepositFormCtrl', function($scope) {...});
May not be a good fit for all scenarios, but is simple to set up and understand.
I ran into the same issue. I split the concatenation step in my GruntFile.js to two tasks, so essentially my app.js, where my Angular application is defined, is 'prepended' to the intermediate concatenated file (_app.js), and the result is saved with the same name of the intermediate file, resulting into a final '_app.js'
app.js
var TestApp = angular.module('TestApp', [...]);
Sub tasks in my concat section of my GruntFile.js
....
// Concatenate all Angular application JS files into _app.js. Note the use
// of wildcards to walk the App folder subfolders to pick up all JS files.
jsCore: {
src: [
'<%= meta.appPath%>/**/*.js',
// Do not include app.js, since it needs to be prepended to the final concat file
'!<%= meta.appPath/app.js',
// Do not include config.js, since it will need to be tokenized by RM
'!<%= meta.appPath%>/config.js'
],
dest: '<%= meta.resPath %>/_app.js'
},
// Prepend app.js to the beginning of _app.js, and save result as _app.js.
// This keeps Angular happy ...
jsApp: {
src: [
'<%= meta.appPath%>/app.js',
'<%= meta.resPath%>/_app.js'
],
dest: '<%= meta.resPath %>/_app.js'
}
...
The resultant _app.js file has the source of app.js at the beginning i.e. the declaration of TestApp.
If you split a module in multiples js files and you don't want to manage manually in which order your build should concatenate files then you will need RequireJS.
Personally, I try to avoid splitting a module in several files for several reasons :
It can be hard to find all controllers/services/etc.. from a single module
If the module is becoming too big, then it probably means you should split in several modules
It's cumbersome enough to have to declare manually a list of modules dependencies and a list of injected dependencies for each module. Add to that a list of js dependency files needed by RequireJS and you will spend most of your time declaring boring stuff instead of resolving business problems
However, if you keep the 1 module / 1 file rule, you'll see your index.html growing very quickly. Personally, I don't consider that as a big issue.
use gulp and then use gulp-angular-sort
return gulp.src('./build/src/app/**/*.js')
.pipe(sort())
.pipe(plug.concat('concat.js'))
.pipe(gulp.dest('./output/'));