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'
})

Angularjs routes are coming upto localhost only

I have to setup a wordpress site which was developed by another team locally. They used angularjs. I am very new to angular. I placed the wordpress files in wamp server. The name of the folder is playbook.
When I tried to access the site by using url localhost/playbook, I got a javascript error saying localhost/home not found.
I checked the javascript file and I saw routing like this
.when('/', {
controller: 'HomeCtrl',
templateUrl: '/home'
})
When I added /playbook at the start like below of templateUrl, page displayed
.when('/', {
controller: 'HomeCtrl',
templateUrl: '/playbook/home'
})
Why is this happening. Shouldn't the route take the path up to localhost/playbook?

You need to specify the extension .html for the template.Assuming your file is called home.html, replace your current code with
.when('/', {
controller: 'HomeCtrl',
templateUrl: '/playbook/home.html'
})
Regarding the usage of a more specific path.Consider this, you are coding a multi-module app in Angular.To seperate concerns, you may have a file structure that is based on each module.So my routes could look something like this. For my file, this was defined in app.js , which was inside the JS folder in my whole application.Additionally, you may choose to define routes in a seperate folder altogether. There is no reason for it to default to a particular file or folder.
foodApp.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/',
{
templateUrl:'js/apps/choiceScreen/choice.html',
controller:'choiceCtrl'
})
.when('/cafe',
{
templateUrl:'js/apps/cafe/cafeScreen.html',
controller:'cafeCtrl'
})
.when('/showCafe/',
{
templateUrl:'js/apps/eachScreen/itemView.html',
controller:'itemCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);

Laravel 5 and AngularJS removing '#' from url

Im at the moment building an application where i want my urls to be like my-domain.com/ instead of my-domain.com/#/. Because I'm building an SPA with AngularJS, I enabled the html5Mode of the $locationProvider.
However, when i go to another page like my-domain.com/test (defined in my $routeProvider config), I get laravel's error page. This is not what i want because i want AngularJS to handle this route.
I looked around and found things like
App::missing(function($exception)
{
return view('client/index');
});
which sadly dont work in Laravel 5. After researching the new way to handle errors, I decided to test the new Exception Handler, so in my App\Exceptions\Handler.php I did this:
public function render($request, Exception $e)
{
return view('client/index');
}
Unfortunately, this also doesnt work because now it renders a blank page...
Does anyone have an idea how to fix this? Here is my code of my angular ngroute config:
client.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: '/client_partials/Homepage.html'
})
.when('/test', {
templateUrl: '/client_partials/Homepage.html'
})
.otherwise({
redirectTo : '/'
});
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}]);

Here is the route:
Route::any('{path?}', function()
{
return File::get(public_path() . '/angular.html');
})->where("path", ".+");

Why doesn't root request get the updated index.html

I am developing an angular app. Whenever I modify the index.html, a request to localhost:8000 doesn't get the updated index.html. Why is that? I am using nodejs to host the server. I have tripped over this too many times assuming the request would get the updated index.html, such as including a new script but nothing happens because the index.html isn't the updated one. It is quite annoying every time I refresh I have to type index.html.
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
redirectTo : '/login'
}).when('/dashboard', {
templateUrl: 'app/dashboard/dashboard.html',
controller: 'dashboard'
}).when('/login', {
templateUrl: 'app/layout/login.html'
}).when('/register', {
templateUrl: 'app/layout/register.html'
}).otherwise({
redirectTo: '/'
});
}]);

It's probably loading from the browser cache rather than the changed copy from the server.
Try
location.reload(true)
to load it from the server.
https://developer.mozilla.org/en-US/docs/Web/API/Location.reload

AngularJS locationProvider Routing

I'm very new to Angular and I'm currently building a few test/dummy apps to get my head around the way it works and become more-familiar with SPA's in Angular. However, I've stumbled into an issue when I start adding routes to my application and loading the content via ng-view
$locationProvider doesn't seem to be working correctly because if I go to localhost/sdfsdf then I get cannot GET /sdfsdf when in reality the page should be redirecting to /cocktails.
routes.js
var cocktailApp = angular.module('cocktailApp', ['ngRoute', 'cocktailControllers']);
cocktailApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/cocktails', {
templateUrl: '/partials/cocktail-list.html',
controller: 'cocktailsController'
})
.otherwise({
redirectTo: '/cocktails'
});
$locationProvider.html5mode(true);
}]);

Angular only recognizes anchor URL syntax for URLs pasted directly on the browser. So you have to you try http://localhost/#/sdfsdf instead to make your routing work. Please note that anchor syntax /# was added in previous URL.