0

i have a problem with my code with ng-route. Adress in browser is changing but on my page all elements are still the same. Here is my code:

var app=angular.module('mainApp',['ngRoute']);
app.config('$routeProvider', function($routeProvider){
  $routeProvider
      .when('/',{
            templateUrl: 'home.html'
      })
      .when('/about', {
            templateUrl: 'about.html'
      })
      .when('/contact', {
            templateUrl: 'contact.html'
      })
      .otherwise({ 
   redirectTo: '/'
   });
});

app.controller('mainCtrl',function($scope){

    });
<div ng-controller="mainCtrl">
 <div>
  <nav>
   <ul>
    <li><a href="#/">Home</a></li>
    <li><a href="#/about">About us</a></li>
    <li><a href="#/contact">Contact</a></li>
   </ul>
   </nav>
 </div>
   <br/>
 <div ng-view ></div>
</div>

i have three subsite with simple paragraphs (home, about and contact. html).

Can you help me?

Ernest
  • 33
  • 3
  • may be `url` is not correct. – Hadi J May 31 '16 at 18:51
  • my main HTML is Desktop/SS/index.html#/ if i click About us this is changin on Desktop/SS/index.html#/about but on side in nothing happens. If i delete Url from templateUrl everything is correct – Ernest May 31 '16 at 19:01

2 Answers2

-1

Please use app.config( function ( $routeProvider ) instead of app.config('$routeProvider', function ( $routeProvider )

script :

var app=angular.module('myApp',[]);
app.config(function($routeProvider){
  $routeProvider
      .when('/',{
            templateUrl: 'home.html'
      })
      .when('/about', {
            templateUrl: 'about.html'
      })
      .when('/contact', {
            templateUrl: 'contact.html'
      })
      .otherwise({ 
            redirectTo: '/'
            });
});

app.controller('mainCtrl',function($scope){

    });

Demo Fiddle : https://jsfiddle.net/jLdce3vj/43/

Debug Diva
  • 26,058
  • 13
  • 70
  • 123
  • Hmmm... i have angular library "Angular.min.js" and "Angular-route.min.js" but if i instead app.confing on your proposition this still doesn`t work ;/ – Ernest May 31 '16 at 19:08
  • Yes i got the issue in your code. I updated my answer please check the `jsfiddle`. It is working fine. I made some correction in your code. – Debug Diva May 31 '16 at 19:09
  • This is not a good idea. If you do it the way you are suggesting, $routeProvider will be removed during minimization and will not work. The code in the original question is correct, as it will allow Angular to do proper dependency injection – Jaron Thatcher May 31 '16 at 19:23
  • @JaronThatcher, I totally agree with you but it is not defined in question that he will go for minimization of the code. I am just trying to suggesting my answer. This is not a reason to downvote my answer.check this post http://stackoverflow.com/questions/15286588/how-to-inject-dependency-into-module-configconfigfn-in-angular and first think before downvote the answer. – Debug Diva May 31 '16 at 19:28
  • @Rohit Jindal, if you click on every link in jsfiddle, your home page replace to about page and contact page?? Because at my place it doesn`t work all the time on page is "Home page" – Ernest May 31 '16 at 19:44
  • Sorry, I forgot to add something in fiddle. Thanks for correcting me. Now, you can check the updated fiddle its working fine. – Debug Diva Jun 01 '16 at 05:27
  • @Ernest, You checked ? – Debug Diva Jun 01 '16 at 09:03
  • @Rohit Jindal, yeeah now it is working :) thanks a lot :) – Ernest Jun 01 '16 at 22:23
-1

In a comment you mention that Desktop/SS/index.html#/ is your main page. Therin lies your issue.

Routing does not work unless you serve up the pages through an HTTP server. Looking at your HTML pages statically on your file system won't work unfortunately.

If you have Python on your system, you are able to test this out really easily: open a command prompt and change to the Desktop/SS/ directory. Then run python -m SimpleHTTPServer 8080 and go in a browser to http://localhost:8080. It should work perfectly that way

Jaron Thatcher
  • 814
  • 2
  • 9
  • 24