Routing pages in angular js

Question

Working on simple testing application, and it's making me soo much furious, Why it's not routeing the pages For me its seem every thing is fine and good but y I cant see the about page and contact page

<ul class="nav navbar-nav navbar-right">
  <li><a href="#"> Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
<div id="main">
  <div ng-view></div>
</div>
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-route/angular-route.js"></script>
<script src="js/app.min.js"></script>

** app.js**

(function () {
    var app = angular.module('fjapp', ['ngRoute']);

    app.config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'pages/home.html',
                controller: 'homeController'
            })
            .when('/about', {
                templateUrl: 'pages/about.htm',
                controller: 'aboutControler'
            })
            .when('/contact', {
                templateUrl: 'pages/contact.html',
                controller: 'contactController'
            });
    });

    app.controller('homeController', ['$scope', function ($scope) {
        $scope.message = "Welcome to the home page";
    }]);

    app.controller('aboutController',['$scope', function($scope){
        $scope.message = "Ok, now you are in About page";
    }]);

    app.controller('contactController',['$scope',function($scope){
        $scope.message = "Here find all the contact information";
    }]); 
})();

What I am missing..

Call a function on ng-click, then use $state.go() inside the function — Jayme
– Jayme, Commented Jun 30, 2017 at 14:47
@faisal can you try to use href="#!yoururl" for example "#!about" — hasan
– hasan, Commented Jun 30, 2017 at 14:54
fortunately, my code is same as like this, but for sure I am missing something, that y it's not working. scotch.io/tutorials/… — faisaljanjua
– faisaljanjua, Commented Jun 30, 2017 at 15:05

Josue Martinez · Accepted Answer · 2017-06-30 15:12:40Z

1

you are missing the / in the a tag. It should go like this:

<li><a href="#/about">About</a></li>
<li><a href="#/contact">Contact</a></li>

UPDATE

Include $locationProvider.hashPrefix(''); to your app.config. Here is a working plunker

edited Jun 30, 2017 at 15:12

answered Jun 30, 2017 at 14:45

Josue Martinez

4365 silver badges14 bronze badges

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

3 Comments

Josue Martinez Over a year ago

inlcude $locationProvider.hashPrefix(''); to your app.config. I updated the answer

Josue Martinez Over a year ago

and make sure you are using directive ng-app

faisaljanjua Over a year ago

yes, this is due to the angular 1.6 update. $locationProvider.hashPrefix(''); this fix issue

Jayme · Accepted Answer · 2017-06-30 14:51:40Z

0

Could do something like this

Html

<button type="button" class="btn btn-default" ng-click="goto('main')">Main</button>

Controller

$scope.goto = function(pState){
   $state.go(pState);
}

answered Jun 30, 2017 at 14:51

Jayme

1,9861 gold badge13 silver badges29 bronze badges

Collectives™ on Stack Overflow

Routing pages in angular js

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related