Develop Reference

Angular Route for specific url

I'm currently working on a MEAN stack project and am trying to get a specific template to display on a specific url.
Currently if users goto www.myurl/catalog, it loads the catalog.html template, as it would with any /catalog?catagory=productType url.
I would like it so that when users go to /catalog?category=specificProductType that it loads the catalogSpecific.html template. Currently, the catalog.html template supersedes the catalogSpecific.html template. I can't find much about this specific issue so any help would be appreciated.
Currently my routes look like this:
app/front/app.js
angular.module('app', ['ngRoute',
'app.LandingModule.controller',
'app.CatalogModule.controller',
'app.ProductModule.controller',
'app.HeaderModule.directives',
'app.FooterModule.directives'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'html/landing.html',
controller: 'LandingController'
})
.when('/catalog', {
templateUrl: 'html/catalog.html',
controller: 'CatalogController'
})
.when('/catalog?category=specificProductType', {
templateUrl: 'html/catalogSpecific.html',
controller: 'CatalogController'
})
.otherwise({
redirectTo: '/'
});
}]);

EDIT: Seems I was wrong about this not being possible with the default router. As Hadi describes in their comment, you can replace "templateUrl" with a function that returns a template url given the current route.
To my knowledge you cannot route the way that you want to with the built-in angular router.
As far as I can see you have two options to go with from here:
1: Learn to use the ui-router library (found here: https://github.com/angular-ui/ui-router)
2: Send all routes from /catolog to a controller/page that manually looks at your route-params and re-routes you based off of that manually. (see https://docs.angularjs.org/api/ngRoute/service/$routeParams)

Try use templateUrl function like to this. I have not tested.
templateUrl: function($location){
if($location.category)
return 'html/catalogSpecific.html';
else
return 'html/catalog.html';
},
Demo

I was able to figure this out following Hadi's example:
.when('/catalog', {
templateUrl: function($location){
if($location.category == "specificProductType") {
return 'html/catalogSpecific.html';
} else {
return 'html/catalog.html';
}
},
controller: 'CatalogController'
})

How to create a layout template for angular routing?

I use angular routing:
angular.module("app-test", ["ngRoute"]).config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider.when("/",
{
controller: "firstController",
templateUrl: "/views/first/index.html"
});
$routeProvider.when("/second",
{
controller: "secondController",
templateUrl: "/views/second/index.html"
});
$routeProvider.otherwise({ redirectTo: "/" });
});
But all my views of the different routes (e.g. views/first/index.html, views/second/index.html, etc.) have repeating html code like loading panels, messages, etc.
How can I outsource those common syntax in for example a layout html page that is used together with all the templateUrl views of the angular routing?
For example if every templateUrl has following html code - <div>{{message}}</div> - I would like to put this code in an extra html file which will be included in the templateUrl while the angular routing is getting the view.

You can use ng-include. But you can also use the same View (html) with different controllers:
$routeProvider.when("/",
{
controller: "firstController",
templateUrl: "/views/shared.html"
});
$routeProvider.when("/second",
{
controller: "secondController",
templateUrl: "/views/shared.html"
});
Please also note that a "views" folder doesn't scale very well. It works better to have a feature directory for each feature that contains all the pieces needed to build that feature. Shared stuff can get a bit dicey--if you know in advance you're going to share it, you can put it in a "shared" or "common" directory, but sometimes you wind up using it from the feature where it was first used.

Load different templates and controllers in routes in Angular?

My app.js file looks like so:
angular.module('airline', ['ngRoute', 'airlineServices', 'ngCookies'])
.config(airlineRouter);
function airlineRouter($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'partials/destinations.html',
controller: 'DestinationsCtrl'
})
.when('/airports/:airportCode', {
templateUrl: 'partials/airport.html',
controller: 'AirportCtrl'
})
.when('/airports/:airport1/:airport2', {
templateUrl: 'partials/two_airports.html',
controller: 'TwoAirportsCtrl'
})
.when('/flights', {
templateUrl: 'partials/flights.html',
controller: 'FlightsCtrl'
})
.when('/reservations', {
templateUrl: 'partials/reservations.html',
controller: 'ReservationsCtrl'
})
.otherwise({
redirectTo: '/'
});
};
Now I simply wish that if the user is logged in, which I can easily try by sending a token from cookies to the server and getting a response, I wish to load a view and a controller, but if the user is not logged in, I just wish to load the login view and the login controller? How can configure the '/' route so that it loads different views and controllers?

