Angular JS routing doesn't work

Question

The index.html looks like:

<!DOCTYPE html>
<html lang="en" ng-app="HomeApp">
  <head>
  <link rel="stylesheet" href="css/general_style.css">
  <script src="js/angular_core/angular.min.v.1.2.16.js"></script>
  <script src="js/angular_core/angular-resource.min.v.1.2.16.js"></script>
  <script src="js/angular_core/angular-route.min.v.1.2.16.js"></script>
  <script src="js/home_apps.js"></script>
  <script src="js/home_controllers.js"></script>
  <script src="js/home_services.js"></script>
    <title>AngularJS Routing example</title>
  </head>
  <body>
        <div>
           <ul>
                <li><a href="#contactus"> contact</a></li>
                <li><a href="#login"> login </a></li>
                <li><a href="#home"> home </a></li>
            </ul>
        </div>
        <div ng-view></div>

  </body>
</html>

The home_apps.js looks like:

var MyHomeApp = angular.module('HomeApp', [
            'ngRoute',
            'HomeControllers'
            ]);

MyHomeApp.config(['$routeProvider',
                function($routeProvider) {
                  $routeProvider.
                    when('/login', {
                      templateUrl: 'partials/login.html'
                    }).
                    when('/contactus', {
                      templateUrl: 'partials/contactus.html'
                    }).
                    when('/home', {
                        templateUrl: 'partials/home.html',
                        controller: 'WGHomeLanCtrl'
                      }).
                    otherwise({
                      redirectTo: 'partials/home.html',
                      controller: 'WGHomeLanCtrl'
                    });
                }]);

Finally, under the /partials folder, there are 3 html files: login.html:

        <div>
            <p class="right_margin">
                <h1><a href="index.html">log in...</a></h1>
            </p>
        </div>

contactus.html:

        <div>
            <p class="right_margin">
                <h1>Contactus</h1>
            </p>
        </div>

home.html:

        <div>
            <p class="right_margin">
                <h1>home</h1>
            </p>
        </div>

In actual world, when I open the index.html from firefox, the url is something like:

{file path}/index.html#/contactus

however the content from contactus.html is not displayed - the ng-view doesnt work in this case.

I feel like there it would be a tricky place where the error hides in, as I've spent much time on it. Any debug will be greatly appreciated!!!

where have you included the app.js file in your try.html.

Mritunjay
– Mritunjay

2014-07-04 02:49:16 +00:00
Commented Jul 4, 2014 at 2:49 — Mritunjay
– Mritunjay, Commented Jul 4, 2014 at 2:49

Nidhish Krishnan · Accepted Answer · 2014-07-04 06:38:16Z

3

It working fine

Take a look at this

Working Demo

var MyHomeApp = angular.module('HomeApp', []);

MyHomeApp.config(['$routeProvider',
                function($routeProvider) {
                  $routeProvider.
                    when('/login', {
                      templateUrl: 'login.html'
                    }).
                    when('/contactus', {
                      templateUrl: 'contactus.html'
                    }).
                    when('/home', {
                        templateUrl: 'home.html',
                        controller: 'WGHomeLanCtrl'
                      }).
                    otherwise({
                      redirectTo: 'home.html',
                      controller: 'WGHomeLanCtrl'
                    });
                }]);   

MyHomeApp.controller( 'WGHomeLanCtrl', function ( $scope ) {
});

edited Jul 4, 2014 at 6:38

answered Jul 4, 2014 at 5:13

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jamesdeath123 Over a year ago

although not quite sure where went wrong, I used the sample you provided and that fixed the issue. Thanks!

Kirill Shur · Accepted Answer · 2017-01-31 12:11:54Z

Here basic example for routing:

var app = angular.module('routeApp',['ui.bootstrap','ngRoute']).

config(function($routeProvider){

$routeProvider.when('/',{

templateUrl: 'templates/main.php'   

}).when('/first',{
templateUrl: 'templates/first.php'

}).when('/second',{
    templateUrl: 'templates/second.php'
});

}).controller('routeController',function($scope,$timeout){

        //your code
});

Mark up:

<!DOCTYPE html>
<html ng-app='routeApp' class="scope">
<head>
  <meta content="text/html;charset=UTF-8"/>
  <link href="./css/tether.min.css" type="text/css" rel="stylesheet" />
  <link href="./css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head> 
<body ng-controller='routeController' class="scope">

<a href="#!">main</a>
<a href="#!first">first</a>
<a href="#!second">second</a>

<div ng-view>

</div>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">    

 </script>
 <script src="./js/tether.min.js">

 </script>
 <script src="./js/bootstrap.min.js">

 </script>
 <script src="./js/angular.min.js">

 </script>
 <script src="./js/ui-bootstrap-tpls-2.5.0.min.js">

 </script>

 <script src="./js/angular-route.min.js">

 </script>

  <script src="./js/flat-ui.min.js">

  </script> 
  <script src="./js/main.js">

  </script> 
</body> 
</html>

Explanation: your routing derives from your angular version,this markup is relevant for
1.6.1 version. Thus,pay attention to '#' sign in your address bar,in 1.6.1
version you will have '#!'.

Collectives™ on Stack Overflow

Angular JS routing doesn't work

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related