CODEWITHSUNDEEP
javascripthtmlangularjs
Leni_14
Leni_14

Reputation: 57

Angularjs not routing href

I'm trying to routing to my html file but nothing happen when I click on the navigation to link to the page given (page 1, page 2 and page 3,and no console error either. I'm using my local server via command prompt. My app is specified in the html tag - html ng-myApp. I have looked at the similar question on this site but can't figure it out why not working. Thank you for your help.

here's navbar:

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header"> <a class="navbar-brand" href="#/">Logo</a>
        </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#/">Page1</a></li>
                <li><a href="#/">Page2</a></li>
                <li><a href="#/">Page3</a></li>

            </ul>
            </div>
        </div>
</nav>

Here is the pages which will be displayed in ng-view withing index.html

Page1.html

<div>
    <h1>{{titlePage1}}</h1>
</div>

Page2.html

<div>
    <h1>{{titlePage2}}</h1>
</div>

Page3.html

<div>
    <h1>{{titlePage3}}</h1>
</div>

Controller.js

angular.module('RouteControllers', [])
.controller('firstController', function($scope) {
    $scope.firstTitle = "First page is Blue"

   })
.controller('secondController', function($scope) {
    $scope.secondTitle = "Second page is White"

   })
.controller('thirdController', function($scope) {
    $scope.thirdTitle = "Third page is Orange"

   });

App.js

       angular.module("myApp", ["ngRoute", "RouteControllers"]);

       angular.module("myApp").config(function($routeProvider) {
             $routeProvider.when("/", {
                  template: "<div main-slide-show></div>"<!--This is background template please ignore it -->
      })
.when("/page1", {
    templateUrl : "templates/page1.html",
    controller : "firstController"
})
.when("page2", {
    templateUrl : "templates/page2.html",
    controller : "secondController"
})
        .when("page3", {
                 templateUrl : "templates/page3.html",
                 controller : "thirdController"
        });

Upvotes: 0

Views: 253

Answers (3)

ash ketchum
ash ketchum

Reputation: 57

Controller Route code

 angular
   .module("StarterApp",['ui.router'])
   .config(function($httpProvider, $stateProvider, $urlRouterProvider,$locationProvider){

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'app/views/pages/home.html',
            controller: 'HomeCtrl'
            
        })

        .state('about', {
            url: '/about',
            templateUrl: 'app/views/pages/about.html',
            controller: 'AboutCtrl'
             
         
                    
        })
        
    $urlRouterProvider.otherwise('/home');
})

HTML CODE

<!-- ui-router should be here-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>
<script src="assests/node_modules/angular-ui-router/release/angular-ui-router.js"></script>

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
        </button>
   <a class="navbar-brand" href="#">Project name</a>
       </div>
       <div id="navbar" class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
         <li class="active"><a href="/home">Home</a></li>
         <li><a ng-show="grantedprofile" href="/about">Blog</a></li>
         </ul>
       </div><!--/.nav-collapse -->
   </div>
  </nav>
 <!-- Ui-view -->
 <div style="padding-top: 110px; margin-left: 30px">
  <ui-view></ui-view></div>
 </div>

This code change accordingly for your need.

Upvotes: 1

XYZ
XYZ

Reputation: 4480

You have some error in your code .You have forgot to pass the proper href and have used variable name firstTitle in controller and in template used a different variable.Try like this

angular.module("myApp", ["ngRoute","RouteModule"])

  .config(function($routeProvider,$locationProvider) {
  
  $locationProvider.hashPrefix('');
      $routeProvider.when("/", {
          template: "<div main-slide-show></div>"
        })
        .when("/page1", {
          templateUrl: "page1.html",
          controller: "firstController"
        })
        .when("/page2", {
          templateUrl: "page2.html",
          controller: "secondController"
        })
        .when("/page3", {
          templateUrl: "page3.html",
          controller: "thirdController"
        })
}) 
     
angular.module('RouteModule', []).controller('firstController', function($scope) {
          $scope.firstTitle = "First page is Blue"

        })
        .controller('secondController', function($scope) {
          $scope.secondTitle = "Second page is White"

        })
        .controller('thirdController', function($scope) {
          $scope.thirdTitle = "Third page is Orange"

        });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<div ng-app="myApp" ng-controller="firstController">
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header"> <a class="navbar-brand" href="#/">Logo</a>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#/page1">Page1</a></li>
        <li><a href="#/page2">Page2</a></li>
        <li><a href="#/page3">Page3</a></li>

      </ul>
    </div>

  </nav>
  <ng-view></ng-view>

<script type="text/ng-template" id="page1.html">
  <div>
    <h1>{{firstTitle}}</h1>
  </div>
</script>
<script type="text/ng-template" id="page2.html">
  <div>
    <h1>{{secondTitle}}</h1>
  </div>
</script>
<script type="text/ng-template" id="page3.html">
  <div>
    <h1>{{thirdTitle}}</h1>
  </div>
</script>

Upvotes: 1

ash ketchum
ash ketchum

Reputation: 57

This code is obviously wrong, In ui router u need to add state, which is then added to href or you can use Ui-sref

Your choice, but I don't prefer ng-route

Upvotes: 0

Related Questions