On the link below, I have an application with some route problem and I can't figure out why this is happen. I'm using Node.js to configure a http-server.
When I try to access localhost:8080/#home, nothing happens.
However, when I configure a "redirect to", the application open in a link like this: "...:8080/#home!#home"
https://github.com/tvbuosi/AngularJS
angular.module('meuModulo',['ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'templates/home.html',
controller: 'indexController'
})
.when('/contato', {
templateUrl: 'templates/contato.html'
})
.otherwise({
redirectTo: '/home'
});
});
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!
I have a symfony application which works in a subdirectory:
www.example.com/subdirectory
At this point my application is routed client side with angularjs-framework:
app.config(["$routeProvider", function($routeProvider) {
$routeProvider.
when('/', {
redirectTo: '/homepage'
}).
when('/homepage', {
templateUrl: 'index1.html',
controller: 'HomepageCtrl'
}).
when('/contact', {
templateUrl: 'index2.html',
controller: 'ContactCtrl'
}).
otherwise({
redirectTo: '/homepage'
});
}]);
When the site is loaded:
www.example.com/subdirectory
it automatically changes to:
www.example.com/subdirectory#/homepage
But it should be
www.example.com/subdirectory/#homepage
Anybody could help me to get this working?
Thanks and greetings!
For changing the base URL of your application you could use <base href="/subdirectory/"> inside your head tag of page.
But as per your $routeProvider setting the remaining part of URL seems OK to me. If you really wanted to change it then you need to replace
/homepage
with
homepage
in config phase of angular.
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 have 2 urls /dev and /app. My angular routes is as follows
$routeProvider.
when('/home', {
templateUrl: 'homeTemp',
controller: 'homeCtrl',
}).
when('/home/:pageId', {
templateUrl: 'homeTemp',
controller: 'homeCtrl'
}).
when('/apps', {
templateUrl: 'devTemp',
controller: 'devCtrl',
}).
when('/app/:appId', {
templateUrl: 'devAppTemp',
controller: 'devCtrl'
}).
otherwise({
redirectTo: '/home'
});
Now when my url is /dev#/apps it loads the dev controller and when it's /apps#/home it loads the home controller
What change do I need to add in my routes so that when the url is just /dev it loads the dev controller
Currently because of the otherwise it redirects to /dev#/home
You could create a root level controller that just checks the url and redirects you as needed.
In your $routeProvider add
when('/', {
controller: 'isDevCtrl',
template:""
})
Then in isDevCtrl look at the url and redirect accordingly
yourApp.controller("isDevCtrl", function($location){
if($location.path() == '/dev'){
$location.path("/apps")
}else{
$location.path("/home")
}
});
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.