3

I need some help to implement list and details page.

I have motorList.html page where i am listing all motors as hyperlink retrieved from server (database).

motorList.html

<div>
    <ul class="phones">
        <li ng-repeat="motor in motors" >
            <a href="#/motors/{{motor.Id}}">{{motor.Name}}
        </li>
    </ul>
</div>

I want when user clicks on any motor link, system should navigate to motorDetails.html page and show the details for clicked/selected motor.

For this i defined my routes as following in app.js

app.js

app.config(['$routeProvider',
  function ($routeProvider) {
      $routeProvider.
        when('/motors', {
            templateUrl: 'View/motorlist.html',
            controller: 'motorController'
        }).
        when('/motors/:motorId', {
            templateUrl: 'View/motordetail.html',
            controller: 'motorDetailsController'
        }).
        otherwise({
            redirectTo: '/motors'
        });
  }]);

motorDetails.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div>
        <ul class="phones">
            <li ng-repeat="motor in motors" class="thumbnail">
                <p>{{motor.Name}} {{motor.Make}} {{motor.Model}} {{motor.Year}} {{motor.Kilometers}} {{motor.Price}} {{motor.Color}} {{motor.SellerType}}</p>
            </li>
        </ul>
    </div>
</body>
</html>

motorDetailsController.js

var app = angular.module('myApp', ['ngSanitize', 'ui.select']);
app.controller('motorDetailsController', function ($scope, $routeParams, motorService) {

    $scope.motors = null;

    $scope.getMotorDetails = function (Id) {
        motorService.getByMake(Id)
             .success(function (motors) {
                 $scope.motors = motors;
             })
        .error(function (error) {
            $scope.status = 'Unable to load motor data: ' + error.message;
        });
    }
});

Problem: When i click on any motor hyperlink, it does not navigate to motorDetails.html page but url changes e.g. http://localhost:12270/View/motorList.html#/motors/161.

I am new to AngularJs routing and for sure i am missing something here but not sure what is wrong.

Could anyone guide me please. Thanks

3
  • Where do you have the ng-view?
    – Arg0n
    Dec 5, 2015 at 16:37
  • I dont have and not sure where i should define it and what it does. Can you guide me?
    – simbada
    Dec 5, 2015 at 16:38
  • See answer from Pankaj. You place it where you want your template to load.
    – Arg0n
    Dec 5, 2015 at 16:40

2 Answers 2

2

You should add ng-view directive on your page, which will show the template loaded from the $routeProvider by watching the URL. You need to add ng-view directive somewhere in your body.

Additionally you should incorporate the changes suggested by @Dvir.

Markup

<body>
    <div>
        <ul class="phones">
            <li ng-repeat="motor in motors" class="thumbnail">
                <p>{{motor.Name}} {{motor.Make}} {{motor.Model}} {{motor.Year}} {{motor.Kilometers}} {{motor.Price}} {{motor.Color}} {{motor.SellerType}}</p>
            </li>
        </ul>
    </div>
    <div ng-view></div>
</body>

Update

Ideally you should have ng-view directive there in motorList.html, which gets loaded(But I'm treating it as the index.html page where all the css & js references are there)

Also you don't need to include the html, head & body tag in partial as its going to treated as partial, So remove body,head & html tag and make it simple by placing required template only.

motorDetails.html

<div>
    <ul class="phones">
        <li ng-repeat="motor in motors" class="thumbnail">
            <p>{{motor.Name}} {{motor.Make}} {{motor.Model}} {{motor.Year}} {{motor.Kilometers}} {{motor.Price}} {{motor.Color}} {{motor.SellerType}}</p>
        </li>
    </ul>
</div>
7
  • Just checked and validating your answer. please give me few seconds.
    – simbada
    Dec 5, 2015 at 16:40
  • this <div ng-view></div> has to be added in motorList.html or motorDetails.html?
    – simbada
    Dec 5, 2015 at 16:47
  • @simbada no..It should be added in the body.. Look at the snippet which I have added in my answer.. If you add that in partial then it never get work.. Dec 5, 2015 at 16:51
  • Unless / until i am doing some disaster mistake, your advised solution did not workout for me. i added ng-view tag in motorList.html file but still when I click on link, the url changes but does not navigate to motorDetails.html page. What should i do now? I don't understand what html pages you're calling partial view. See, I have two html views i.e. motorList.html and motorDetails.html. In motorList.html i have links, when i click on it than motorDetails.html should load with details. When you say ".It should be added in the body." body of which HTML file?
    – simbada
    Dec 5, 2015 at 16:55
  • Let us continue this discussion in chat.
    – simbada
    Dec 5, 2015 at 17:13
0

That's because href is a regular attribute and it's not evaluated by angularJs. To make this expression to be your desired link you have to use ng-href so angularJs will evaulate the expression and assign it to an href html attirbute.

You have to change

href="#/motors/{{motor.Id}}"

to

ng-href="#/motors/{{motor.Id}}"

In addition to get its id. you have to use $routeParams in the controller. For instance:

var id = $routeParams.motorId

UPDATE I missed that but @Pankaj Parkar right. You have to use ng-view to make the routeProvider to assign the relevant view to the right placeholder.

How to use ng-view ? You have to make an element where do you want to make the view appear. It can be part of the page or all the page. Put the element wherever you want and you'll understand.

For instance:

<body>
   <div id="nav">
   </div>
   <ng-view>
     <!-- this is the place your html template will apear -->
   </ng-view>
</body>
2
  • 1
    Unless i missed something but your solution did not work for me.
    – simbada
    Dec 5, 2015 at 16:38
  • Can you please have a look to my last comment posted to Pankaj comments?
    – simbada
    Dec 5, 2015 at 17:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.