We Keep Coding

AngularJS: Retrieving Videogular templates stored in $templateCache results 404 Error

I currently develop an AngularJS 1.5.9 Single Page Application on my localhost with NodeJS running backend, where I use
Videogular framework. http://www.videogular.com/
Everything is fine except inserting videogular object on my page. I strictly follow the given example: http://www.videogular.com/examples/simplest-videogular-player/
<videogular vg-theme="controller.config.theme.url">
<vg-media vg-src="controller.config.sources"
vg-tracks="controller.config.tracks"
vg-native-controls="true">
</vg-media>
</videogular>
But it results in AngularJS error:
(sessionId in the request is the auth token not linked to current problem)
I have found the following in videogular.js :
$templateCache.put("vg-templates/vg-media-video", "<video></video>");
$templateCache.put("vg-templates/vg-media-audio", "<audio></audio>");
I have tried to store files locally, and the error disappeared
Actually there are a lot of plugins for Videogular and they all are using $templateCache to store some files in the cache, so it would be very confusing to manually store them locally in my app folder.
How can such files be stored in the cache using $templateCache so they can be extracted properly?
I apreciate your help.
UPDATE
I have tried insert $templateCache.get to directive, where the part is loading with error 404, and it works. But still doesn't work as it supposed to be.

It seems like there is an issue with sessionId that you pass in URL parametrs, do you actually need it?
I guess your interceptor or whatever auth managing module is wrong configured, so you don't check request target URL and id parameters are going to be added for local calls as well as for backend calls.

How to hide angular admin views

I want to make an angular app with routes and jwt auth, but I don't want normal users to see the HTML partials of admin views. What's the best way to do this with laravel and angular? People can just put "/partials/adminPage1.html" on the url and see the partial when they are not logged in. My API is secure but I don't want the html to be public.
I want it so this is public:
index.php, publicPartial1.html, publicPartial2.html, etc
and only logged in users can use these files:
admin.php, adminPartial1.html, adminPartial2.html

