angularjs ngroute and htaccess rewrite - angularjs

I am wondering how to work angularjs ngRoute and htaccess rewrite together.
I have ngRoute working so I get URLs like these:
http://domain.com/#/something/somestring
But I would very much like this result:
http://domain.com/something/somestring
In other words, I'd like to get rid of /# in my URLs.
I've done this before with .htaccess and mod_rewrite.c and PHP, but I have no clue how to achieve the same result with AngularJS.
Any pointers, tutorial-links, articles, etc. that explains how this can be done, or simply an example would be greatly appreciated.
A few requirements:
I should still be able to do my routing the same way I've done so far:
blogApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page/:pagePermaLink', {
templateUrl: './assets/templates/page.html',
controller: 'pageCtrl'
}).
when('/article', {
templateUrl: './assets/templates/article.html',
controller: 'articleCtrl'
}).
otherwise({
redirectTo: '/home',
templateUrl: './assets/templates/page.html',
controller: 'mainCtrl'
});
}]);
The URL query string, like :pagePermaLink should still be accessible from the scope:
blogCtrl.controller('pageCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
var foo = $routeParams.pagePermaLink;
// ...
}]);

If you've already done your rewrites, you should just be able to set $locationProvider.html5Mode(true). See https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
Also, similar stack overflow questions might be of assistance:
Angular Direct Url without hash
$location / switching between html5 and hashbang mode / link rewriting

Related

Retrieve userId from url with AngularJs

I'm learning AngularJs at present and I've hit a brick wall due to my lack of knowledge on it.
What I'm trying to do is pass in a Id (guid) within the URL and inside my controller I'll retrieve it and pass it to a WebApi to return some data linked to that Id.
However I'm unable to get the route correct, my currently URL looks like this:
http://localhost:15216/
When I pass in the Id it will look something like this
http://localhost:15216/573637
Quite straight forward, my page is called index.html, after browsing the web and looking at this question and basically replicating what he/she has provided I'm still unable to retrieve the value from my URL.
This is my current configuration:
var myApp = angular.module('christmasvip', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/:userId', { templateUrl: '/index.html', controller: 'mainController' }).
otherwise({ redirectTo: '/index.html' });
}]);
And this is my Controller:
myApp.controller("mainController", function ($scope, $http, $routeParams) {
var userId = $routeParams.userId;
alert(userId);
});
I then manipulate the URL so it would look like :
http://localhost:15216/573637
But when I alert the userId it say's "underfined"
I've also included angular-route.js in my project
Any help/solution would be great.
In the documentation of ngRoute you can find an example... Try using the URL: http://localhost:15216/index.html#/573637
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
Can you try the url
http://localhost:15216/#/573637
I assume your root is http://localhost:15216/
your confusing the $routeProvider in the config you say
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/:userId', { templateUrl: '/index.html', controller:'mainController' }).
so your telling it, "if we see any url like this '/anything' take 'anything' and supply it as a parameter to the $routeParam service
then you add
otherwise({ redirectTo: '/index.html' });
which tells it, if you get any other url redirect to "/index.html", but index.html is something so its going to want to route you to '/' with the route param as 'index.html'
also you need to make sure you have <ng-view></ng-view> inside of your index.html file for the $routeProvider to load the route correctly, that is probably your main issue, but the first thing i mentioned would probably be an error once you add it.

Override AngularJS route to display template based on $scope variable

Using Angular I have a dozen or so routes setup similar to the following example code.
Is there a way to override which template and controller is loaded based on some other criteria while keeping the URL in tact? My goal is to display a login page when... lets say $scope.isLoggedIn = false. I don't want to change the URL to /login.
SomeApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/place', {
templateUrl: 'routes/place.html',
controller: 'PlaceCtrl'
})
.when('/test', {
templateUrl: 'routes/test.html',
controller: 'TestCtrl'
});
}]);
ngRoute is a very simple library that can basically only maps urls to controller/views. If you want more flexibility, try ui-router which has the ability to route based on state.
This isn't really doable with ngRoute, but with ui-router you can dynamically provide different templates based on just about anything you want.
$stateProvider.state('root',
url: '/'
controller: 'HomePageController'
templateProvider: [
'$rootScope'
'$templateCache'
'$http'
($rootScope, $templateCache, $http) ->
templateId = if $rootScope.isLoggedIn then "home-page-logged-in" else "home-page-not-logged-in"
templateId = "/templates/#{templateId}.html"
return $http.get(templateId, cache: $templateCache)
]
)
The catch is, as far as I know, you can't change the controller, only the template. Which kinda stinks.

Angular routing was ignored

