2014-12-02 9 views
8

Używam AngularJS, aby utworzyć stronę z artykułami zawierającymi linki do szczegółów poszczególnych artykułów. Linki są oparte na identyfikatorze, aby upewnić się, że są unikatowe, ale chciałbym, aby adresy URL były tytułami z myślnikami (o wiele bardziej SEO/przyjazne dla użytkownika) niż identyfikatorem. Oto przykład, w którym kątowe dane produktów są czyste tytuły:Ustaw adres URL na SEO Friendly Title with Dashes zamiast ID

http://angular.github.io/angular-phonecat/step-11/app/#/phones

moich obecnych adresów URL są połączone przez ID więc pojawiają się one jako artykuł/66D5069C-DC67-46FC-8A51-1F15A94216D4

chcę je wyświetlać jako tytuł artykułu, taki jak artykuł/start-investing i upewnij się, że są one przyjazne SEO.

Moim zmartwieniem jest to, że jeśli dwa artykuły od różnych autorów mają ten sam tytuł (np. Informacje na temat inwestowania), otrzymam błędy, jeśli spróbuję połączyć/wyszukać według tytułu w porównaniu z identyfikatorem unikatowym dla każdego artykułu.

Oto moje kontrolery:

var pfcControllers = angular.module('pfcControllers', []); 

pfcControllers.controller('pfcCtrl', ['$scope', 'pfcArticles', function ($scope, pfcArticles) { 
$scope.articles = pfcArticles.query(); 
}]); 

pfcControllers.controller('pfcCtrl2', ['$scope', '$routeParams', 'pfcArticles', function ($scope, $routeParams, pfcArticles) { 
$scope.article = pfcArticles.get({ articleID: $routeParams.articleID }); 
}]); 

Oto mój ruter:

var pfcModule = angular.module('pfcModule', ['ngRoute', 'pfcServices', 'pfcControllers']); pfcModule.config(['$routeProvider', function ($routeProvider) { $routeProvider. when('/home', { templateUrl: './views/home.html'}). when('/categories', { templateUrl: './views/categories.html', controller: 'pfcCtrl' }). when('/article/:articleID', { templateUrl: './views/articles.html', controller: 'pfcCtrl2' }). otherwise({ redirectTo: '/home' }); }]); 

Oto moje dwa partials:

Categories.html (kilka artykułów)

<div class="row"> 
<div class="col-md-4"> 
    <h2>Heading</h2> 
    <table class="table table-striped"> 
     <tr> 
      <th>ID</th> 
      <th>Title</th> 
      <th>Category ID</th> 
      <th>Link</th> 
     </tr> 
     <tr ng-repeat="article in articles"> 
      <td>{{article.id}}</td> 
      <td>{{article.articletitle}}</td> 
      <td>{{article.articlecategoryid}}</td> 
      <td><a href="#articles/{{article.id}}">Link</a></td> 
     </tr> 
    </table> 
</div> 

Article.html (artykuł indywidualna)

<div class="row"> 
<div class="col-md-4"> 
    <h2>Heading</h2> 
    <table class="table table-striped"> 
     <tr> 
      <th>ID</th> 
      <th>Title</th> 
      <th>Category ID</th> 
      <th>Summary</th> 
     </tr> 
     <tr> 
      <td>{{article.id}}</td> 
      <td>{{article.articletitle}}</td> 
      <td>{{article.articlecategoryid}}</td> 
      <td>{{article.articlesummary}}</td> 
     </tr> 
    </table> 
</div> 

Oto próbka mojego wyjścia JSON:

