CODEWITHSUNDEEP
angularjs
JimAnkit
JimAnkit

Reputation: 97

Angular $routeProvider is breaking the tag

Here is my code.

home.html

 <!DOCTYPE HTML>
 <html xmlns:th="http://www.thymeleaf.org" ng-app="myApp">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <link rel="stylesheet" type="text/css"
    href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />



  <script
   src="https://code.jquery.com/jquery-3.0.0.js"
  integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo="
   crossorigin="anonymous"></script>

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4      /angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
</head>
<body ng-controller="myCtrl">



<div class="container">

    <nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
  <a class="navbar-brand" href="#">Spring Boot Test</a>
</div>
<ul class="nav navbar-nav">
  <li class="active"><a ng-click="">Home</a></li>
  <li><a href="javascript:void(0)" data-ng-click="about()">About</a></li>
  <li><a href="javascript:void(0)" data-ng-click="contact()">Contact</a>   </li>
</ul>


  </div>
 </nav>

 <div data-ng-view = ""></div>



</div>
<!-- /.container -->

<script type="text/javascript"
    src="webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

script 

<script type="text/javascript">
var app = angular.module('myApp',[]);


app.config(['$locationProvider', '$routeProvider',function     config($locationProvider, $routeProvider) {
          $routeProvider.
            when('/about', {
              templateUrl: 'about.html',
              controller: 'aboutCtrl'
            });


        }
      ]);

    app.controller('aboutCtrl',function($scope){
        console.log("aknk");
    });





 app.controller('myCtrl',['$scope','$location','$window',    function($scope,$location,$window){





$scope.about = function()
{
    console.log("hello");
    /*$location.path('about');*/
    $window.location.assign('/about');
}

$scope.contact = function()
{
    console.log("hello");
    $location.path('/contact');
}

}]);


</script>

What i am doing worng? The links on about and contact do not work at all with this code and If I remove $routeProvider code /about call has been sent to the server. Actually what I want is to get the about.html in ng-view div so that I can have common header for all pages.

Upvotes: 0

Views: 33

Answers (1)

Ohjay44
Ohjay44

Reputation: 897

Your config should look like this.

app.config(function($routeProvider) {
    $routeProvider
        .when('/about', {
            templateUrl: "views/view-queue.html",
            caseInsensitiveMatch: true,
        })
        .otherwise({
            templateUrl: "404.html"
        })
});

The above code will work.

Upvotes: 0

Related Questions