AngularJS：如何从动态URL绑定数据？

Question

I'm newbie in AngularJS

We expose our data through REST APIs

/shop/2/mum  

this url returns JSON and bind them like this

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 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>

This works fine !

Now, we need to have a dynamic URL like

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

And i need to pass this url when i select an option from drop-down box, set the value in {{shopname}} , {{location}} accordingly. How to do this please guide me ?

Thanks

Answer 1

In your app.js you would have defined a series of routes that ui-router knows about. These routes can have dynamic sections. In your case you would need to do something like the following:

$stateProvider.state('shop', {
    url:"shop",
    abstract: true,
    views: {
        "body": {
            templateUrl: "partials/shop.jade",
            controller: "ShopController"
        }
    }
})
.state('shop.customer', {
    url: "/:customer",
    views: {
        "body": {
            templateUrl: "partials/shop.customer.jade",
            controller: "ShopCustomerController"
        }
    }
})
.state('shop.customer.location', {
    url: "/:location",
    views: {
        "body": {
            templateUrl: "partials/shop.customer.location.jade",
            controller: "ShopCustomerLocationController"
        }
    }
})

Note that this assumes /shop is set as an abstract meaning it wont be a resolvable route, you should follow this same standard if you want /shop/2 to also not resolve.

Then in, for example the ShopCustomerLocationController, you can access the url parameters using the following:

$state.params.location; // would return "mum"
$state.params.customer; // would return "2" <-- note string not integer