You can/need to approach this in a few ways:
when "someone" puts "/partials/adminPage1.html" you need to check in the sever side (by the service you are checking it's permissions/role) then display/redirect to the appropriate route with ReturnUrl in the query for after login redirect.
You can be more secured by downloading the routes from the server by requesting them first (per user/role/permission) from a dedicated service, but then you'll need to bootstrap your AngularJS, since routing needs to be loaded with AngularJS life cycle, so in that case you are getting the routes, building them in a provider while bootstrapping AngularJS after getting the routes from the designated service as I mentioned.
* I would suggest to simply implement option (1) which is straight forward and most commonly used. *

Multi-tenant SPA in Aurelia

I try to build a multi-tenant SPA using Aurelia where the tenant is given as:
http://myapp.example.org/tenant1
http://myapp.example.org/tenant2
http://myapp.example.org/tenant3
How can I return the same index.html for all of these urls (while being able to extract the tenant in the SPA code for Oauth2 login)?
I have made similar AngularJs solutions but then I used a "trick" by implementing a Asp.net web api that accepted a {tenant} route. Is there a simple "all Javascript" Aurelia way of doing this?

The only way to "redirect" all those pages to index without changing the URL is by doing it in the server, with a URL rewrite. The thing you did in ASP.NET MVC was exactly that.
If you want to do that only with javascript, you'll need to redirect all those pages to index and pass the tenant as a parameter. For example:
location.href = location.host + "/?tenant=" + location.search;
The problem here is: by doing that, you'll really need all those tenant pages phisically, what I suppose it's not what you want.
There is another try: you can also make a default 404 page and then make that redirect from there, but you'll throw an 404 error to the client, what I don't think it's good at all.
So, if you're using IIS or any other server, you should just do a rewrite and everything is gonna be ok.
If you're using NodeJS or .NET you can see how to do it directly from the Aurelia's documentation.
http://aurelia.io/docs.html#configuring-push-state

AngularJS - Best Way to Handle State on Manually Entered URLs

I currently have a set-up based on the meanjs stack boilerplate where I can have users logged in this state of being 'logged-in' stays as I navigate the URLs of the site. This is due to holding the user object in a Service which becomes globally available.
However this only works if I navigate from my base root, i.e. from '/' and by navigation only within my app.
If I manually enter a URL such as '/page1' it loses the global user object, however if I go to my root homepage and navigate to '/page1' via the site. Then it's fine, it sees the global user object in the Service object.
So I guess this happens due to the full page refresh which loses the global value where is navigating via the site does not do a refresh so you keep all your variables.
Some things to note:
I have enabled HTML5Mode, using prefix of '!'.
I use UI-Router
I use a tag with '/'
I have a re-write rule on express that after loading all my routes, I have one last route that takes all '/*' to and sends back the root index.html file, as that is where the angularjs stuff is.
I'm just wondering what people generally do here? Do they revert the standard cookies and local storage solutions? I'm fairly new to angular so I am guessing there are libraries out there for this.
I just would like to know what the recommended way to deal with this or what the majority do, just so I am aligned in the right way and angular way I suppose.
Update:
If I manually navigate to another URL on my site via the address bar, I lose my user state, however if I manually go back to my root via the address bar, my user state is seen again, so it is not simply about loosing state on window refresh. So it seems it is related to code running on root URL.
I have an express re-write that manually entered URLs (due to HTML5 Location Mode) should return the index.html first as it contains the AngularJs files and then the UI-Route takes over and routes it properly.
So I would have expected that any code on the root would have executed anyway, so it should be similar to navigating via the site or typing in the address bar. I must be missing something about Angular that has this effect.
Update 2
Right so more investigation lead me to this:
<script type="text/javascript">
var user = {{ user | json | safe }};
</script>
Which is a server side code for index.html, I guess this is not run when refreshing the page to a new page via a manual URL.
Using the hash bang mode, it works, which is because with hash bang mode, even I type a URL in the browser, it does not cause a refresh, where as using HTML5 Mode, it does refresh. So right now the solution I can think of is using sessionStorage.
Unless there better alternatives?
Update 3:
It seems the best way to handle this when using HTML5Mode is that you just have to have a re-write on the express server and few other things.

I think you have it right, but you may want to look at all the routes that your app may need and just consider some basic structure (api, user, session, partials etc). It just seems like one of those issues where it's as complicated as you want to let it become.
As far as the best practice you can follow the angular-fullstack-generator or the meanio project.
What you are doing looks closest to the mean.io mostly because they also use the ui-router, although they seem to have kept the hashbang and it looks like of more of an SEO friendly with some independant SPA page(s) capability.
You can probably install it and find the code before I explained it here so -
npm install -g meanio
mean init name
cd [name] && npm install
The angular-fullstack looks like this which is a good example of a more typical routing:
// Server API Routes
app.route('/api/awesomeThings')
.get(api.awesomeThings);
app.route('/api/users')
.post(users.create)
.put(users.changePassword);
app.route('/api/users/me')
.get(users.me);
app.route('/api/users/:id')
.get(users.show);
app.route('/api/session')
.post(session.login)
.delete(session.logout);
// All undefined api routes should return a 404
app.route('/api/*')
.get(function(req, res) {
res.send(404);
});
// All other routes to use Angular routing in app/scripts/app.js
app.route('/partials/*')
.get(index.partials);
app.route('/*')
.get( middleware.setUserCookie, index.index);
The partials are then found with some regex for simplicity and delivered without rendering like:
var path = require('path');
exports.partials = function(req, res) {
var stripped = req.url.split('.')[0];
var requestedView = path.join('./', stripped);
res.render(requestedView, function(err, html) {
if(err) {
console.log("Error rendering partial '" + requestedView + "'\n", err);
res.status(404);
res.send(404);
} else {
res.send(html);
}
});
};
And the index is rendered:
exports.index = function(req, res) {
res.render('index');
};

In the end I did have quite a bit of trouble but managed to get it to work by doing few things that can be broken down in to steps, which apply to those who are using HTML5Mode.
1) After enabling HTML5Mode in Angular, set a re-write on your server so that it sends back your index.html that contains the Angular src js files. Note, this re-write should be at the end after your static files and normal server routes (e.g. after your REST API routes).
2) Make sure that angular routes are not the same as your server routes. So if you have a front-end state /user/account, then do not have a server route /user/account otherwise it will not get called, change your server-side route to something like /api/v1/server/route.
3) For all anchor tags in your front-end that are meant to trigger a direct call to the server without having to go through Angular state/route, make sure you add a 'target=_self'.

AngularJS and Handling 404 Errors

