I'm trying to make a routing , it's working when I just clicking on links , but when I refresh the page , browser says not found ! I'm using html5mode , also when I set the # on url and search page manually it just works! what's the problem ?
this is app.js :
app = angular.module("app", [ "ngRoute" ]);
app.config(function($locationProvider, $routeProvider) {
$routeProvider.when("/", {
templateUrl: "partials/index.html",
controller: "mainCtrl"
}).when("/index", {
templateUrl: "partials/index.html"
}).when("/person", {
templateUrl: "partials/person.html",
controller: "personCtrl"
}).when("/person/:id", {
templateUrl: "partials/personShow.html",
controller: "personShowCtrl"
}).when("/about", {
templateUrl: "/partials/about.html"
}).when("/contact", {
templateUrl: "/partials/contact.html"
}).when("/coworking", {
templateUrl: "/partials/coworking.html"
}).otherwise({
redirectTo: "/partials/person.html"
});
$locationProvider.html5Mode(true);
});
Here is excatly same question, anwsered by me:
tl;dr
You need a webserver, like Apache, Nginx or something based on Node.js and you need to redirect all your http calls to index.html
Related
My team and I are developing a muli-page MVC application using AngularJS and DotNetNuke. In our routes.js, we point to specific controllers and templates.
Here is our routes.js code:
angular.module('SurveyWrangler').config(function ($routeProvider) {
$routeProvider
.when('', {
redirectTo: '/surveys'
})
.when('/', {
redirectTo: '/surveys'
})
.when('#', {
redirectTo: '/surveys'
})
.when('/surveys', {
controller: "SurveyIndexController",
templateUrl: "/DesktopModules/HealthPlanSurvey/templates/survey/index.html"
})
.when('/surveys/new', {
templateUrl: "/DesktopModules/HealthPlanSurvey/templates/survey/create.html",
controller: "SurveyCreateController"
})
.when('/surveys/:id', {
templateUrl: "/DesktopModules/HealthPlanSurvey/templates/survey/show.html",
controller: "SurveyShowController"
})
.when('/surveys/:id/edit', {
templateUrl: "/DesktopModules/HealthPlanSurvey/templates/survey/edit.html",
controller: "SurveyEditController"
})
.when('/surveys/:id/carryforward', {
templateUrl: "/DesktopModules/HealthPlanSurvey/templates/survey/carryForward.html",
controller: "SurveyCarryForwardController"
})
});
The link for the app is www.OURWEBSITE.com/Surveys#/surveys, but the URL changes to just ~/Surveys# when you click the link in the menu bar.
The menu bar is rendered out by DNN. This is baffling to me because from what I can tell from the code, I should be redirected back to ~/Survey#/surveys. Instead, I get a blank screen. Also, no errors in the browser console.
Thanks for any help!
When user go to either localhost:8888 or localhost:8888/, my angular application change to url to http://localhost:8888/#!/
This is my angular app in home page:
app.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
redirectTo: ((window.status === 'signup') ? '/signup' : '/signin')
})
.when("/signin", {
templateUrl: "/public/user/signin.html",
controller: "signinController"
})
.when('/signup', {
templateUrl: "/public/user/signup.html",
controller: "signupController"
})
.otherwise({
redirectTo: '/'
});
}
])
if user go to http://localhost:8888/auth, angular redirects to http://localhost:8888/auth#!/signin,
only if user go to http://localhost:8888/auth/, angular redirects to http://localhost:8888/auth/#!/signin
app.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
redirectTo: ((window.status === 'signup') ? '/signup' : '/signin')
})
.when("/signin", {
templateUrl: "/public/user/signin.html",
controller: "signinController"
})
.when('/signup', {
templateUrl: "/public/user/signup.html",
controller: "signupController"
})
.otherwise({
redirectTo: '/'
});
}
])
the angular official website and most of the books recommend using xxx/#!/xxx format. How can I do that?
Edit: I understand that I can add the trailing slash from the server side. but user can directly type xxx.com/auth.
Why is xxx.com working but not xxx.com/auth?
Edit2: the tutorial sample project works for all urls. we have pretty much the same implementation
http://angular.github.io/angular-phonecat/step-8/app/#/phones
try to enter http://angular.github.io/angular-phonecat/step-8/app (without the trailing slash
Tutorial link: https://docs.angularjs.org/tutorial/step_07
This is something you should fix on your back-end by adding a 301 redirect from /auth to /auth/.
Nginx:
rewrite ^/auth$ /auth/ permanent;
Apache:
Redirect "/auth" "/auth/" [R=301]
I got some problems using Laravel and Angular.
There my route.php
route.php
Route::group(array('domain' => 'dev.sydif.com'), function()
{
Route::get('/' , 'IndexController#index');
Route::get('/product' , 'IndexController#index');
Route::get('/aboutus' , 'IndexController#index');
Route::get('/product' , 'IndexController#index');
Route::get('/signup' , 'IndexController#index');
Route::get('/myproduct' , 'MyProductController#index');
});
My Angular modules
application.js
sydifApp.config(['$routeProvider', '$locationProvider' ,
function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'public_html/template/home.html',
controller: 'HomeCtrl',
user_role: 0
}).when('/aboutus', {
templateUrl: 'public_html/template/aboutUs.html',
controller: 'AboutCtrl',
user_role: 0
}).when('/product', {
templateUrl: 'public_html/template/product.html',
controller: 'ProductCtrl',
user_role: 0
}).when('/signup', {
templateUrl: 'public_html/template/signUp.html',
controller: 'SignUpCtrl',
user_role: 0
}).when('/myproduct', {
templateUrl: 'public_html/template/myProduct.html',
controller: 'MyProductCtrl',
user_role: 0
}).otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
So when I came first on each route it works I see the pages. However for the Controller MyProductController i put a var dump like this :
MyProductController.php
public function index()
{
var_dump('expression');
return View::make('index');
}
What is the problem : When I go to the url /myproduct it's look like the Controller MyProductController is not loaded because i can't see the var_dump(). When I refresh the pages then the var_dump is visible. I am using ng-view inside the index.php and I have separated the back-end from the front-end.
Do you have any idea why my Controller is not load first?
I try to be as clear as possible.
Thank you for your help.
I'm a newbie with AngularJS and I got a problem that I think that's it's can be configurable in my routeProvider.
I have this route
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', function ($routeProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
}
]);
the problem: When I just type http://localhost:53379 I'm redirected to http://localhost:53379/#/ . Where come from the /#/ ?
By default, AngularJS will route URLs with a hashtag.
For example:
http://domain.com/#/home
http://domain.com/#/about
You can very easy remove the hashtag from the URL by setting html5Mode to true in your config:
$locationProvider.html5Mode(true);
so in your code it will be:
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
}
]);
Just after that you have to make sure that your backed will redirect all requests to your home page if you are doing "Single Page App"
Angular adds it by default. I don't know it this is the main reason, but one reason is that the routing doesn't work in older versions of IE. I had this problem in one angularjs app that didn't work in IE9 because of this reason.
Anyways, to remove the hashtag simply add $locationProvider.html5Mode(true); after your routing-declarations.
You can read more about it here: http://scotch.io/quick-tips/js/angular/pretty-urls-in-angularjs-removing-the-hashtag
This /#/ is used to create a single page application. the # is used to prevent that the page is completely reloaded. Angular then catches the new URL and loads the correct controller and partials depending on your route configuration.
Since HTML5 it is possible to remove this behavior with $location.html5Mode(true).
Source:
AngularJS documentation
FOr my angular application , I want to use $locationProvider.html5Mode(true) to remove '#' sign from URL.
I also used but it is not working.
My index.html include "" in header section.
My app.js is as follows.
$routeProvider
.when('/signIn', {
controller: 'signInController',
templateUrl: 'html/views/sign-in.html'
})
.when('/login', {
controller: 'LoginController',
templateUrl: 'html/views/log-in.html'
})
.otherwise({ redirectTo: '/login' });
$locationProvider.html5Mode(true);
All my code (html and scripts) is under App directory. But when I am trying to run my login page is not getting loaded.