CODEWITHSUNDEEP
angularjs
faisaljanjua
faisaljanjua

Reputation: 936

Routing pages in angular js

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

Upvotes: 1

Views: 93

Answers (2)

Josue Martinez
Josue Martinez

Reputation: 436

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

Upvotes: 1

Jayme
Jayme

Reputation: 1946

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

Upvotes: 0

Related Questions