Search code examples
javascripthtmlangularjstemplatesangularjs-ng-route

TemplateUrl, ngRoute this is wrong

I have a problem with my code:

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

app.config( function ( $routeProvider ) {
  $routeProvider
    .when( '/home', { templateUrl: 'strony/home.html' } )
    .when( '/about', { templateUrl: 'strony/about.html' } )
    .when( '/contact', { templateUrl: 'strony/contact.html' } )
    .otherwise( { redirectTo: '/this' } );
});

app.controller( 'MainCtrl', function ( $scope ) {
});
<div ng-controller="MainCtrl">
  <ul>
    <li><a href="#/home">Home</a></li>
    <li><a href="#/about">About Us</a></li>
    <li><a href="#/contact">Contact Us</a></li>
  </ul>
  <div ng-view></div>
</div>

Path looks like: -index.html -script.js -strony/ *home.html *about.html *contact.html

If i click on link adress name is changing but on site nothing happenes. Can you help me with this?

Solution

  • Add a forward slash in front of "strony" (i.e.'/strony/home.html') and make sure your are referencing your module (i.e. <html ng-app='myApp'>)

    Your code will reflect the following:

    HTML

     <html ng-app='myApp'>
    <head>
    </head>
    <body>
    <div ng-controller="MainCtrl">
      <ul>
        <li><a href="#/home">Home</a></li>
        <li><a href="#/about">About Us</a></li>
        <li><a href="#/contact">Contact Us</a></li>
      </ul>
      <div ng-view></div>
    </div>
    </body>
    </html>

    Angular

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

app.config( function ( $routeProvider ) {
  $routeProvider
    .when( '/home', { templateUrl: '/strony/home.html' } )
    .when( '/about', { templateUrl: '/strony/about.html' } )
    .when( '/contact', { templateUrl: '/strony/contact.html' } )
    .otherwise( { redirectTo: '/this' } );
});

app.controller( 'MainCtrl', function ( $scope ) {
});

    Here's a working Plunk

    Also, ng-route needs a web server to work. Maybe use something like http-server.