ng-view does not get the data from href?

Question

I tried one product page using AngularJS. This the first time i am creating the page using AngularJS.

ng-view is not working when i click the add to cart page. It does not show any respond.

I am verified the code with all the tutorials. It seems correct.

Can anyone please tell what i did wrong.

Below i mentioned the code. Sorry, cant able to put the code in jsfiddle. It does not bind the normal date.

Code:

var app = angular.module("myApp", ['ngRoute']);

   app.config(function($routeProvider, $locationProvider) {
     $routeProvider
       .when('/red', {
         templateUrl: 'dashboard.html',
         controller: 'myCtrl',
       })
       .when('/green', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       })
       .when('/yellow', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       })
       .when('/black', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       })
       .when('/grey', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       })
       .when('/blue', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       });

     // configure html5 to get links working on jsfiddle
     $locationProvider.html5Mode({
       enabled: true,
       requireBase: false
     });
   });
   app.controller("myCtrl", function($scope) {
     $scope.records = [{
       "Name": "Alfreds Futterkiste",
       "Country": "Germany",
       "Dollar": "$21.00",
       "URL": "red"
     }, {
       "Name": "Berglunds snabbköp",
       "Country": "Sweden",
       "Dollar": "$21.00",
       "URL": "green"
     }, {
       "Name": "Centro comercial Moctezuma",
       "Country": "Mexico",
       "Dollar": "$21.00",
       "URL": "yellow"
     }, {
       "Name": "Ernst Handel",
       "Country": "Austria",
       "Dollar": "$21.00",
       "URL": "black"

     }, {
       "Name": "Ernst Jubilie",
       "Country": "Canada",
       "Dollar": "$21.00",
       "URL": "grey"
     }, {
       "Name": "Idris_09090",
       "Country": "India",
       "Dollar": "$43.00",
       "URL": "blue"
     }]

   });

