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
Related
I have web application where I need to load a template with different parameters like.
.when('/form/:ProjectID/:FormID', {
templateUrl: 'partials/Form.ashx?fid=' + FormID,
controller: 'FormController'
})
I am not able to get the above code working. Can someone tell me how I can fix this issue? I am new to AngularJS and not an expert.
This is the full code.
var app = angular.module('MyApp', ['ui.grid', 'ngSanitize', 'angularTrix', 'ui.codemirror', 'ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'partials/Home.ashx',
controller: 'HomeController'
})
.when('/project/:ProjectID', {
templateUrl: 'partials/Projects.ashx',
controller: 'ProjectController'
})
.when('/form/:ProjectID/:FormID', {
templateUrl: 'partials/Form.ashx?fid=1',
controller: 'FormController'
})
.otherwise({ redirectTo: '/home' });
});
We can use $stateParams and templateProvider to load dynamic templateurl
.state('general', {
url: '/{type}',
//templateUrl: 'pages/home.html',
templateProvider: ['$stateParams', '$templateRequest',
function($stateParams, $templateRequest)
{
var tplName = "pages/" + $stateParams.type + ".html";
return $templateRequest(tplName);
}
],
// general controller instead of home
//controller: 'homeController',
controller: 'generalController',
controllerAs: 'ctrl'
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: '/'
});
}]);
Is it possible to have a route param in the base url with ngRoute?
<base href="/some/resource/path/:myParameter/" />
together with:
angular.module('myApp', ['ngRoute'])
.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
$routeProvider
.when('/first', {
templateUrl: 'template.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'template.html',
controller: 'mainController'
})
.when('/third', {
templateUrl: 'template.html',
controller: 'someController'
})
.when('/forth', {
templateUrl: 'template.html',
controller: 'someController'
})
.otherwise({
redirectTo: '/first'
});
$locationProvider.html5Mode(true);
}]);
to get routes of:
/some/resource/path/:myParameter/first
/some/resource/path/:myParameter/second
/some/resource/path/:myParameter/third
/some/resource/path/:myParameter/forth
I'm using cordova angularjs together. I will use the routeprovider.
index.js:
var appGenerator = angular.module('appGenerator', ['ngRoute', 'ngResource']);
appGenerator.config(function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
appGenerator.config(['$routeProvider' function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: "partials/tablePage.html",
controller: "MainCtrl"
})
.when('/contacts', {
templateUrl: "partials/contacts.html",
controller: "ContactsCtrl"
}).otherwise({
redirectTo: '/'
}); }]);
html:
{{table.tablename}}
But I get an net::ERR_FILE_NOT_FOUND(file:///contacts) error
What I'm doing wrong?
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.