如何使菜单在 AngularJS 上与 ngRoute 一起使用？

Question

如何使菜单像在线商店中的普通菜单一样工作？我有一个菜单，当我单击元素时，它应该将我重定向到 myshop.com/food，其中食物取决于在菜单中单击的内容。它应该与 ngRoute 一起使用，但是如何让我的产品出现在那里？也许它可以以某种方式对我的对象进行 http 调用？

ngRoute:

mainApp.config(function ($routeProvider) {
$routeProvider.when("/pizza", {
    templateUrl: "food.html"
}).otherwise({
    templateUrl: "food.html"
});

菜单代码：

<li><a href="#!pizza">Pizza</a></li> <li><a href="#!burgers">Burgers</a></li> <ng-view></ng-view>

food.html

   <div class="food-show-block">
            <div class="block-container">
                <div class="block item-block food-block" id="foodBlock" ng-repeat="product in food.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) | filter:search" ng-mouseenter="showBasket=true" ng-mouseleave="showBasket=false">
                    <div class="basket" ng-show="showBasket"> <i class=" fa fa-shopping-basket fa-4x" aria-hidden="true"></i> </div>
                    <a href="#"> <img src="{{product.imageLink}}" alt="">
                        <div class="details">
                            <p class="price">{{product.price}}грн</p>
                            <p class="name"> {{product.name}}</p>

                        </div>
                    </a>
                </div>

            </div>
        </div>

Answer 1

通过使用控制器

使用$routeProvider，您还可以为每个view 定义一个控制器，如下所示：

mainApp.config(function ($routeProvider) {
$routeProvider.when("/pizza", {
    templateUrl: "food.html",
    controller : "pizzaCtrl"
}).otherwise({
    templateUrl: "food.html",
    controller : "foodCtrl"
});

在你的controller编写逻辑就像调用http服务

mainApp.controller('foodCtrl', function($scope, $http) {
    $http.get("httpGetUrl")
      .then(function(response) {
       $scope.yourObject = response.data;//response from get
       });    
});