I want to know if it's possible to make some hidden routes with angularjs, for example I have a category and sub category, in my application I have
.when('/category/new' ,{
controller : 'newCategoryCtrl',
templateUrl : '/category.html'
})
.when('/category/:id/sub/new' ,
{ controller : 'newSubCategoryCtrl',
templateUrl : '/subCategory.html'
})....
in my case , if you want to add new subcategories you have to search by category, and after that you have the access to subcategory view. but the problem with configuration, you can access this url if you know it without any restriction
What you can do is have a route that will handle the incorrect sub-route before the correct sub-route. You can actually leverage the same sub-route controller, evaluate the $routeParams and bounce back to whatever route you like.
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/page/new', { templateUrl: 'page.html', controller: 'pageCtrl'})
.when('/page/:id/:substuff', {templateUrl: 'subPage.html', controller: 'subPageCtrl'})
.when('/page/:id/sub/new', {templateUrl: 'subPage.html', controller: 'subPageCtrl'})
.otherwise({ redirectTo: '/page/new' });
}]);
Here's a plunk
Related
I would like to that way, if it exists, how to do that, ng-view (or ui view) loads, when load the page. For example: I would like to seperate header files, menu files, etc. So the Webpage should stands some views. I found only tutorials when views load after a click. Please inform me about this.
Thank you.
When you build your router you specify which template to show for every route. You can also create a default one like so:
.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
})
.otherwise({redirectTo: '/'});
});
I want to be able to have users goto www.myurl.com/#/login and be taken to the specified view. Same for if they are on a specific view, if they refresh I would want them to be taken to the same view again. However currently no matter what the extension it will always take you to the home page on start up. Is there likely to be an error in my code or does angular routing not behave like that?
fcApp.config(function ($routeProvider){
$routeProvider
.when('/',
{
templateUrl: 'html/frontPage.html'
})
.when('/login',
{
templateUrl: 'html/frontPage.html'
})
.when('/home',
{
templateUrl: 'html/home.html'
})
.otherwise({redirectTo: '/home'});
});
I am using angular router, and I have a route similar to the one below
angular.module("manageAbcApp", ["myApp", "ngRoute"])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: '/Scripts/app/views/abc/AbcList.htm',
controller: 'ListAbcController'
})
.when('/view/:id', {
templateUrl: '/Scripts/app/views/abc/AbcDashboard.htm',
controller: 'DashboardAbcController'
})
// more...
.otherwise({
redirectTo: '/list'
});
}]);
So as you can see there are 2 routes one for listing and other for dashboard of the item selected for the listing.
In the listing route a list view is selected and shown where I show a grid with some data, one of the column in this grid is the name column which is clickable and on click of it i change the route to href="#/view/{row.Id}".
This works fine.
But, How do I also pass some additional paramters to the DashboardAbcController like the name or any other details ?
Edit: I figured out I could use a service common to both these controller and on ng-click update some model in the service. But I do not want to use ng-click coz if I do then I ll lose the option to allow user to open my link in new tab, copy paste, share etc...
What about something like: Demo
.when('/list', {
templateUrl: '/Scripts/app/views/abc/AbcList.htm',
controller: 'ListAbcController'
})
.when('/view/:id/:name/:other/:details', {
templateUrl: '/Scripts/app/views/abc/AbcDashboard.htm',
controller: 'DashboardAbcController'
})
And, you could create a link like:
Home
Note: That you can pass other data as route params that you don't want to fix into the routes.
either use $rootscope to assign values ex. $rootscope.name = 'name' or use get parameter
.when('/view/:id?name=&id=', {
templateUrl: '/Scripts/app/views/abc/AbcDashboard.htm',
controller: 'DashboardAbcController'
})
I'm working on a AngularJS + OnsenUI project, and I'm having problems with the navigation.
Let's say that I have a module:
angular
.module('app.home', ['ui.utils','ngRoute','ngAnimate'])
.controller('HomeCtrl', HomeCtrl)
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'path/to/home/template',
controller: 'HomeCtrl'
})
.when('/test1', {
templateUrl: 'path/to/template',
controller: 'TestOneCtrl'
})
.when('/test2', {
templateUrl: 'path/to/template',
controller: 'TestTwoCtrl'
})
.otherwise({
redirectTo: 'path/to/home/template'
});
});
In the HomeCtrl I'm supposed to (depending on the result of certain functions) navigate to either test1.html or test2.html. My problem is that I don't know how to link the routeProvider to the the ons.navigator.pushPage function.
This doesn't work:
var url = '/test1';
$scope.navigator.pushPage( url, { animation : 'slide' } );
This works:
var url = '/absolute/path/to/template';
$scope.navigator.pushPage( url, { animation : 'slide' } );
My question is what do I need to do so I don't have to write the absolute path to the template in the url variable? Apparently I'm missing out on something, but I can't figure out what.
Thanks in advance!
I think it's because the path used in $routeProvider is not the same type of that of pageUrl used in navigator.pushPage().
$routeProvider.when(path, route);
and
navigator.pushPage(pageUrl, option);
Path is like the pattern or string of your app url found in the browser address bar. For example, "http://localhost:8000/app/index.html#/test1". That's when you can refer to this in the routeProvider as "/test1". However, in the navigator.pushPage(), you will need to specify exact url to the page just like how you set ur templateUrl inside $routeProvider. In other words, pageUrl = route.
That's just from my understanding though.
I'm not clear why this isn't functioning. The rest of my code - sans the URL Param-based routing is working fine, I've tested that all. However, when I tried to include a URL argument in my url (base.url/route/:param) the '.otherwise' element of my routeProvider is firing instead of the appropriate controller designated in the routeProvider.
Here's the relevant bits of code:
module.config
app.config(function($routeProvider){
//http://docs.angularjs.org/tutorial/step_07
$routeProvider
.when('/home',
{
templateUrl: 'app/partials/home.html',
controller: 'HomeController'
})
.when('/implementation-reference/:ref-scope',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
.when('/projects',
{
templateUrl: 'app/partials/project_list_tpl.html',
controller: 'Projects'
})
.when ('/site-help',
{
templateUrl: 'app/partials/site-help.html'
})
.otherwise(
{
templateUrl: 'app/partials/404.html'
})
});
module.controller
app.controller('ImplReference', function($scope, $routeParams) {
alert('hi');
});
I get my 404 page when going to /implementation-reference/whatever.
Any ideas why I don't see the alert I put at the beginning of my controller, nor see any errors in the console?
As best as I can tell, the issue lay in use a dash in the param as defined in RouteProvider. I originally had:
.when('/implementation-reference/:ref-scope',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
when I changed it to this:
.when('/implementation-reference/:ref',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
...suddenly everything works fine.
I noticed this after adding a controller to the 'otherwise' that showed me the $route information. After drilling through it, I saw that the regex on the pre-defined route which had the param was only working on the part before the dash.
I've been mystified by this for hours, and can't imagine how this isn't documented more clearly somewhere. Perhaps this is some newbie mistake (I am new to this).