angularjssingle-page-applicationangularjs-ng-includeng-viewmultiple-views

Can't access element in the same view using AngularJS

so in general I want to build a single page application with AngularJS and I want my page to have different content for public and registered users, thus I put my navbar, content and footer part into different views. The structure looks like this:

Here is the code for uirouter.html 

<div ng-include="home.navbar"></div>
<div ng-include="home.content"></div>
<div ng-include="home.footer"></div>

And here is the code for script.js

var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider, $locationProvider) {
  $routeProvider
  .when('/', {
    controller: 'RouteCtrl',
    templateUrl: 'uirouter.html'
  });
});

myApp.controller('RouteCtrl', function($scope) {
  $scope.home = {
    "navbar": "navbar.html"
    "content": "content.html",
    "footer": "footer.html"
  } 
});

And put the ng-app, ng-controller, and ng-view here in index.html

...
<body ng-app="myApp" ng-controller="RouteCtrl" id="home" data-spy="scroll" data-target=".navbar-collapse" data-offset="100">
  <div ng-view=""></div>
...

All the views are loaded nicely but the problem is when I click the links on the navbar, such as "Features" and "Pricing" which should refer to each elements on the view, it doesn't work. Here how the navbar.html is

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"> <img src="images/logo.png" alt="logo"></a> </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#home">Home</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#pricing">Pricing</a></li>
      </ul>
      </li>
      </ul>
    </div>
  </div>
</nav>

So the "Features" and "Pricing" should refer to these elements in content.html

...
<div id="containerfeatures" class="container"> 
  <div class="row mainFeatures" id="features">
...
<div class="row PageHead" id="pricing">
...

The page is being redirected instead of referring the elements, here is the url 

http://localhost/app/#/pricing

which think it should be referred to this..

http://localhost/app/#pricing

I'm still new to AngularJS so I'm still wandering through my way here and there. This is the tutorial that I follow in doing this : Use Multiple ng-view Single Page

Would anyone please help pointing out my mistakes or what I should do to make them work? Any help would really be appreciated, thank you so much.

Solution

  • You have not added a /home and /features etc routes in the route provider in the config. Also href should be as shown by @charlietfl