angular.js Routing doesn't work on the server - javascript

I'm using ngRoute in my site, it work well on my computer (local) but on the server routing doesn't work. On my computer all my files are html, on the server i rename them as php. How can i fix it?
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider, $compileProvider) {
$routeProvider
.when("/", {
templateUrl : "pages/main.php",
controller: 'oneCtrl'
})
.when("/about", {
templateUrl : "pages/about.php"
})
.when("/news", {
templateUrl : "pages/news.php"
})
});

Based on the error messages you're getting (as you said in the comments), the Angular library is not being loaded. Double-check the URL. Also in the browser dev tools, check the Network tab and see what error it shows. Probably a 404 not found.
After checking your website and the line where you said the error was occurring (line 156 of route.js), change your code to this:
$('.counter-one span').eq(0).html(value1 + ' ');
$('.counter-two span').eq(0).html(value2 + ' ');
You did a search/replace for "html" to "php" but that also replaced the jQuery html() command. Just fix these two lines and you should be good.

Related

$rootScope.$broadcast is failing when fallback language is set

Implementing localization in angular app.
In app.js, written below code to support fallback language , if required .json files not present in the specific {{de-DE}}\ folder. (Taken german for example)
function configure($routeProvider, $locationProvider, $translateProvider, $httpProvider, $compileProvider) {
$routeProvider
.when('/instructions', {
templateUrl: "app/instructions/Instructions.html",
resolve: {
translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
$translatePartialLoader.addPart('instructions');
$translatePartialLoader.addPart('common');
//$translatePartialLoader.addPart('instructions').then(function (data) {
//console.log(data);
//});
//$translatePartialLoader.addPart('common').then(function (data) {
// console.log(data);
//});
$translateProvider.fallbackLanguage("en-US");
return $translate.refresh();
}]
}
})
.otherwise(
{
redirectTo: redirectTo
});
$httpProvider.useApplyAsync(true);
//$locationProvider.html5Mode(true);
$translateProvider.preferredLanguage($("#CultureCode").val());
$translateProvider.fallbackLanguage('en-US');
}
After changing my browser setting to german (google chrome). Files were not found, so it had to fallback. With the above code, my fallback language was english. So app downloaded .json files from {{en-US}}\folder.
But the actual problem is.
Once all the code excecutes , in one place i have written.
$rootScope.$broadcast("SHIFT_CHANGED");
And subscribing for the event like below.
$scope.$on("SHIFT_CHANGED", function() {
loadInstructions();
});
Here load instructions in my main method. Which is not getting executed because. Shift_changed events is not getting fired.
For testing purpose as soon as i paste those .json files in german folder. App starts working. But am trying to implement fallback.
I tried few code which is commented for refrence above. addpart trying to resolve for promise.
But none of them worked.
Am i missing some thing. And no error in console.
clueless to figure out.Any ideas to troubleshoot further / Is really some code is missing.
Please help.
Thanks in Advance

Angular Routing templateUrl with Express backend not working

