AngularJS routing appending an errant directory name - javascript

I was put onto this AngularJS project (I'm usually a python/Java dev) when one of our devs left and it's slowly moving on.
I'm using AngularJS v1.0.8. Yes, I know it's old and I plan and transitioning it over to the newest stable version once I can get a fully working version now.
I'm at this part where the navigations is behaving oddly. I have these two forms with their respectful controllers that should be linked from the index page.
The weird thing is, this code works perfectly fine on the older system which, AFAIK nothing changed in the backend or frontend.
Here's the section of the index.html page that links/loads up the other pages.
<div id="nav" ng-controller="navController" class="wrap">
<div class="container">
<ul>
<li><a ui-sref="form.choose" ui-sref-active="active">Available Courses</a></li>
<li><a ui-sref="form.review" ui-sref-active="active">My Submissions</a></li>
<!-- <li>Approve Submissions</li> -->
<!-- <li ng-show="session.isAdmin()">Admin</li> -->
<li ng-show="session.isAdmin()"><a ui-sref="reports" ui-sref-active="active">Reports</a></li>
</ul>
</div>
</div>
and this is the main directory structure for the views...
└── views
├── form
│   ├── form.choose.tpl.html
│   ├── form.done.tpl.html
│   ├── form.edit.tpl.html
│   ├── form.review.tpl.html
│   ├── form.tpl.html
│   └── rubric.directive.tpl.html
├── home
│   └── home.tpl.html
└── reports
└── reports.tpl.html
What's happening when I try the hyperlink is that it appends an extra /form to the beginning of the link.
So at this point, I'm just trying to figure out where the error is happening.
Wrong HTML code for 'ref'
Bad AngularJS routing code
Bad directory structure

It could be the effect of nesting states and not setting the state.url correctly. For example say you had defined states as:
.config(function config($stateProvider) {
$stateProvider.state('form', {
url: '/form'
})
.state('form.choose', {
url: '/form/choose'
})
.state('form.review', {
url: '/review'
});
})
Ui-router would see choose and review as child states of form. This would automatically append it's url as a prefix to its children. Then the sref for the form.choose state would be '/form/form/choose', where as for form.review state would be '/form/review'.
Hope this helps!
Edit: Also make sure that ui-router's version is consistent between your system and the old one. It could be that the old version uses a version before child states were implemented which is why it's functioning.

Related

How do next.js applications optimize for mobile screens?

I just figured out that since I built my app with Next.js, I can't use CRA's folder structure framework to build or diagnose my application.
Unfortunately, I'm completely at a loss at the moment with respect to how Next.js applications are supposed to properly scale a website for mobile devices. I've always been under the impression that it was the job of index.html to do that (which I've written, but my app can't seem to bother to find it or use it). I've looked at the default folder structure for a Next.js app:
├── README.md
├── components
│ ├── head.js
│ └── nav.js
├── next.config.js
├── node_modules
│ ├── [...]
├── package.json
├── pages
│ └── index.js
├── static
│ └── favicon.ico
└── yarn.lock
source
but there doesn't seem to be a place for index.html.
My question is simply, how do Next.js apps optimize for mobile screens? Are they even supposed to have an index.html, and if so where? And how do favicons work, because I've created the static folder and put the favicon inside, but I'm pretty sure to have the favicon do anything, it has to be referenced by a file (conventionally index.html).
repo
Next has this Document component which you can customize to your own likings.
As their official docs say:
Is used to change the initial server side rendered document markup
You can use it to customize your head tag content as you would do anyway in your index.html.
Don't forget to add <meta name="viewport"content="width=device-width, initial-scale=1.0" /> in head tag if you want your app to use media queries.
Next project is not supposed to have a particular index.html file. Instead, the initial page is supposed to be a component located specifically in pages/index.js.

Lists all Blobs inside Azure Container with directory-level support using web front-end

I'm currently working on developing some set of codes to display all blobs inside specified Azure Container using web front-end. I'm expecting the final output to be something like this:
I started by creating a dummy storage account and populates it with some dummy files for me to play around with.
https://alicebob.blob.core.windows.net/documents
├── docx
│   ├── 201801_Discussion.docx
│   ├── 201802_Discussion.docx
├── xlsx
│   ├── 201801_Summary.xlsx
│   ├── 201802_Summary.xlsx
│   ├── 201803_Summary.xlsx
├── 201801_Review.pdf
├── 201802_Review.pdf
├── 201803_Review.pdf
To develop file listing function, I'm using Azure Storage JavaScript client library from here and put all the necessary codes (.html and .js files) in Azure Static website $web container and set index.html as Index document name and Error document path in the Static website configuration.
https://alicebob.z23.web.core.windows.net/
├── azure-storage.blob.min.js
├── azure-storage.common.min.js
├── index.html
The problem is that the function to do the listing is only either listBlobsSegmentedWithPrefix or listBlobDirectoriesSegmentedWithPrefix. So, in my case, I assume it wouldn't work straightforwardly to list all the blobs and directories in a well-structured / tree format.
My current approach is that I trick the code to keep using listBlobDirectoriesSegmentedWithPrefix until there is no more directory to list inside, then continue to list using listBlobsSegmentedWithPrefix
So far I'm quite satisfied that my code can list all the Blobs at the leaf-level and also list all the directories if it isn't on the leaf-level. You can take a look at the blob listing here and feel free to go for 'View Source' to see the codes I built so far.
The only problem that I face is that this set of code fails to list the Blobs if it wasn't on the leaf-level. For example, it fails to list these blobs on alicebob storage account:
├── 201801_Review.pdf
├── 201802_Review.pdf
├── 201803_Review.pdf
This is an expected issue as I'm not running listBlobsSegmentedWithPrefix if it isn't on the leaf-level. The reason is that it will produces the output with something like this which isn't what I want:
├── docx/201801_Discussion.docx
├── docx/201802_Discussion.docx
├── xlsx/201801_Summary.xlsx
├── xlsx/201802_Summary.xlsx
├── xlsx/201803_Summary.xlsx
├── 201801_Review.pdf
├── 201802_Review.pdf
├── 201803_Review.pdf
Any suggestion on how to overcome this issue? The real implementation would involves a huge amount of data so I think a simple if-then-else wouldn't be efficient on this case.
sorry for the long description but I just want to describe my problem as clear as possible :)
There's an option called delimiter when listing blobs. Let's get down to code.
blobService.listBlobsSegmentedWithPrefix('documents',null,null,{delimiter:'/'},(error,result,response)=>{
console.log(result);
console.log(response.body.EnumerationResults.Blobs.BlobPrefix);
})
With delimiter /, listing operation returns results of two parts.
result, contains info of blobs under the root directory of container, e.g. 201801_Review.pdf, etc. in your case.
BlobPrefix in response body, contains directory names of single level with delimiter.
[ { Name: 'docx/' }, { Name: 'xlsx/' } ]
Use BlobPrefix as prefix, we can continue listing content of current subdirectory.
blobService.listBlobsSegmentedWithPrefix('documents','docx/',null,{delimiter:'/'},(error,result,response)=>{
console.log(result);
console.log(response.body.EnumerationResults.Blobs.BlobPrefix);
})
Basically point 1 result is enough, you don't necessarily have to use BlobPrefix to refactor your code. See more info in section Using a Delimiter to Traverse the Blob Namespace of list blobs.
You can also do this with out the overhead of the whole storage api using a fetch request as follows.
fetch("https://cvworkshop.blob.core.windows.net/telaviv-bw/?restype=container&comp=list")
.then(response => response.text())
.then(str => new window.DOMParser().parseFromString(str, "text/xml"))
.then(data => console.log(data));