[{"id":"66D5069C-DC67-46FC-8A51-1F15A94216D4","articletitle":"Start Investing","articlecategoryid":1,"articlesummary":"Investing is not gambling, but many people treat it with fear, excitement and apprehension like they are playing a game of chance. They act under the assumption that an investor was born with money and understands rules that are not known by anyone else. While it is true that some of the biggest risks hold the largest gains, you can take a controlled and planned approach. There is nothing wrong with a long term reasonable gain on an investment. Question: It seems so complicated, how does someone start investing? Answer: In fact, it is easy start investing, without taking giant risks, and with a plan in place. The key is \"3D Investing\"; Diversify, Dollar Cost Averaging, and Determination. Need motivation? Use The Investing Calculator to determine your future value with compound interest. ","articlelink":"http://www.thebudgetcalculator.com/start-investing.html"},{"id":"4E94D4A5-15A3-4D3D-BAD5-C1E9264145A2","articletitle":"Why Budget","articlecategoryid":2,"articlesummary":"A budget is one of the most overlooked, yet powerful tools in a financial plan. You have to know what you have, what you don't have, and follow a \"road-map\" in order to get where you want to be! If you stick to your budget, it will be the best friend you have, because a lot of financial stress comes from not knowing where your finances are, and not having a plan. In your budget is where you lay out your plan of how your dollars are spent, what debts are being paid down (read about debt), and how much you can save for the future. Question: So why do so few people actually sit down and do a budget? Answer: Many people just don't know where to start. ","articlelink":"http://www.thebudgetcalculator.com/why-budget.html"},{"id":"E1E90A53-1839-4F1E-9C69-EFD1F77DD322","articletitle":"Managing Debt","articlecategoryid":3,"articlesummary":"Debt is both physical and emotional, because it not only affects both all physical finances and value, but also weighs on us through stress and uncertainty. A lot of this uncertainty comes from not knowing where you stand each month, and that is why a budget is so important to determine what you can and cannot spend. But let’s be realistic, at some point in our lives most of us have debt, whether it is in the form of credit cards, student loans, mortgage, etc. Question: So if you have debt, how do you go about paying it off? Answer: There are many approaches to paying down debt, and here are there of them. ","articlelink":"http://www.thebudgetcalculator.com/managing-debt.html"},{"id":"102CC729-465B-4893-8374-0F30AA4FC751","articletitle":"Retirement Planning","articlecategoryid":4,"articlesummary":"The word retirement sounds relaxing, but if you did not save for your golden years you had better start hoping for a miracle. If this statement does not scare you, let’s put it into proper perspective. If you do not save for retirement you will be a burden upon your loved ones, your society, and yourself. This is probably the shortest section on thebudgetcalculator.com because it is the most straightforward. Participate in your company’s retirement plan, or get an IRA (Individual Retirement Account). IRA's are offered at most banks and brokerages. So if your company does not have a retirement plan or you are self-employed, do yourself and the world a favor by starting your retirement savings today! The younger your start, the more you have at retirement, because the money put into an retirement account has more time to gain value before you need the funds.","articlelink":"http://www.thebudgetcalculator.com/retirement-planning.html"},{"id":"03119912-D732-4C68-B41E-F34B28FCD20F","articletitle":"Investing Basics","articlecategoryid":1,"articlesummary":"Learn the investing basics using these resources and start investing today. Whether you are a beginner investor, or seasoned broker, it is always valuable to understand the fundamentals of investing.","articlelink":"http://www.theinvestingcalculator.com/investing-basics.html"}] 

Czy muszę wykonać jakieś URL przepisać, i jeśli tak, jak mam to zrobić w Angular? Czy istnieje inny sposób, aby link był niepowtarzalny w przypadku identyfikatora, lub czy inni po prostu łączą się z tytułem?

+1

proszę umieszczać również konfigurację routingu ... .Przy() i .otherwise(), można ustawić parametry opcjonalne na trasie dodając „:” i nazwę parametru. Można również użyć usługi $ location.search w ustawieniu kątowym, aby ustawić identyfikator w url – SoluableNonagon

+0

