How to make menu work with ngRoute on AngularJS?

Issue

How to make menu work like normal menues in Online shops? I`ve got a menu,when I click on element it should redirect me to myshop.com/food where food depends on what is clicked in menu.It should work with ngRoute,but how to make my products appear there? maybe somehow it can make http call to my object?

ngRoute:

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

Menu code:

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

Solution

By using Controllers

With the $routeProvider you can also define a controller for each view, like this :

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

In your controller write the logic like calling an http service

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

Answered By – Ankit

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.