What is the best way to serve up proper 404's with an AngularJS app?
A little background: I'm building an Angular app and have opted to use
$locationProvider.html5Mode(true);
because I want the URLs to appear natural (and indistinguishable from a multi-page "traditional" web app).
On the server side (a simple Python Flask app), I have a catch-all handler that redirects everything to the angular app:
#app.route('/', defaults={'path': ''})
#app.route('/<path>')
def index(path):
return make_response(open('Ang/templates/index.html').read())
Now, I'm trying to figure out what to do with 404 errors. Most of the Angular apps I've seen do the following:
.otherwise({ redirectTo: '/' })
which means that there is no way they can serve up a proper 404.
However, I would much rather return a proper 404, with a 404 status code (mainly for SEO purposes).
What is the best way to handle 404s with Angular? Should I not worry about it and stick with a catch-all? Or should I remove the catch-all and serve up proper 404's on the server side?
edited for clarity

I think you are confusing Flask routes with Angular routes.
The 404 error code is part of the HTTP protocol. A web server uses it as a response to a client when the requested URL is not known by the server. Because you put a catch-all in your Flask server you will never get a 404, Flask will invoke your view function for any URLs that you type in the address bar. In my opinion you should not have a catch-all and just let Flask respond with 404 when the user types an invalid URL in the address bar, there is nothing wrong with that. Flask even allows you to send a custom page when a 404 code is returned, so you can make the error page look like the rest of your site.
On the Angular side, there is really no HTTP transaction because all the routing internal to the application happens in the client without the server even knowing. This may be part of your confusion, Angular links are handled entirely in the client without any requests made to the server even in html5mode, so there is no concept of a 404 error in this context, simply because there is no server involvement. An Angular link that sends you to an unknown route will just fall into the otherwise clause. The proper thing to do here is to either show an error message (if the user needs to know about this condition and can do something about it) or just ignore the unknown route, as the redirectTo: '/' does.
This does not seem to be your case, but if in addition to serving the Angular application your server implemented an API that Angular can use while it runs, then Angular could get a 404 from Flask if it made an asynchronous request to this API using an invalid URL. But you would not want to show a 404 error page to the user if that happened, since the request was internal to the application and not triggered by the user directly.
I hope this helps clarify the situation!

After playing around for a bit, as well as some discussions with Miguel, I compiled a few different solutions:
Just use a catch-all and don't worry about proper 404's. This can be set up with server-side code (like in my original solution), or better, with URL re-writing on your web server.
Reserve a certain section of your site for your angular app (like /app). For this section, set up a catch-all and don't worry about proper 404's. Your other pages will be served up as regular pages and visiting any invalid URL that doesn't start with /app will result in a proper 404.
Continuously make sure that all of your routes in app.js are mirrored in your server-side code (yes, pretty annoying), where you'll have those routes serve up your angular app. All other routes will 404.
P.S. The second option is my personal favorite. I've tried this out and it works quite well.

This is an old thread, but I cam across it while searching for the answer.
Add this to the end of your appRoutes.js and make a 404.html view.
.when('/404', {
templateUrl: 'views/404.html',
controller: 'MainController'
})
.otherwise({ redirectTo: '/404' })

I think that a real http 404 is going to be pretty useless "for SEO purposes" if you are not serving usable non-javascript content for real pages of your site. A search indexer is unlikely to be able to render your angular site for indexing.
If you are worried about SEO, you will need some sort of server side way to render the content that your angular pages are rendering. If you have that, adding 404s for invalid URLs is the easiest part of the problem.

Here is the best way to handle the error and works nicely
function ($routeProvider, $locationProvider, $httpProvider) {
var interceptor = [
'$rootScope', '$q', function (scope, $q) {
function success(response) {
return response;
}
function error(response) {
var status = response.status;
if (status == 401) {
var deferred = $q.defer();
var req = {
config: response.config,
deferred: deferred
};
window.location = "/";
}
if (status == 404) {
var deferred = $q.defer();
var req = {
config: response.config,
deferred: deferred
};
window.location = "#/404";
}
// otherwise
//return $q.reject(response);
window.location = "#/500";
}
return function (promise) {
return promise.then(success, error);
};
}
];
$httpProvider.responseInterceptors.push(interceptor);
});
// routes
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/404', {
templateUrl: '/app/html/inserts/error404.html',
controller: 'RouteCtrl'
})
.when('/500', {
templateUrl: '/app/html/inserts/error404.html',
controller: 'RouteCtrl'
})
......
};