li.list-group-item {
  position: relative;
  display: inline-block;
  margin-bottom: -1px;
  background-color: #D38585;
  border: 1px solid #ddd;
  width: 25%;
  height: 210px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<body ng-app="myApp" style="background-color: #2a2326;" ng-controller="myCtrl">

  <div class="container">
    <div class="well well-sm" style="background-color:#2a2326; color:white; text-align:center; font-size:30px;">
      <h4><strong>Water Products</strong></h4>
    </div>
    <div class="item col-xs-12 col-lg-4" ng-repeat="x in records">
      <div class="thumbnail">
        <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
        <div class="caption">
          <h4 class="group inner list-group-item-heading">
                            {{x.Name}}</h4>
          <p class="group inner list-group-item-text">
            {{x.Country}}</p>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <p class="lead">
                {{x.Dollar}}</p>
            </div>
            <div class="col-xs-12 col-md-6">
               <a class="btn btn-success" ng-href="#{{x.URL}}">Add to cart</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div ng-view></div>
  </div>

Please help on this.

score 2 · Accepted Answer · answered Oct 21 '16 at 08:58

2

remove

$locationProvider.html5Mode({
       enabled: true,
       requireBase: false
 });

change your url to <a class="btn btn-success" ng-href="#/{{x.URL}}">Add to cart</a>

demo:

https://plnkr.co/edit/5odGEUq0eK8tGR8IxohW?p=preview

answered Oct 21 '16 at 08:58

madalinivascu

32,064
4
39
55

Is it possible to hide the products , if i set the ng-click in Add to cart button. – Idris Oct 21 '16 at 09:42
yes you need to create a onclick event and toggle the hide/show with ng-show – madalinivascu Oct 21 '16 at 09:43
I tried like this: Add to cart .... But it doesnot happen @madalin – Idris Oct 21 '16 at 09:44
see http://stackoverflow.com/questions/12599637/angularjs-ng-show-ng-hide – madalinivascu Oct 21 '16 at 09:44
you need to remove the ng-href and trigger the the page load after the showAlert() – madalinivascu Oct 21 '16 at 09:45

Zamrony P. Juhara · Answer 2 · 2016-10-21T08:35:53.110

1

Change href to ng-href

<a class="btn btn-success" href ng-href="#{{x.URL}}">Add to cart</a>

edited Oct 21 '16 at 08:35

answered Oct 21 '16 at 08:33

Zamrony P. Juhara

5,222
2
24
40

but also add an empty `href` attribute (`...`) – giorgio Oct 21 '16 at 08:35
I changed, still not responding @zarmony – Idris Oct 21 '16 at 08:40
@Idris : You need to put / after # : ..., please check my answer and let me know. – Jigar7521 Oct 21 '16 at 08:49
Nothing in console log @zarmony. – Idris Oct 21 '16 at 08:53
i tried, it redirects the url as .html#%2Fred @jigar – Idris Oct 21 '16 at 08:53
I'm just saying you should always add the empty `href` attribute, even if you use `ng-href`. It will work nonetheless if you omit it, but browsers render anchors without the href attribute differently, so if you want to follow standards - which you should - add it. – giorgio Oct 21 '16 at 11:53

score 1 · Answer 3 · answered Oct 21 '16 at 08:48

Can you please try this ? , as i can't judge is your app is getting load or not, but your href issue will solved from this.

var app = angular.module("myApp", ['ngRoute']);

   app.config(function($routeProvider, $locationProvider) {
     $routeProvider
       .when('/red', {
         templateUrl: 'dashboard.html',
         controller: 'myCtrl',
       })
       .when('/green', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       })
       .when('/yellow', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       })
       .when('/black', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       })
       .when('/grey', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       })
       .when('/blue', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       });

     // configure html5 to get links working on jsfiddle
     $locationProvider.html5Mode({
       enabled: true,
       requireBase: false
     });
   });
   app.controller("myCtrl", function($scope) {
     $scope.records = [{
       "Name": "Alfreds Futterkiste",
       "Country": "Germany",
       "Dollar": "$21.00",
       "URL": "red"
     }, {
       "Name": "Berglunds snabbköp",
       "Country": "Sweden",
       "Dollar": "$21.00",
       "URL": "green"
     }, {
       "Name": "Centro comercial Moctezuma",
       "Country": "Mexico",
       "Dollar": "$21.00",
       "URL": "yellow"
     }, {
       "Name": "Ernst Handel",
       "Country": "Austria",
       "Dollar": "$21.00",
       "URL": "black"

     }, {
       "Name": "Ernst Jubilie",
       "Country": "Canada",
       "Dollar": "$21.00",
       "URL": "grey"
     }, {
       "Name": "Idris_09090",
       "Country": "India",
       "Dollar": "$43.00",
       "URL": "blue"
     }]

   });

li.list-group-item {
  position: relative;
  display: inline-block;
  margin-bottom: -1px;
  background-color: #D38585;
  border: 1px solid #ddd;
  width: 25%;
  height: 210px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<body ng-app="myApp" style="background-color: #2a2326;" ng-controller="myCtrl">

  <div class="container">
    <div class="well well-sm" style="background-color:#2a2326; color:white; text-align:center; font-size:30px;">
      <h4><strong>Water Products</strong></h4>
    </div>
    <div class="item col-xs-12 col-lg-4" ng-repeat="x in records">
      <div class="thumbnail">
        <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
        <div class="caption">
          <h4 class="group inner list-group-item-heading">
                            {{x.Name}}</h4>
          <p class="group inner list-group-item-text">
            {{x.Country}}</p>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <p class="lead">
                {{x.Dollar}}</p>
            </div>
            <div class="col-xs-12 col-md-6">
              <a class="btn btn-success" ng-href="#/{{x.URL}}">Add to cart</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div ng-view></div>
  </div>

can you see that, just hover cursor on you add card button, and analyse the link at right left bottom in browser? it is coming right one. Might be there should be a problem in your other code. — Jigar7521, Oct 21 '16 at 08:58
In this demo, just hover cursor in add to card button and see the link comin right — Jigar7521, Oct 21 '16 at 09:00
When, i hover the button in ADD TO CART, It shows "App_angular.html#/red"... But when i click the button it move the path to "file:///C:/Users/idris/Desktop/App_angular.html#%2Fred" in URL display — Idris, Oct 21 '16 at 09:01
So now just make sure the given path should be right at : templateUrl: 'custom_directives.html', is it correct? — Jigar7521, Oct 21 '16 at 09:03

ng-view does not get the data from href?

3 Answers3