CODEWITHSUNDEEP
javascriptangularjs
jamesdeath123
jamesdeath123

Reputation: 4606

Angular JS routing doesn't work

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!!!

Upvotes: 2

Views: 9923

Answers (2)

Kirill Shur
Kirill Shur

Reputation: 290

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 '#!'.

Upvotes: 2

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20741

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 ) {
});

Upvotes: 3

Related Questions