I'm building an Angular app with RESTful CRUD actions. Almost everything is working except for the /users/new route ~ it displays the show view instead of new view specified in $routeProvider. However, '/new' does work. I'm not getting any feedback in the js console. Any ideas or examples I should read?
App.config [
'$routeProvider'
'$locationProvider'
($routeProvider, $locationProvider, config) ->
$routeProvider
.when('/',
templateUrl: '/partials/home.html'
).when('/users',
templateUrl: 'partials/users/index.html'
controller: 'UserIndexCtrl'
).when('/users/:id',
templateUrl: 'partials/users/show.html'
controller: 'UserShowCtrl'
).when('/users/:id/edit',
templateUrl: 'partials/users/edit.html'
controller: 'UserEditCtrl'
# why does following not work:
).when('/users/new',
templateUrl: 'partials/users/new.html'
controller: 'UserNewCtrl'
# but this does:
).when('/new',
templateUrl: 'partials/users/new.html'
controller: 'UserNewCtrl'
).otherwise(redirectTo: '/')
$locationProvider.html5Mode(true)
]
The $routeProvider try to test url pattern defined from TOP to BOTTOM.
So the URL pattern /users/new match /users/:id defined 3rd before /users/new defined 5th.
If you define /users/new before /users/:id, I expect that it would work properly.
The code should be like below.
App.config [
'$routeProvider'
'$locationProvider'
($routeProvider, $locationProvider, config) ->
$routeProvider
.when('/',
templateUrl: '/partials/home.html'
).when('/users',
templateUrl: 'partials/users/index.html'
controller: 'UserIndexCtrl'
# you should write it before '/users/:id'
).when('/users/new',
templateUrl: 'partials/users/new.html'
controller: 'UserNewCtrl'
).when('/users/:id',
templateUrl: 'partials/users/show.html'
controller: 'UserShowCtrl'
).when('/users/:id/edit',
templateUrl: 'partials/users/edit.html'
controller: 'UserEditCtrl'
).when('/new',
templateUrl: 'partials/users/new.html'
controller: 'UserNewCtrl'
).otherwise(redirectTo: '/')
$locationProvider.html5Mode(true)
]
Related
Change the below url
http://example.com/#/alphabits/a b c
to
http://example.com/#!/alphabits/a_b_c
Any suggestion
You can change this from $locationProvider. I used this code in my application to change this.
angular.module('myApp').config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix(''); // We are actually removing ! from URLs as ! is default one.
$routeProvider
.when('/', {
templateUrl: 'templates/home.tpl.html',
controller: 'homeCtrl'
})
.when('/about', {
templateUrl: 'templates/about.tpl.html',
controller: 'aboutCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
I try to declare a route to use angular,in my security.yml after authentication i well be redirect to #/welcome but consider it a comment
default_target_path: #/welcome
my app.js
routeApp.config(['$routeProvider',function($routeProvider) {
// Routing system
$routeProvider
.when('/login', {
templateUrl: Routing.generate('login'),
controller: 'SecurityController'
})
.when('/welcome', {
templateUrl: Routing.generate('ard_backend_test'),
controller: 'WelcomeController'
})
.otherwise({
redirectTo: '/login'
});
}]);
Just add a double quote for your string and the hash # character will be able to escape.
default_target_path: "#/welcome"
Update: Do not define the default client route in your yml configuration.
This should be part of your angular router configuration. Depending which router you are using of course.
Here is an example with angular's default routeService:
angular.module('MyApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/welcome', {
templateUrl: 'partials/welcome.tpl.html',
controller: 'WelcomeCtrl'
}).
when('/some-other-route', {
templateUrl: 'partials/some-other-route.tpl.html',
controller: 'SomeOtherCtrl'
}).
otherwise({
redirectTo: '/welcome'
});
}]);
I have a small AngularJS website where I use one controller and a view. I wanted to remove the /# in the URL with $locationProvider.html5Mode(true), but here starts the problem.
My code:
[...]
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/',
{
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.otherwise({redirectTo: '/'});
}]);
When I do this I get the error that he can't find the home view on views/home.html (which is the correct path). When I delete the html5mode for removing the /# in the URL it all works just fine.
With this:
[...]
.config(['$routeProvider', function($routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/Project',
{
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.otherwise({redirectTo: '/Project'});
}]);
Summary: when I add the html5mode it gives me the error that he can't find the view. When I remove it it all works.
Anyone who has an idea what the problem could be?
I have a small angular app that uses this configuration:
.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider,$httpProvider) {
$routeProvider.
when('/', {templateUrl: 'home.html', controller: 'mainCtrl'}).
when('/report/fail', {templateUrl: 'fail.html', controller: 'mainCtrl'}).
when('/report/:url', {templateUrl: 'report.html', controller: 'reportGeneralCtrl'}).
when('/report/:id/:url', {templateUrl: 'report.html', controller: 'reportUserCtrl'}).
otherwise({redirectTo: '/'})
$locationProvider.html5Mode(true)
}]);
When I try to access some url directly, typing in the browser the url, angular add this string: "#.UqX3mNJN9Zo" to my url.
Why this happens?
Found out that this is caused by addThis script. probably this don't work well on angular.
using ng-view and
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '/partials/home',
controller: 'homePage'
}).
otherwise({redirectTo: '/login'});
}]);
everything works fine, except the URL, which shows /#/ before each address. How do you get rid of it?
inject $locationProvider and set html5mode to true
http://docs.angularjs.org/guide/dev_guide.services.$location
myApp.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: '/partials/home',
controller: 'homePage'
}).
otherwise({redirectTo: '/login'});
$locationProvider.html5Mode(true); // <-- Here comes the magic
}]);
remember though that you will need to set upp the backend to redirect all links to index.html