Utilizing AngularJS: Techniques for Binding Data from Dynamic URLs

Question

Utilizing AngularJS: Techniques for Binding Data from Dynamic URLs

Just starting out with AngularJS

We are using REST APIs to access our data

/shop/2/mum

This URL returns JSON which can be bound like so:

function ec2controller($scope, $http){
  $http.get("/shop/2/mum")
           .success(function(data){
                $scope.shopname = data.name;
                $scope.location = data.location;
                $scope.customer = data.customer;
    })

In the HTML:

<div class="shop">
  <ul class="list-group">
    <li class="list-group-item">
     <span class="shop-box">{{showname}}</span>
    </li>
    <li class="list-group-item">
     <span class="shop-box">{{location}]}</span>
    </li>
   </ul>
  </div>

Everything is working smoothly!

Now, we want a dynamic URL format:

/shop/<user-id>/<location>

I need to update this URL when selecting an option from a drop-down, and set the values in {{shopname}}, {{location}} accordingly. Can someone help me with this?

Thank you

javascript angularjs angularjs-directive angularjs-scope angular-ui-router

Answer 1

Answer №1

Your app.js should include a list of routes that ui-router is aware of, some of which may have dynamic components. To achieve this in your scenario, you would need to implement something similar to the code below:

$stateProvider.state('store', {
    url:"store",
    abstract: true,
    views: {
        "body": {
            templateUrl: "partials/store.html",
            controller: "StoreController"
        }
    }
})
.state('store.customer', {
    url: "/:customer",
    views: {
        "body": {
            templateUrl: "partials/store.customer.html",
            controller: "StoreCustomerController"
        }
    }
})
.state('store.customer.location', {
    url: "/:location",
    views: {
        "body": {
            templateUrl: "partials/store.customer.location.html",
            controller: "StoreCustomerLocationController"
        }
    }
})

Keep in mind that the /store route is defined as an abstract, meaning it won't be resolved directly. If you want /store/2 to behave similarly, follow the same structure.

In the ShopCustomerLocationController, for instance, you can retrieve the URL parameters like this:

$state.params.location; // returns "mum"
$state.params.customer; // returns "2" <-- note that it's a string, not an integer

Answer 2

Your app.js should include a list of routes that ui-router is aware of, some of which may have dynamic components. To achieve this in your scenario, you would need to implement something similar to the code below:

$stateProvider.state('store', {
    url:"store",
    abstract: true,
    views: {
        "body": {
            templateUrl: "partials/store.html",
            controller: "StoreController"
        }
    }
})
.state('store.customer', {
    url: "/:customer",
    views: {
        "body": {
            templateUrl: "partials/store.customer.html",
            controller: "StoreCustomerController"
        }
    }
})
.state('store.customer.location', {
    url: "/:location",
    views: {
        "body": {
            templateUrl: "partials/store.customer.location.html",
            controller: "StoreCustomerLocationController"
        }
    }
})

Keep in mind that the /store route is defined as an abstract, meaning it won't be resolved directly. If you want /store/2 to behave similarly, follow the same structure.

In the ShopCustomerLocationController, for instance, you can retrieve the URL parameters like this:

$state.params.location; // returns "mum"
$state.params.customer; // returns "2" <-- note that it's a string, not an integer

Utilizing AngularJS: Techniques for Binding Data from Dynamic URLs

Answer №1

Similar questions

"Although all error messages are functional in Postman, they are not appearing correctly on the frontend client

How can I make AWS SDK wait for an asynchronous call to finish executing?

Establishing a bidirectional binding directive attribute within an AngularJS HTML structure

How to Send jQuery ajax Requests with Multiple Buttons in a PHP Form

Why does one of the two similar javascript functions work while the other one fails to execute?

Is there a way to conceal JavaScript code?

Expand the accordion to reveal all the content

Is there a method to stop react-select (Select.Async) from erasing the search input value when it loses focus?

Hiding Bootstrap Popover When User Clicks Outside of it

Display a page with sections that have opacity applied, identified by the hashtag #section, and utilize JavaScript to automatically scroll to the top of

Window backdrop being filled

Exploring AngularJS: utilizing ngIf and ngRepeat

Angular2: The comeback of accessing a getter after the service constructor has completed (using HTTP Get)

Keystroke to activate Ant Design Select and start searching

transferring a delicious cookie to the browser

Error: Unable to return callback response from NodeJs function

Eliminating an SVG component from the webpage with the help of jQuery

Is there a way to extract the numerical value from a string within an ID of a div and transform the rest of the string into a variable?

Can you explain the purpose and functionality of the 'next' parameter within a middleware function in the Node.js Express framework?

Ensuring validity using dynamic context objects within Joi