var pfcModule = angular.module ("pfcModule", ['ngRoute', 'pfcServices', 'pfcControllers']); pfcModule.config ([ '$ routeProvider' funkcji ($ routeProvider) { $ routeProvider kiedy ('/ home' {templateUrl.. ./views/home.html '}) kiedy ('/kategorie ", {templateUrl:" ./views/categories.html ", kontroler:" pfcCtrl "}). kiedy ("/article /: articleID ", {templateUrl:" ./views/articles.html ", kontroler: "pfcCtrl2"}). inaczej ({redirectTo: '/ home'}); }]); – Kode

+0

Wygląda na to, że samouczek Angular używa pola id, ale wartość jest w rzeczywistości tytułem ciągu. Nie jest to prawdziwe pole identyfikacyjne IMO. – Kode

Odpowiedz

2

I polecam dodać pylników trasą oprócz istniejącej trasy

when('/phones/:phoneId', { 
    templateUrl: 'partials/phone-detail.html', 
    controller: 'PhoneDetailCtrl' 
    }). 
    when('/phones/:phoneId/:title', { 
    templateUrl: 'partials/phone-detail.html', 
    controller: 'PhoneDetailCtrl' 
    }) 

Twoim przypadku można mieć następujące linki, które trafia do tej samej stronie.

<a href="http://my.url.com/articles/#66D5069C-DC67-46FC-8A51-1F15A94216D4">Start Investing</a> 

<a href="http://my.url.com/articles/#66D5069C-DC67-46FC-8A51-1F15A94216D4/Start+Investing">Start Investing</a> 

Drugi będzie działać dokładnie taki sam jak pierwszy

+0

Jak uzyskać wiele routerów w moim kontrolerze? Obecnie używam tej składni: pfcControllers.controller ('pfcCtrl2', ['$ scope', '$ routeParams', 'pfcArticles', function ($ scope, $ routeParams, pfcArticles) { $ scope.article = pfcArticles.get ({articleID: $ routeParams.articleID, articleTitle: $ routeParams.articleTitle}); }]); – Kode

0

Użycie js do wygenerowania strony nie jest bardzo zgodne z SEO ... , a także, dlaczego jest tam atrybut "article-link" w twoim JSON ..?

Jeśli to łącze nie jest bezużyteczne, wystarczy pobrać zawartość HTML i przeanalizować dane wyjściowe, aby utworzyć obiekt produktu.

Albo lepiej, należy przerobić implementacji po stronie serwera, ponieważ jeśli jesteś w stanie uzyskać HTML z żądania GET na http://www.thebudgetcalculator.com/start-investing.html to należy wdrożyć go w ten sam sposób do JSON API zwraca jak http://www.thebudgetcalculator.com/api/articles/start-investing

+0

Articelink jest dla adresu URL w przypadku, gdy istnieją dodatkowe informacje, do których można je połączyć. Moją główną troską jest posiadanie dwóch artykułów o tym samym tytule przez dwóch autorów. Właśnie dlatego zwróciłem się w kierunku identyfikatora, ponieważ jest to unikat na identyfikator. Do twojego punktu, mniejszym złem może być przerobienie back-endu ...chyba, że ​​w reszcie wywołań istnieje link do połączenia za pośrednictwem tytułu artykułu, gdzie ID = ID – Kode

+1

możesz przerobić backend, aby mieć artykuł z tytułem "Rozpocznij inwestowanie", uzyskując URI jak "start-investing", a następnie jeśli inny artykuł o tym samym tytule tworzy taki URI jak "start-investing-2". Lub jeśli jest to kwestia autora i artykuł ma unikalny tytuł/uri przez autora i wywołaj api za pośrednictwem api/author/ugly-article-title. – n00dl3

+0

Silne pomysły. Przyjmę głębsze spojrzenie na wysyłanie do wywołania REST za pomocą logiki, aby dodać pożądany tytuł. – Kode

1

Można zastosować jedną z następujących opcji, Kazałem je moje preferencje:

  1. wystarczy użyć sformatowanych tytuł w adresie URL i nie dodawaj niczego, chyba że istnieje kolizja między tytułami. W przypadku kolizji w tytule, użyj jednej z poniższych metod, aby je rozróżnić. Twoja trasa wyglądałaby "/ articles /: formattedTitle". Jeśli istnieje wiele artykułów w bazie danych o tym samym tytule i nie ma jednoznacznych wskaźników, z których można wybrać, należy wybrać ten, który został utworzony najwcześniej.
  2. Utwórz nowe pole o nazwie textKey i automatycznie wypełnij to pole w sposób unikalny na podstawie tytułu artykułu. na przykład jeden da w wyniku http://my.url.com/articles/start-investing, a następny w postaci http://my.url.com/articles/start-investing-2. Twoja trasa będzie wyglądała następująco: "/ articles /: textKey"
  3. Utwórz nowe pole o nazwie dyskryminator z domyślną wartością Null, które zostanie wypełnione tylko wtedy, gdy kolizja zostanie zaszumiona w tytułach. na przykład jeden da w wyniku http://my.url.com/articles/start-investing, a następny w postaci http://my.url.com/articles/start-investing/1. Twoja trasa będzie wyglądać tak: "/ articles /: formattedTitle /: discriminator"
  4. dodaj zarówno identyfikator, jak i tytuł, np. jeden da w wyniku http://my.url.com/articles/start-investing/66D5069C-DC67-46FC-8A51-1F15A94216D4, a następny daje http://my.url.com/articles/start-investing/AAE5069C-ABCD-46FC-8A51-1F15A94213A5. Trasa będzie wyglądał „/ Artykuły /: formattedTitle /: id”
1

Proponuję, żeby użyć nazwy użytkownika autora, a także adres URL, tak że trasa będzie wyglądać

.when('/article/:userID/:articletitle', { 
    templateUrl: './views/articles.html', 
    controller: 'articleCtrl' 
    }) 

Rozwiązałoby to problem innego autora o tym samym tytule (ale teraz pojawiłby się problem, gdyby autor opublikował dwa artykuły o tym samym tytule.) W tym celu możesz wprowadzić rok lub miesiąc w adresie URL, aby uczynić go unikalnym)

Możesz również utworzyć inny widok, w którym autor może zobaczyć wszystkie swoje artykuły (Trasa będzie jak)

.when('/article/:userID', { 
    templateUrl: './views/allArticles.html', 
    controller: 'allArticleCtrl' 
    }) 
Powiązane problemy