'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"
        });
javascripthtmlangularjs


Solution 1:[1]

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.

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Bender the Greatest
Solution 2 ash ketchum

Related Questions