如何在 AngularJS 上使用 ngRoute 使菜单工作？

Question

如何使网上商店的菜单像普通菜单一样工作？我有一个菜单，当我点击元素时它应该将我重定向到我的商店。com/food 其中食物取决于在 menu.It 中点击的内容应该与 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
       });    
});

如何在 AngularJS 上使用 ngRoute 使菜单工作？

How to make menu work with ngRoute on AngularJS?

html

javascript

angularjs

ngroute