如何使菜單與AngularJS上的ngRoute一起使用？

Question

如何使菜單像在線商店中的普通菜單一樣工作？ 我有一個菜單，當我單擊element時，應將我重定向到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
       });    
});