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.
Related
I developed a web app using bootstrap, angularjs. I used routeprovider to route between pages. The app was working fine when debugged using Visual Studio. The application is running well and I can route between pages. But when I load the index.html from localmachine file:///C:/Users/index.html the script file is not loaded and nothing works. I have to deploy this webapp to a mobile app using cordova.
Thanks in advance.
script.js
app.config(['$routeProvider', '$httpProvider','$compileProvider','$locationProvider', function ($routeProvider, $httpProvider, $compileProvider,$locationProvider) {
$routeProvider.
when('/web', { /* Route provider with masterpage and templates*/
templateUrl: 'templates/web.html',
controller: 'webctrl'
}).
when('/login', {
templateUrl: 'templates/login.html',
controller: 'webctrl'
}).
when('/register', {
templateUrl: 'templates/register.html',
controller: 'webctrl'
}).
when('/account', {
templateUrl: 'templates/account.html',
controller: 'accountctrl'
}).
when('/share', {
templateUrl: 'templates/share.html',
controller: 'sharectrl'
otherwise({
redirectTo: '/web'
});
$locationProvider.html5Mode(true);
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
}]);
That's the limitation of the browsers. It is intended, that HTML pages, opened form file system are not treated as a trusted source... Take it as a security
Solution:
Use web server.
Any kind. And always provide your pages as such web server requests
So I'm playing around with learning angular and trying to make a project issue tracker, only I'm having problems with ngRoute and routing.
What I'd ideally like is a system whereby (say) issuetrack.com/projectX returns a view of all the issues for projectX, and issuetrack.com/projectX/XYZ returns a view of the specific issue with the related ID (XYZ).
I've setup my config as such:
tracker.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'static/partials/index_partial.html',
}).
when('/dashboard', {
templateUrl: 'static/partials/dashboard.html',
controller: 'DashboardController'
}).
when('/404', {
templateUrl: 'static/partials/fourOHNOfour.html',
}).
when('/:project', {
templateUrl: 'static/partials/project.html',
controller: 'ProjectController'
}).
when('/:project/:issue', {
templateUrl: 'static/partials/issue.html',
controller: 'IssueController'
}).
otherwise({
redirectTo: '/404'
});
$locationProvider.html5Mode(true);
}]);
But every time I visit (say) localhost:8080/example/1 the page just hangs and becomes unresponsive. localhost:8080/example works completely fine though.
Is what I've done the right way to go about it, or is there another way my googling hasn't been able to find?
Thanks!
Fixed! After several hours...
All you need is:
<base href="/" />
In the head of the index page where the ng-view is.
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.
Hopefully I can explain this properly. On the Angular tutorial, you can use partials doing this:
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
We've all done it and it works great, but for the first time I'm using a different login.html page that doesn't have anything in common with the rest of the pages. Is there a way I can use ngRoute to setup the controller and just load the entire login.html page instead of pointing it at a partial?
i have this code for my routes. Everything works fine with these links except one link... The link without anchor
myapp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '/library2/test1.html',
controller: 'libraryController'
}).
when('/home', {
templateUrl: '/library2/test0.html',
controller: 'libraryController'
}).
otherwise({
redirectTo: '/home'
});
}]);
Works fine: /user/7/library2/#/home
Works fine: /user/7/library2/#/else
Works fine: /user/7/library2/#
Works BAD: /user/7/library2/
Is there any way to fix it?
You might be missing the hashbang concept in angular, please give a read below
$location / switching between html5 and hashbang mode / link rewriting