EmberJS nested dynamic routes don't redirect as expected

Using Ember 2.17.0, I can't seem to get routes nested under other dynamic routes to load properly.
With the following file structure I'd like the stacks route to load a new page.
features/instances/
├── edit
│   ├── route.js
│   └── template.hbs
├── index
│   ├── route.js
│   └── template.hbs
├── new
│   ├── route.js
│   └── template.hbs
└── view
├── route.js
├── stacks
│   ├── route.js
│   └── template.hbs
└── template.hbs
The URL for the stacks endpoint looks like /instances/view/91467053-ba03-33b9-8950-83f0e64b4688/stacks/123456
Where 123456 is the ID of the stack model. However at the moment when I trigger the link above the page doesn't reload and I'm still on the view route. If I put a {{outlet}} tag into the view template, the content of the stacks is rendered there. But I want it on it's own page...
My router.js
Router.map(function () {
this.route('instances', function () {
this.route('view', {path: '/view/:instance_id'}, function () {
this.route('stacks', {path: '/stacks/:stack_id'});
});
this.route('edit');
this.route('new');
this.route('all');
});
this.route('error');
});
What have I done wrong here? I can't find much about nested dynamic routes for ember 2.0+
I hope I'm understanding your problem correctly. There are two ways to do this:
1) instead of view/template.hbs put that HTML in view/index/template.hbs, that way view/stacks/template.hbs will share none of the view template code.
2) instead of nesting the stacks route in the view route you pull up to the instances route with path: '/view/:instance_id/stacks/:stack_id', and then move the route/template files accordingly
Nested routes in Ember don't work as you're used to.
Where in most other view frameworks, a nested route implies a relation between objects, in Ember nested routes imply a nested view.
So for example you could have a messages.index route which nests a messages.show route if you would like to have a list of messages rendered and the ability to open them in a detail pane next to it.
If you want to render something independent (so not nested in another view) simply give it its own route.

