Develop Reference

Angularjs multiple app can't route a subapplication

I have a site with multiple angularjs app inside. The structure is the following :
index.html
js
js_controller.js
js_directives.js
js_filters.js
js_routes.js
js_home.js
sub_app
index.html
js
subapp_controller.js
subapp_directives.js
subapp_filters.js
subapp_routes.js
subapp_home.js
On the first app I added the following in js_routes.js :
angular.module('jsroutes.routes', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'templates/mytemplates.html'});
$routeProvider.otherwise({redirectTo: '/'});
}])
No problem with this. It works well.
The problem concern my subapp. I added the following in subapp_routes.js :
angular.module('subapproutes.routes', ['ngRoute'])
.config(['$routeProvider','$locationProvider', '$httpProvider', function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider.when('/subapp', {templateUrl: '/subapp/templates/mytemplate.html', controller: 'myCtrl'});
$routeProvider.when('/subapp/:id', {templateUrl: '/subapp/templates/mysecond.html', controller: 'myCtrl'});
$routeProvider.otherwise({redirectTo: '/subapp'});
}])
The problem is : if the url is /subapp works, /subapp/1 not work for example. It returns to home with templates/mytemplates.html
I don't know why.
If someone can help me.
Thanks in advance

Unable to match route in AngularJS

I have the following code in my app.js:
var myApp = angular.module('myApp', ['ngRoute'])
myApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/products', {
templateUrl: '/angularjs/public/angular/views/product.html'
}).
otherwise({
templateUrl: '/angularjs/public/angular/views/home.html'
});
$locationProvider.html5Mode(true);
}]);
When I go to home at http://localhost/angularjs/public, the .otherwise kicks in correctly.
If I go to http://localhost/angularjs/public/products, nothing happens, or more precisely, I believe .otherwise is invoked again, since is displayed the home.html view. Also no error is throwed in batarang's console.
What could be the problem?

you need to add "public" to product slug in your route
when('public/products', {
templateUrl: '/angularjs/public/angular/views/product.html'
}).

Angular html5 mode not redirecting

I am using AngularJs with Ruby on Rails.
I set the html5 option to true in angular: $locationProvider.html5Mode(true)
But now when I try to navigate through pages in my application, it will only change the URL in my browsers URL bar. But the page it self will nto change unless I reload the page. Only then will it go to the page specified.
This is how my Angular routing looks like:
#test.config(['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider) ->
# Route for '/'
$routeProvider.when('/', { templateUrl: '../../views/visitors/index.html.erb', controller: 'VisitorsCtrl' } )
$routeProvider.when('/users', { templateUrl: '../../views/users/index.html.erb', controller: 'UsersCtrl' } )
# Default
$routeProvider.otherwise( { redirectTo: "/" } )
$locationProvider.html5Mode(true)
])
On the root page I have a element: <h2><a ng-click="viewUsers()">Users</a></h2>
And viewUsers() is called here:
#test.controller 'VisitorsCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.viewUsers = ->
$location.path('/users')
console.log("Redirected")
]
What could be needed more to get this kind of routing to work?
New angular route:
Test.config ($routeProvider, $locationProvider) ->
$routeProvider
.when '/',
templateUrl: '../../views/visitors/index.html.erb',
controller: 'VisitorsCtrl'
.when '/users',
templateUrl: '../../views/users/index.html.erb',
controller: 'UsersCtrl'

try to use following instead:
$window.location.href = '/users'

With $routeParams, CSS doesn't load

When using parameters in ngRoute and accessing the URL directly (not through a link inside the site), the CSS does not load. All my routes work perfectly except for /chef/:id. I used yeoman's angular generator, and I'm running things using grunt serve.
Here's my Route code:
angular
.module('agFrontApp', [
'configuration',
'LocalStorageModule',
'ngCookies',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '../views/main_view.html',
controller: 'MainCtrl',
controllerAs: 'MainCtrl',
})
.when('/login', {
templateUrl: '../views/login_view.html',
controller: 'LoginCtrl',
controllerAs: 'login',
})
.when('/chefs', {
templateUrl: '../views/chef_list_view.html',
controller: 'ChefListController',
controllerAs: 'chefs',
})
.when('/chef/:id', {
templateUrl: '../views/chef_detail_view.html',
controller: 'ChefDetailController',
controllerAs: 'chef'
})
.when('/receitas', {
templateUrl: '../views/recipe_list_view.html',
controller: 'RecipeListController',
controllerAs: 'recipe'
})
.when('/perfil', {
templateUrl: '../views/perfil_view.html',
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
And here's the controller for /chef/:id:
'use strict';
(function() {
function ChefDetailController($routeParams, $scope, $log, Chefs) {
var vm = this;
Chefs.getChef($routeParams.id)
.then(function(data) {
$log.log('success');
})
.fail(function(data) {
$log.log('something went wrong');
});
}
angular.module('agFrontApp')
.controller('ChefDetailController',
[ '$routeParams', '$scope', '$log', 'Chefs', ChefDetailController]);
})();
What am I doing wrong?
Edit:
Here's chef_detail_view.html: http://pastebin.com/bL5ST01N

You're very likely loading your CSS using a relative url like so
<link rel="stylesheet" href="styles/style.css" />
The problem is in html5mode your chef url is /chef/123 So the browser is trying to load your CSS from
/chef/styles/style.css You'll want to either turn off html5mode or change your stylesheet href to be root relative (e.g. /styles/style.css)

Angular: change URL for the same controller

$routeProvider.
when('/:placeId', {templateUrl: 'client/partials/menu.html', controller: MenuCtrl}).
when('/look/refill', {templateUrl: 'client/partials/refill.html', controller: RefillCtrl}).
when('/look/orderCart', {templateUrl: 'client/partials/orderCart.html', controller: OrderCartCtrl}).
otherwise({redirectTo: '/0'});
}]).
I need to add link on the first page and when you click it, URL should be changed(for axeample add 1 in the and of URL) but page should be left the same, without any changes and reloading. How to do it? Thanks

Think this is what you want
when('/:placeId', {templateUrl: 'client/partials/menu.html', controller: MenuCtrl, reloadOnSearch: false})