I have module Board with routes:
#Board.config ($routeProvider, $httpProvider,$locationProvider)->
# Code
$routeProvider
.when '/boards/:board_id/topics/new', {
templateUrl: (p) -> "/boards/#{p.board_id}/topics/new"
controller: 'TopicsNewCtrl'
}
.when '/boards/:board_id', {
templateUrl: (p) -> "/boards/#{p.board_id}"
controller: 'BoardsShowCtrl'
}
.when '/boards', {
templateUrl: "/boards"
controller: 'BoardsShowCtrl'
}
When I go to /boards/common, controller BoardShowCtrl executed correctly, but when I go to /boards/common/topics/new request goes directly to my Rails backend instead of angular routing. Here is my controller:
#Board.controller 'TopicsNewCtrl', [
"$scope"
"$routeParams"
"$http"
"topicsFctr"
($scope, $routeParams, $http, topicsFctr) ->
$scope.board_id = $routeParams.board_id
]
I can't find an error in my code, it works with other controllers and templates. If you need some additional data - just ask.
Thank you for your answers!
P.S. Sorry for my English. It is so bad, I know :)
Resolved! There was another module with routing, matches my urls. It was so simple... and so stupid.

Route Parameters in AngularJS

I'm working on an Angular.js application. It has 7 "pages" that make up a report about backlinks. The main url looks like http://www.site.com/report/# so the first route below '/' points to that URL.
My problem is I want to have the report ID in the url. So something like this. http://www.site.com/report/#/:reportId or http://www.site.com/report/#/99DF82A023FCE3515BE9A18F00908939F5A29D14.
I need to access that ID and store it somehow for each page. So on http://www.site.com/report/#/live I still need access to reportID.
Im sure this is a simple thing but Im an Angular noob. Can someone point me towards a tutorial for this? Here's what I have so far.
'use strict';
// Declare app level module which depends on filters, and services
var ultModule = angular.module('ultimate-report', ['ngRoute', 'ngCookies', 'ngTable', 'ultimate.filters','ultimate.services','ultimate.directives','myApp.controllers', 'ultimate.config']);
ultModule.config(['$routeProvider', function($routeProvider, $routeParams) {
$routeProvider
.when('/', {templateUrl: '../partials/report/about.html', controller: 'CtrlReport'})
.when('/live', {templateUrl: '../partials/report/links-live.html', controller: 'CtrlLinksLive'})
.when('/dead', {templateUrl: '../partials/report/links-dead.html', controller: 'CtrlReport'})
.when('/selected', {templateUrl: '../partials/report/links-selected.html', controller: 'CtrlReport'})
.when('/patterns', {templateUrl: '../partials/report/patterns.html', controller: 'CtrlReport'})
.when('/exports', {templateUrl: '../partials/report/export.html', controller: 'CtrlReport'})
.when('/help', {templateUrl: '../partials/report/help.html', controller: 'CtrlReport'})
.otherwise({redirectTo: '/'});
}]);
So do you really want the other urls (e.g. http://www.site.com/report/#/live) to not have the report id in them? It would be a lot easier/shorter if you had the parameters in each adress (e.g. http://www.site.com/report/#/12334223287/live).
Nonetheless, I would create my own service ('ReportID') that just stores the report ID. And then include both $routeParams and ReportID (your service) as dependencies in your controller.
app.controller('CtrlReport', ['$routeParams', 'ReportID', '$scope'],
function($routeParams, ReportID, $scope){
ReportID.id = $routeParams.reportID;
})
and set up your route as such
.when('/report/:reportID', ...)
Angular ui-router is a great extension to Angular.js that makes it easy to handle route parameters, nested views etc.
As others have pointed out, keeping the ID in the url for all pages is a good idea - without that people cannot bookmark the page and go straight back to viewing the same item in the same view.

$location hash prefix

I'm just starting out with Angular, so this might be a common newbie mistake but I am trying to achieve the following url format:
http://myapp.localhost/index.html#!/about
Which I believe should be the default for Angular?
This is my configuration:
angular.module('App', []).config(function($routeProvider, $locationProvider, VIEWS_ROOT) {
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix = '!';
// Routing
$routeProvider.when('/', {templateUrl: './welcome.html', controller: 'WelcomeController'});
$routeProvider.when('/about', {templateUrl: './about.html', controller: 'AboutController'});
})
.run(function($rootScope) {
//...
});
In my html I have a simple anchor like so:
About
However when I click that anchor, the resulting URL constructed is:
http://myapp.localhost/index.html#/!/about
Which obviously fails to match any of my routes... a bit stumped on what's actually happening here, or what I'm doing wrong. I'm running off my local Apache instance under a vhost. There's nothing going on with mod_rewrite - so it looks like Angular is doing this.
It's a method to set the hashPrefix, not a property. $locationProvider.hashPrefix('!');

Resources