Spring Boot not serving static javascript file

I have a very strange behaviour of Spring Boot application (1.4.0.RELEASE)
My static content lies under /src/main/resources/static/* and one of the pages needs css and js files, but despite the fact that css files are served without problems I am getting 404 for js files:
For CSS file I see in the logs
SimpleUrlHandlerMapping : No handler mapping found for [/admin_files/custom_admin.css]
RequestMappingHandlerMapping : Looking up handler method for path /admin_files/custom_admin.css
RequestMappingHandlerMapping : Did not find handler method for [/admin_files/custom_admin.css]
SimpleUrlHandlerMapping: Matching patterns for request [/admin_files/custom_admin.css] are [/**]
SimpleUrlHandlerMapping : Mapping [/admin_files/custom_admin.css] to HandlerExecutionChain with handler [ResourceHttpRequestHandler [locations=[ServletContext resource [/], (...)
so it looks completely fine. However for JS file it looks different:
SimpleUrlHandlerMapping : No handler mapping found for [/admin_files/vendor/jquery/dist/jquery.min.js]
RequestMappingHandlerMapping : Did not find handler method for [/admin_files/vendor/jquery/dist/jquery.min.js]
SimpleUrlHandlerMapping : Matching patterns for request [/admin_files/vendor/jquery/dist/jquery.min.js] are [/**]
SimpleUrlHandlerMapping : Mapping [/admin_files/vendor/jquery/dist/jquery.min.js] to HandlerExecutionChain with handler [ResourceHttpRequestHandler [locations=[ServletContext resource [/] (...)
//
// and now something strange starts to happen BELOW
//
HttpEntityMethodProcessor : Written [{timestamp=Tue Sep 13 23:17:12 CEST 2016, status=404, error=Not Found, message=No message available, path=/admin_files/vendor/jquery/dist/jquery.min.js}] as "application/json" using [org.springframework.http.converter.json.MappingJackson2HttpMessageConverter#29139aae]
I am really stuck as it looks like a very small glitch or something very tiny that I am missing somewhere.
My application looks like this:
#SpringBootApplication
#EnableAsync
#EnableTransactionManagement(proxyTargetClass = true)
#EnableEncryptableProperties
public class Application extends WicketBootSecuredWebApplication { }
without any custom configuration beans, etc.
tree executed in /src/main/resources:
.
├── application-dev.yml
├── application-prod.yml
├── application-staging.yml
├── application.yml
├── banner.txt
└── static
└── admin_files
├── custom_admin.css
└── vendor
├── jquery
│   ├── jquery.js
│   └── jquery.min.js
└── metisMenu
├── metisMenu.css
├── metisMenu.js
├── metisMenu.min.css
└── metisMenu.min.js
Any help appreciated!
Notice that you're asking for /admin_files/vendor/jquery/dist/jquery.min.js but in your resource tree the dist directory does not exist.

Require complete subdirectories, with grunt-neuter

I have the following directory structure for my ember application:
neuter/
├── adapters
├── controllers
├── models
├── routes
└── views
In all those directories I have lots of files. Currently, my neuterapp.js has lots of statements like:
require('app/neuter/models/node');
require('app/neuter/controllers/nodes');
I would like to avoid having to explicitly list all files which are needed. I have tried with:
require('app/neuter/controllers/*');
And with:
require('app/neuter/controllers');
But this is not working. Is there any way to require everything in a directory?
You could try:
require('app/neuter/models/**/*')
This addition was added with this merged PR.
Hope it helps.

Categories

Resources