The views are going to load dynamically, so you do not need to worry about them. The controller is part of your setup, so again, you do not need to worry about them.
What you want to do is to display a view based on whether the user is authenticated or not.
When the user authenticates you want to setup a property somewhere, possibly in the $rootScope and then you can show different views, a code similar to below:
<div data-ng-if="application.isAuthenticated()">
<div>
I am logged in
</div>
</div>
<div data-ng-if="!application.isAuthenticated()">
hello anon, please login.
<button class="btn btn-primary" ng-click="application.login()">Login</button>
</div>

AngularJS relative url routing issue

I have my backend web framework loading my AngularJS app with following URL
http://localhost/New/Alpha/App
I also have it set up so that anything after App will still load the same thing
http://localhost/New/Alpha/App/home
http://localhost/New/Alpha/App/settings
...
I'm trying to make my AngularJS app to work in the way that it would pick up the bit of URL after App and load a controller/template accordingly. I have a problem with routing in my AngularJS app though
var main = angular.module("main", ["ui.bootstrap", "ngRoute"]);
main.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("home", {
templateUrl: "assets/tpl/home.html",
controller: "mainController"
})
.otherwise({
redirectTo: "fail"
});
$locationProvider.html5Mode(true);
});
main.controller("mainController", function($scope) {
console.log("home")
});
If I try this URL
http://localhost/New/Alpha/App/home
it changes the URL to
http://localhost/fail
instead of leaving the URL as it is and loading the template/controller. If however I change the config and give it a full relative URL it does work as supposed to
.when("/New/Alpha/App/home", {
templateUrl: "assets/tpl/home.html",
controller: "mainController"
})
My problem is, that the part of URL before App - /New/Alpha cannot be hardcoded in. It could be /New/Beta, /New/Gamma, etc.
Is what I want to do possible at all without hardcoding the full relative URL match?
UPDATE Sorry, forgot to mention that the number of URL segments before App can change, as in it could be /New/Beta/App and it also could be /New/Another/Beta/App. I don't suppose something like */App or /New/*/App is possible instead of /New/:placeholder/App?

Will this work for you?
var main = angular.module("main", ["ui.bootstrap", "ngRoute"]);
main.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/New/:greek/App/home", {
templateUrl: "assets/tpl/home.html",
controller: "mainController"
})
.otherwise({
redirectTo: "fail"
});
$locationProvider.html5Mode(true);
});
main.controller("mainController", function($scope) {
console.log("home")
});
You could then retrieve the greek with $routeParams.greek from within your controller.

The general solution to this problem is to have the server pass the app URL to your client-side code. In other words, use server-side code to dynamically write the equivalent of the following on the page:
var appUrl = '/New/Alpha/App';
Then setting up the route provider becomes:
main.config(function($routeProvider, $locationProvider) {
$routeProvider
.when(appUrl + "/home", {
templateUrl: "/assets/tpl/home.html",
controller: "mainController"
})
.otherwise({
redirectTo: appUrl + "/fail"
});
$locationProvider.html5Mode(true);
});
That way the knowledge of the application base URL lives in one place — server-side (which makes sense as only the server is in a position to truly know, if you think about it).
In your specific case, if the application base URL is implicit in the URL structure, you could calculate the following client-side:
var appUrl = window.location.pathname.match(/^\/New\/.*\/App/);
Needs work, but you get the idea. Then you can set up the route provider exactly as above.

AngularJS Routes with Rails

I'm trying to use angularjs routing within a Rails application but I'm having some difficulty. I've split up my page into partials (called _events.html.erb, _categories.html.erb, and _times.html.erb) and I'm set up my routing in my js file like so:
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/meetups/new/categories', {
templateUrl: '??',
controller: 'MeetupDataCtrl'
}).
when('/meetups/new/times', {
templateUrl: '??',
controller: 'MeetupDataCtrl'
}).
when('/meetups/new/events', {
templateUrl: '??',
controller: 'MeetupDataCtrl'
}).
otherwise({
redirectTo: '??'
});
}]);
My only problem is that I can't figure out what I should put as the template URLs since I can't seem to access the files from a URL in any way.
Any ideas how to make this work? Or better yet, some best practices around the issue