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

What steps can be taken to choose a particular class when multiple classes share the same name?

Tips for passing a function to express-handlebars within a node.js-express application

Elements vanish when SHAKE effect is in use

Issue with custom function not being triggered by datepicker onSelect in Internet Explorer with JQuery

Can I send a DELETE request with request body and headers using Axios?

Having trouble accessing the text in a paragraph using JavaScript executor and web driver

Adjust the navigation text and logo color as you scroll on the page

Bidirectional communication between two AngularJS scopes or controllers utilizing a service

Iterate through a JavaScript array to access objects with varying IDs

Setting up a local development environment for AngularJS

The resize function fails to trigger when it is required

Does vuetify have a v-autocomplete callback for when there is no filtered data available?

What discrepancies exist between running npm install on Windows versus Linux operating systems?

It is not possible to access fields in Firestore using Node.js

display a new feature immediately upon the user's login

Guide to using VueJS for sending a POST request with a JSON array containing data and uploading a File or Picture for each element in the array

Validation within nested Joi schemas

Create a webpage in full screen mode with a video player that fills the entire screen

Creating dynamic HTML elements for each section using JavaScript

Verify the functionality of a specific method invoked within another method through unit testing