Dynamic URL using AngularJS

Question

I have a simple form with an input box and a submit button. It's a dictionary service where the user enters a word in the input box and clicks the button which fires an JQuery method. This method, it turn calls an (Merriam-Webster's) API through a server-side PHP and populates a div ( #meaning ) with the returned data.

Currently, I am doing this using JQuery which means the div gets updated without a page refresh which is sweet. However, this doesn't change the URL. What I need is for the URL to dynamically change every time a new search is performed. For example, if you enter "cat" and hit Lookup , the URL should change to something like:

.../dictionary/cat

Currently, it just stays:

.../dictionary

If somehow, I'm able to replicate the URL change while still avoiding a complete page refresh, the users would be able to bookmark a particular meaning directly without having to look it up each time they need to. I have tried reading up Angular JS for the job but am struggling real hard to get through. My current Angular implementation is one where I have different HTML documents for different views (eg, /about, /contact, etc.). But in this particular situation, how can I have a pre-made document when the queries are being fired on the fly? Any suggestions?

Not sure if I've framed the question well enough. Please feel free to ask me for any specifics if necessary. I am struggling to get the point across here but if you look at the dictionary service of sites like SpanishDict , you'll get an idea of what I'm trying to achieve.

I don't need you to write the code for me. I just need a general idea of how to go about it, logic-wise, and what implements to consider using. If not Angular JS, I am open to trying a better suited framework.

Answer 1

You're doing it the wrong way around. Don't try to update the URL after the search. Instead, searching should just take you to a new URL, and let the logic flow from there, using a route variable.

Answer 2

It looks as though you want to add ngRoute to your app. You can see an example here .

From the docs:

angular.module('ngRouteExample', ['ngRoute'])
  .config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/Book/:bookId/ch/:chapterId', {
            templateUrl: 'chapter.html',
            controller: 'ChapterController'
        });

In this example, :bookId and :chapterId are variables that take their value from the URL. For example, with /Book/MobyDick/ch/7 , bookId would be "MobyDick" and chapterId would be "7".

In your case, the url in the when function would possibly look like:

when('/dictionary/:word', {
    templateUrl: 'yourTemplate.html', // optional
    controller: 'yourController'  // optional
})