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: '/'
});
}]);
Related
I have create a new project, but got a problem which I am not able to fix.
Here's my example:
angular.module('MosysTimes', ['ngRoute']).config($routeProvider, RouteConfiguration);
function RouteConfiguration ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'start.html',
controller: 'WelcomeController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/'
});
}
It always says:
$routeProvider is undefined....
Any help will be appreciated ?
You should change your code to this.
angular.module('MosysTimes', ['ngRoute']).config(['$routeProvider',function($routeProvider)
{
$routeProvider
.when('/', {
templateUrl: 'start.html',
controller: 'WelcomeController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/'
});
}]);
Did you add ngroute script to you index html?
for example:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
and try to use following syntax
angular.module("MosysTimes",['ngRoute']).config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'start.html',
controller: 'WelcomeController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/'
});
});
angular.module('yourModule').config(['$routeProvider', function($routeProvider){
$routeProvider
.when() .....
}]);
You should declare $routeProvider into function. After that you can use this $routeProvider to access the loading template on your main page.
thanx to you all, after trying your hints I got it working and a bit of more understanding angular.. thx...
friends, can anybody help.
Angular 1.4.9 make links like this http://domain/#!/product,
but I need links like this http://domain/#!product with out slash.
Code:
var app = angular.module('myApp', [
'ngRoute'
])
.config([
'$routeProvider',
'$locationProvider',
function ($routeProvider, $locationProvider, ngMeta) {
'use strict';
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
controller: 'HomeCtrl',
templateUrl: 'views/home.html',
})
.when('/article/:slug', {
controller: 'ArticleCtrl',
templateUrl: 'views/article.html'
})
.when('/catalog/:category/:subcategory', {
controller: 'CatalogCtrl',
templateUrl: 'views/catalog.html'
})
.when('/product/:category/:subcategory/:product', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.when('/product/:category/:subcategory/:product/:texture', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/'
});
}
]);
I don't think this is a valid URL - http://domain/#!product
It should be http://domain/#!/product or http://domain/product,
To transform your URLs in desired way, it gives you some heads up -
https://docs.angularjs.org/guide/$location
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 this code:
var app = angular.module('TabsApplication', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/search', {
templateUrl: 'search.html',
controller: 'SearchController'
})
.otherwise({
redirectTo: '/home'
});
}])
Right now, I go to http://myapp.com/#/search, it will display search.html. What I want is that if I go to http://myapp.com/#/search?search1=1&search2=2, it will also display search.html.
If I use '/search*', it will redirect to home if I type http://myapp.com/#/search, but if I type http://myapp.com/#/search*, it will show search.html.
Is there a way to do this? I am using AngularJs version 1.2.9.
enter code herevar app = angular.module('TabsApplication', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/search", {
templateUrl: 'html/somepath/search.html'
controller: 'SearchController'
})
.otherwise({
redirectTo: '/home'
});
}])`enter code here`
I want to remove # hash in angularJs using $locationProvider.html5Mode(true); but this is causing all URLs to be routed through angularJs. How can I set it up so only some pre-defined URLs got routed through angularJs, while the rest still using Laravel.
The code is:
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/alls', {
templateUrl: app.site_url + 'ang/index',
controller: 'MainCtrl'
})
.when('/alls/page/:page', {
templateUrl: app.site_url + 'ang/index',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/alls'
});
$locationProvider.html5Mode(true);
}
]);
So if it's not /alls or /alls/page/, Laravel should handle the routing.
I've tried using <base href="."> as explained in: http://docs.angularjs.org/guide/dev_guide.services.$location. But it doesn't work.
I finally got it to work. Here is the solution:
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/alls', {
templateUrl: app.site_url + 'ang/index',
controller: 'MainCtrl'
})
.when('/alls/page/:page', {
templateUrl: app.site_url + 'ang/index',
controller: 'MainCtrl'
})
.otherwise({
templateUrl: app.site_url + 'ang/index',
controller: function(){
window.location.href = window.location.href;
}
});
$locationProvider.html5Mode(true);
}
]);
Hopefully it will help someone else.