my code its something like this:
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.when('/login', {
controller: 'LoginController',
templateUrl: 'views/login.html'
})
.otherwise({
redirectTo: '/'
});
});
But I wonder if it could be something like this:
...
.when('/login' OR '/' OR '/SOMETHING', {
controller: 'LoginController',
templateUrl: 'views/login.html'
})
...
I already read doc of when function and a have see this question too, but unfortunately I have not be able to find a conclusive answer.
Can when function of routeProvider take multiple url paths?
Thank you in advance.
Your code seems to be fine.Can you just guide me which error you are getting?
In order to reuse the data you can simply:
app.config(function ($routeProvider) {
loginData = {
controller: 'LoginController',
templateUrl: 'views/login.html'
};
$routeProvider
.when('/', loginData)
.when('/login', loginData)
…
.otherwise({
redirectTo: '/'
});
});
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: '/'
});
}]);
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...
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 single page application where I route to different pages based on url address, I would like to redirect to Homepage when user enters non existing page in the url, so I use otherwise statement, however it causes 404 error, here is my routing config.:
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
redirectTo: '/products'
}).
when('/products/:id?', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/orders/:id?', {
templateUrl: 'partials/orders.html',
controller: 'OrdersController'
}).
when('/auto', {
templateUrl: 'partials/AutoComplete.html',
controller: 'TypeaheadCtrl'
}).
otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
}]);
EDIT:
Changed it as suggested below buts till the same affect, when I type non existing page it goes to Error 404 instead of /products
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
redirectTo: '/products'
}).
when('/products', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/products/:id?', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/orders/:id?', {
templateUrl: 'partials/orders.html',
controller: 'OrdersController'
}).
when('/auto', {
templateUrl: 'partials/AutoComplete.html',
controller: 'TypeaheadCtrl'
}).
otherwise({ redirectTo: function () { return '/' } });
$locationProvider.html5Mode(true);
}]);
You don't need the when('/'... and the otherwise as they essentially do the same thing.
The otherwise is a catchall to get anything that isn't matched so you don't need to route the '/' specifically.
$routeProvider.
when('/products/:id?', ...).
when('/orders/:id?', ...).
when('/auto', ...).
otherwise({
redirectTo: '/products'
});
EDIT The problem is that redirecting to '/products' won't match '/products/:id'. You'll need to add another route like as follows:
when('/products', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
})