AngularJS RouteProvider and ExpressJS sendfile - angularjs

In my Angular app, I'm trying to render partials that load into the index page when a user clicks a link. It worked fine before with the following code:
//app.js in Angular
angular.module('myApp', [
'ngSanitize',
'ngRoute',
...
]).
config(['$routeProvider', '$locationProvider', '$sceDelegateProvider', function($routeProvider, $locationProvider, $sceDelegateProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MainController'});
$routeProvider.when('/File/:fileID', {templateUrl: 'partials/currentFile.html', controller: 'FileController', controllerAs: 'file'});
$routeProvider.otherwise({redirectTo: '/view1'});
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://www.url.com/**']);
$locationProvider.html5Mode(true);
}]);
But when I add Express, it doesn't work:
var express = require("express");
var logfmt = require("logfmt");
var app = express();
app.use(logfmt.requestLogger());
app.use(express.static(__dirname + '/app'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.get('*', function(req, res) {
res.sendfile('./app/index.html');
});
This works fine if I just want to display the index page. When I add the following code though, it displays the plain HTML (of the partial), but without the CSS or Javascript.
app.get('/partials/currentFile.html', function(req, res) {
res.render('./app/partials/currentFile.html');
});
How do I go about rendering a partial with Express in a way that works with Angular?
I've tried looking at the Express api for get(), render and sendfile, but they weren't that helpful in my situation. Other users have asked a similar question on here before, but they usually involve another file that Express routes to and I'm wondering if I can do it without adding any extra files since it's already an issue with adding just a file to include Express.
The currentFile.html doesn't load any CSS or Javascript itself. Before I added Express, it was a partial that was loaded in index.html, which loaded all the extras.
Any help is appreciated. Thank you

I didn't fix the problem directly, but I worked around it. The problem was that I wanted to render a partial onto the index page. The overarching goal of the app is a single-page application, so in the end, it's just one page that matters.
It would have been nice to have different partials to render for testing, but alas nobody seems to know either what I'm asking or I'm complicating the issue. Either way, I've found a way around it by just getting rid of all the other partials and just redirecting all URL requests to the single page app.
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MainVideoController'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.when('/file', {templateUrl: 'partials/currentFile.html', controller: 'FileController', controllerAs: 'file'});
$routeProvider.otherwise({redirectTo: '/file'});
...
Note that the partials view1 and view2 DO NOT work when trying to visit domain.com/view1 or /view2.

Related

Error 404 when serving files in angularjs and node app

I have
<base href="/!#/">
at the top of my index.html file. When I go to URL http://localhost:5000/ everything works fine, it instantly add #!/ so the URL is http://localhost:5000/#!/ and page display as expected.
At the server side I have following code which should allow me to use my files
app.use(express.static(path.join(__dirname, 'public')));
Structure of my files is something like:
bookApp(folder)
server.js
public(folder)
index.html
app.js(ngRoute)
views(folder)
css(folder)
controllers(folder)
and my AngularJS routing is:
(function () {
'use strict';
angular
.module('app', [
'ngRoute'
])
.config(config);
function config ($routeProvider) {
$routeProvider
.when('/', {
controller: 'PostsCtrl',
templateUrl: 'views/posts.html'
})
.when('/register', {
controller: 'registerCtrl',
templateUrl: 'views/register.html'
})
.when('/login', {
controller: 'loginCtrl',
templateUrl: 'views/login.html'
})
.otherwise('/');
}
})();
The very first page (views/posts.html) load as expected but when I click
<li>Sign in</li>
the URL is http://localhost:5000/login not as like I thought http://localhost:5000/!#/login.
and it display:
Cannot GET /login
when I manually change URL to http://localhost:5000/#!/login it works fine.
How to fix this behavior?
The only solution I see is to get rid of <base> tag and in every link manually in href directive add !# before slash.
It looks like you are forgetting the ng-view directive: <div ng-view></div> which is the container for the content that is provided by your routing. Place this above your script if you have everything contained in one file.
You can also try:
<ng-view></ng-view>
<div class="ng-view"></div>
Is there any particular reason you are still using Angular 1? I know this isn't technically answering your question, but I would highly recommend that you start using the latest Angular. You can still keep legacy code but it will make a lot of what you are doing a lot cleaner and clear.

while reloading angular page getting error as cannot GET/page.html

There is no a clear solution for my below question in stackoverflow, i have searched for many but its not suitable
note: am not using GRUNT
Actually am developing a application using Node and Angular,
while using angular-route to route a page from application its working fine, but reloading browser shows me Cannot GET /secure/home
app.js
var myApp = angular.module('Whizzrd', ['ngRoute']).
config(['$routeProvider', '$locationProvider', '$httpProvider', function($routeProvider, $locationProvider, $httpProvider) {
$routeProvider.
when('/secure/home', {
templateUrl: '/pages/static/home.html',
controller: 'homeController'
});
$locationProvider.html5Mode({enabled: true, requireBase: false});
}]);
moving through home.html through application is working fine, but while reloading the page using browser am getting error as
Cannot GET /secure/home
Am stuck with this for more than 2 days, Help will be appreciated really

Angular Js is removing Sub-Directory from URL

I have installed my Angular App in a location like this:
http://example.com/my-app
My App routing is like this:
var myApp = angular.module('myApp', ['ngRoute','ngAnimate', 'ui.bootstrap', 'angularFileUpload']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/templates', {
controller: 'TemplatesController',
templateUrl: '/components/com_myApp/myApp/views/templates/template-list.html'
})
.when('/apps', {
controller: 'AppController',
templateUrl: '/components/com_myApp/myApp/views/apps/app-list.html'
})
.otherwise({
redirectTo: '/templates'
});
}]);
Now what happens is, when I go to http://example.com/my-app, the url instead of showing http://example.com/my-app#/templates it is showing as http://example.com/templates
It seems the otherwise condition is basically removing the base directory my-app# from the url. I have been scratching my head over this and after reading I also tried adding base url to head tag and tried changing the myApp.config to this:
myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
....
}
But although the routing seems to work when using $locationProvider like the above, the base url is still not showing the way I want it. The url is showing like this http://example.com/templates without my-app in the url path. I dont want Angular to remove the base path from the URL and I want the urls to show like this http://example.com/my-app/..xyz...
Why is Angular doing this?
This is happening because you've instructed Angular to not use hashbang URLs by specifying $locationProvider.html5Mode(true). Remove or otherwise comment out that code snippet and if you specified <base href="/"> in your root template file, remove or comment out that also and just use ngRoute without those.

