I write an application with angularjs and use ui router for dynamic routing , my app has a page for display list of news and when click on a news , Explanation of the news is showing
for example if I have a news with id=3 when i click on link of this news the url change to news/3 and when click on a news with id=5 url change to news/4 but i want to change url to news/subnews/third or news/subnews/fifth
my piece of code for change url and content is like this
.state('news', {
abstract:true ,
url: "/news",
templateUrl: "views/news/news.html",
})
.state('news.showAll', {
url: "",
templateUrl: "views/news/showAllNews.html",
})
.state( 'news.detail',{
url:"/:newsId",
templateUrl: "views/news/tmpShowDet.html",
controller:"newsShowing",
resolve:{
newsId: ['$stateParams', function($stateParams,newsId){
return $stateParams.newsId;
}]
}
})
what is the true way for display like news/subnews/....
How many 'subnews' do you want?
Translating numbers to words can get a little tricky, and spoken-language specific. Example: at 'subnews/101' do you want 'subnews/onehundredandone or subnews/onehundredandfirst or subnews/oneohone'.
I would recommend, if you only have a few subnews possibilities, going by categories.In that case, it seems you already know how to implement, or have access to the documentation for UrlRouteProvider.
If you have many subnews, I would leave the parameter as an integer, which is relatively spoken-language agnostic. You can always mask it or build a lookup table, etc if you don't want it displayed.
Speaking of which, if you still want to change the integer to a word, just use a lookup, and the url docs.
Cheers, bro
Related
I am facing a url structure problem using ui-router in AngularJS. I want to have first level SEO friendly url structure like this:
https://people-profile.com/mike-david-tringe
So I can grab the SEO name "mike-david-tringe" via stateParam and use it to find data in database and populate the page.
The $stateProvider has code like this:
$stateProvider
.state('people', {
url: '/:nameUrl',
templateUrl: 'app/frontend/page.tmpl.html',
params: {
nameUrl: {squash: true},
},
controller: "PageController",
controllerAs: 'vm'
})
.state('admin', {
url:'/admin/:userId',
templateUrl:'app/frontend/admin/admin.html',
controller:'AdminController',
controllerAs: 'admin'
})
With above code, I can have https://people-profile.com/mike-david-tringe working with nameUrl = mike-david-tringe and I got SEO friendly first level url link. mike-david-tringe is SEO friendly and most important keywords beside the domain name.
But with this structure, https://people-profile.com/admin/ or https://people-profile.com/login/ will not work now. Since my controller try to grab admin as nameUrl and looking for data. And admin is not a nameUrl so my database will return null, the app will fail.
In short, stateParam nameUrl will grab anything after "/" so the url setting will think admin and login is :nameUrl but in fact, it is not.
So how do I structure my app ui-router structure to have SEO friendly url like https://people-profile.com/mike-david-tringe but when url is https://people-profile.com/admin/, it will load admin.html template and use AdminController instead as I defined in $stateProvider?
All you need to do is swap the order of them. The router will check in order of definition, so if /:nameUrl comes before /admin it will trigger first. But if you put /:nameUrl last then it will trigger on any url that hasn't already triggered something above.
A word of warning however. Moving between two urls that trigger the same state (like two urls that both hit /:nameUrl in your case) will not reload the controllers on the page. Only changing state will do that. There are options to change this behaviour, but it has always been very buggy for me.
I have a state route as follows :
.state("hospitals",
{
url: "/hospitals/:categoryName/:providerName",
templateUrl: "app/components/hospital/views/hospitals.html"
})
In general,hospitals pages have all the hospitals with all categories and all provider(hospital) group. In addition, from home page we can navigate to the hospitals page using the category or provider which will show hospitals based on category and provider group respectively. For these, I navigate using the following directives inside anchor tag.
ui-sref="hospitals({categoryName: category.KeyName})"
ui-sref="hospitals({providerName: provider.KeyName})"
So, this introduces a dirty slash when navigating with providerName.
hospitals//somehopitalNme
It is fine with category.
coupons/heart/
Once inside the hospitals page, I can search using category or providerName and get the list of hospitals. I was thinking of modifying the url in these searches(using ui-sref for the same page) since it makes sense to show the url matching to the search. I land in a trouble here. The search is a common search and can match either providerName or category or even a text as well. In this case, how can I navigate or how to use s-ref. I am fine with not using ui-sref and just going to the api or getting the data and updating the results which is easily achievable. However, I prefer the change of url since it shows what we are looking for.
So, now I understand that the state route which I provided is not suitable.
Please provide me an approach as to how to do it.
I was thinking of adding another state called "search" for this, which makes sense. But the templateUrl for this will be the same. Please suggest if I am in right direction or not.
Check this for detailed explanation and working example
Angular UI-Router more Optional Parameters in one State
we can use so called squash setting of the params : {} object:
.state("hospitals",
{
url: "/hospitals/:categoryName/:providerName",
templateUrl: "app/components/hospital/views/hospitals.html",
params: {
providerName: { squash: true },
categoryName: { squash: true },
},
})
Also check these:
Angular js - route-ui add default parmeter
Option url path UI-Router
I don't know very much about angular, and I'm trying to get the hang of best practices regarding the use of URL routing and states and whatnot. I've got a scenario. It's a simple question, but I'm using it to get a handle on what's available to me.
Say that I have two completely separate web pages for displaying information on Ford cars and Toyota cars. When you access the pages, all you have is the car ID number, so you just hit the url "cars.com/info/id:198273918273". What's the best way, using angular.js, to immediately strip the id number from the url, use it to look up the car make, and display the appropriate html page, all without changing the url displayed at the top of the browser?
you can use functions in your route templateUrl
.when('/your_url/:car_id', {
templateUrl: function(attrs){
//Example of the login yours will be complex i guess :P
if(attrs.car_id == 1) { return 'template_ford.html' }
if(attrs.car_id == 2) { return 'template_toyota.html' }
},
controller : 'someController'
})
and by that your template can be chaged before the page is rendered and no need to send the user to a different url
Assuming that you are using angular-ui router
$stateProvider
.state('car-get', {
url:'/info/{car_id}/',
controller: ['$scope','$stateParams',function($scope,$stateParams){
var car_id = $stateParams.car_id;
// now you can get your car info
// and bind it to your template.
$scope.car = myservice.getcarinfo(car_id) //Here goes your service or your api calls to get car info
}],
templateUrl: 'path_to_detail_car_page.html',
});
Here is a good begginer tutorial for Angular-ui Router
I have a listing of Requests each with a Request_Type_Id which maps to a feeder list (which could grow as the application evolves). For example, we might have (id, request_type) 1 - Sales Information, 2 - Technical Support, 3 - Order Information and, of course, each one has unique fields so the edit forms are very different.
By clicking the name, I want to open the correct of these different edit forms.
For routing, I have this:
$routeProvider
.when('/editrequest/:req_id/:id', {
controller: 'EditRequestController',
templateUrl: '/App/Views/editRequest.html'
}).otherwise( { redirectTo: '/' } );
because I set the edit link to
{{req.title}}
I am still trying to learn AngularJS and am wondering if the best way to proceed from here would be to choose the correct edit form on /App/Views/editRequest.html by using ng-show. This would mean there would be at least 3 forms on that template (not nested, though) which might be problems in some browsers.
Is there a more AngularJS way to do this that I haven't learned yet?
Thanks in advance!
templateUrl can be a string or a function, which accepts route parameters and return a string.
In your case, you can doing so:
$routeProvider
.when('/editrequest/:req_id/:id', {
controller: 'EditRequestController',
templateUrl: function(params) {
// use params.req_id to generate a url
return '/App/Views/editRequest'+params.req_id+'.html';
}
}).otherwise( { redirectTo: '/' } );
Another important thing worth mention here is, be careful when use interpolate in href or src. Use ng-href or ng-src instead.
I was thinking last night about how to port our crud application to a tab based app, like gmail. First, reading a lot about ui-router, i thought in create a tabService that will create a new tab for each state change (listen $rootScope.stateChangeSuccess), the new tab would include the corresponding view (ui-view="bancos") that will display the state template.
My first test and my first problem, when shown the list of items, a click over one of the item (itemId=4 for example) should open a new tab and display the item with id=4 in this tab, inside the corresponding (ui-view="bancos/4"). Note how i'm trying to map named ui-view with states to display the state defined templates in the corresponding ui-view.
I know that ui-router sample seems to do what i'm trying, but they are using nested states with unamed ui-view inside parent state template. In my case, the parent state ui-view element and his child state ui-view element should be sibling.
Considering the nature of angular, tree structured, and the nature of ui-router states, tree structured too, can i use ui-router to implement my requirements (crud application with tab based design).
Regards
Danny
Here is me example, if you have questions i can answer
http://plnkr.co/edit/tqfPVFaesSe9Q6ZkPMzE?p=preview
Short explain: don't use tabs instead of that create a fake, works well and you save a lot of work.
Best
I was looking for the same info, does the following example help you?http://plnkr.co/edit/gMsKK9l7J0B8vZIMIVfD?p=preview (Not my coding.)
Edit:
I've found more useful data.
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
In my code, I have set it up like this:
.state('surveys.list', {
url: '/list',
templateUrl: "survey/surveys_overview.tpl.html",
controller: 'SurveyOverview'
})
.state('surveys.create', {
abstract: true,
templateUrl: "survey/survey.create.tpl.html",
controller: 'SurveyManageController'
})
.state('surveys.create.views', {
url: '/create',
views: {
'details': {
templateUrl: "survey/survey.create.details.tpl.html"
},
'steps': {
templateUrl: "survey/survey.create.steps.tpl.html"
}
}
});
The surveys.create.tpl.html just has a and two tabs with each one div:
<div ui-view="details"> & <div ui-view="steps">