Ernest Ernest - 6 months ago 14
AngularJS Question

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?

Answer

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.

Comments