I am having an issue getting a partial to display using angular routing and express. I am trying to set things up so I can still use pug (formerly jade) to write shortform html. As far as I can tell, everything should be working, no errors, everything is pulling correctly. I have most other portions of the application working (api calls, controllers, etc.) My main page is as follows:
doctype html
html(ng-app='myapp')
head
base(href='/')
script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js")
script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.js")
body
header#main
.content(ng-view)
script(src="/js/app.js")
script(src="/js/controllers/adminController.js")
script(src="/js/routes.js")
Here is my routes file
angular.module('myapp')
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/admin', {
templateUrl: '/templates/admin',
controller: 'AdminController',
caseInsensitiveMatch: true
})
.otherwise({
template: '<h1>Page not found</h1>'
})
;
$locationProvider.html5Mode(true);
});
And finally, the express route:
router.get('/templates/:name', function(req, res, next) {
var name = 'templates/' + req.params.name;
console.log('Express: ' + name);
res.render(name, function(err, html){
//this callback function can be removed. It's just for debugging.
if(err)
console.log("Error: " + err);
else
console.log("We're good!");
res.send(html);
});
});
Lastly, here is the node server output:
Express: index
GET /admin 304 68.962 ms - -
GET /js/app.js 304 0.994 ms - -
GET /js/controllers/adminController.js 304 0.751 ms - -
GET /js/routes.js 304 14.590 ms - -
Express: templates/admin
We're good!
GET /templates/admin 304 368.081 ms - -
As you can see, the index loads, calls the partial, and the template is getting called and rendered just as you would expect.
The problem is ng-view is not getting replaced or updated. It all works just fine if I change the route to template instead of templateUrl, and just print out a line of text, so I know routing is working and this isn't an app configuration issue.
I've been stuck on this for a few days, and without any error messages, I am completely in the the dark as to why this doesn't work.
Additionally, when I check the following in my controller, I get the partial, so it is coming through properly:
angular.module('buriedcinema.controllers')
.controller('AdminController', ['$templateCache', function(Movies, Users, $templateCache){
console.log($templateCache.get('templates/admin'));
}
console:
<h1> this is my partial </h1>
Fixed by adding "controllerAs:" option to my routing and referring to my controller by the object name.
.when('/admin', {
templateUrl: 'templates/admin',
controller: 'AdminController',
controllerAs: 'adminCtrl',
caseInsensitiveMatch: true
})
The more technical explanation is that I wasn't instantiating an object with state, but trying to use my controller statically so it never updated. Hope this can help someone else.

Angularjs routing doesnt work when reloading the page manually

I am trying to reload the page mannually from the browser but it doesn't work and says
Cannot GET /rate/4
My route:
angular.module('routing')
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/views/index.html'
})
.when('/rate/:cid', {
templateUrl: 'app/views/rate.html'
})
.otherwise({
'redirectTo': '/'
});
$locationProvider.html5Mode(true);
});
My assumption is that when I am reloading the main (index.html) is not loaded which is my base html file.
You do not have an angular problem, you have a server problem.
You're essentially working with a single page application.
When the server receives a request for rate/4 it must return index.html (or whatever the name that your main page is).
How you solve this will depend upon what platform you've implemented your server in.
For example, if you were running a node express server, you would have this kind of routing code:
app.get(/^\/rate\/.*/, function(req, res) {
// This matches a known pattern for a client-side route
res.sendFile(__dirname + '\\public\index.html');
});

express + angularjs : app hangs on invalid url

I am facing a weird issue with angular and express,
I have a very simple routing on app.js as below :
app.get('/partials/:name', routes.partials);
app.get('*', routes.index);
also this is on my angular routerprovider :
$routeProvider.
when('/', {
templateUrl: '/partials/home'
}).
when('/contact', {
templateUrl: '/partials/contact'
}).
otherwise({
templateUrl: '/partials/error'
});
now the problem is, if I enter below invalid url, it goes to error page [OK]
http://www.devnest.io/someInvalidpath // it will go to /partials/error
But if I enter an invalid url with two level path (or more) page will hang [NOT OK]
http://www.devnest.io/someInvalidpath/AnotherInvalidPath // page will hang without error
and in the developer tools, it likes infinite loop and page call, like this picture :
also there is no error on node.js or angular ...
I am really confused, can anyone help me, on which part my routing is not correct ?
Thanks,
Try
app.use(routes.index);
instead of
app.get('*', routes.index);

Angular Js RouteProvider

I am using $routeProvider service in my angular js but problem is on templateURl it provides me error
from server here is the error what i received
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
angular.js:11594 Error: [$compile:tpload] Failed to load template: /Testing/TestCompleted
and here is my angular code for app.js
var app = angular.module('app', ['ngRoute']);
app.controller('CreateController', CreateController);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: "/Testing/TestCompleted",
controller:"AppCtrl"
})
});
app.controller("AppCtrl",function ($scope) {
$scope.newmodel = {
}
});
I found the solution the view is only returned by server by using route we can only get html view not cshtml because that is provided when action is called.
The url is giving a ERROR 500. This is that there is something wrong in de code of the page. Please attach your debugger and go to the url "/Testing/TestCompleted" with a browser and check what is wrong.
Edit:
If the url is really the right one. Please try the following:
angular.module('app', ['ngRoute'])
.controller("AppCtrl",function ($scope) {
$scope.newmodel = {}
})
.config(function ($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: "/Testing/TestCompleted",
controller:"AppCtrl"
})
});
So that the controller is registerd before you do your config as in the example from Angular (https://docs.angularjs.org/api/ngRoute/service/$route).
The address of the template is likely wrong. I never had to use a format such as '/....' .
You probably want 'Testing/TestCompleted' if the directory Testing is at the root of your project (or './Testing/TestCompleted' both should work).
EDIT:
In any case you are probably using an html file for the template, with an extension .html . So use 'Testing/TestCompleted.html' for instance.

Categories