Angularjs - how to clear $routeProvider's caches of templateUrl

I have really basic use case in my app where I use AngularJS (1.0.8) for front end and Grails for back end. In the app layout I have a language switcher which allows the user to change the language. Switching the language, it does new http request to retrieve the page. Grails renders all language related stuff (i.e. labels) properly translated. This only works for Chrome, FF, and so but not for IE. IE renders proper language just for layout which is rendered by the main request.
I located the problem. I have defined $routeProvider where I load major of the app content. It is cached by default, therefore IE doesn't load templateUrl of $routeProvider because it loads them from cache:
myApp.config(function ($routeProvider) {
$routeProvider.
when('/', {controller: 'MyCtrl', templateUrl: '/eshop/myConfig'})
});
What I don't get is why it works in all other browsers.
I found some post how to clear cache but they doesn't work for me. Is there any solution for me? If not, I find $routeProvider completely useless for my use case.
Post I found:
angularjs clear history when view loaded
AngularJS disable partial caching on dev machine
Below should do it. You can manipulate angularjs's template caches by using $templateCache, so $routeProvider will load the template as new every time you access the controller.
myApp.config(function ($routeProvider) {
$routeProvider.
when('/', {controller: 'MyCtrl', templateUrl: '/eshop/myConfig'})
})
.controller('MyCtrl', function ($scope, $templateCache) {
$templateCache.remove('/eshop/myConfig');
// or
$templateCache.removeAll();
});
I was having the same issue with $routeProvider. And yes, the $templateCache does not help in this situation. Instead of keeping finding the real 'cache' source, I added the stamp parameter after the templateUrl.
In my code:
$routeProvider.
when('/', {templateUrl: '../views/home.html?v='+window.buildNumber, controller: 'HomeCtrll'}).
when('/report', {templateUrl: '../views/form.html?v='+window.buildNumber, controller: 'FormCtrll'}).
otherwise({redirectTo: '/'});
Sadly, I used a global variable "buildNumber" to save my life. Because I also use RequireJS for my AngularJS project, so this "buildNumber" will also be added to every dependency JS file by using the code:
require.config({
urlArgs: "v=" + window.buildNumber,
paths: {....}
});
Then every time the JS source or template html has been changed, I will only need to update that "buildNumber" in global scope. This is just a thought for the future updates in production environment. Hope this helps.
So the only solution I found was to completely disable cache for ajax queries. I found the solution here: https://stackoverflow.com/a/19771501/607038
myModule.config(['$httpProvider', function($httpProvider) {
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
//disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
}]);
I don't like this solution because it disable cashing for the content which is really static. So if you have better solution than share it.

Routing in subdirectory in Angular.js

Is it possible to develop an Angular.js application in a way that would be abstracted from the the web directory path in which it will be deployed?
I am trying to put an Angular.js app in a web server subdirectory http://example.com/myproject/, but the router redirects me to the web server root -- http://example.com.
Below is my Angular.js app:
var myproject = angular.module('myproject', []);
myproject.config(function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {templateUrl: 'partials/index.html', controller: IndexCtrl}).
otherwise({redirectTo: '/'});
$locationProvider.html5Mode(true);
});
function IndexCtrl($scope, $location) {
}
Try setting a <base href="/sudirectory"/> in your <head></head>. That's what I needed to do to get mine working, IIRC
Word of caution: This will mess with any anchor tags that have href="#", as well as act as the root for image srcs and the like.

Resources