1

I am a beginner to AngularJS and trying to build my first SPA. I have created the routes for a few pages and specified the links in the nav bar. the index file is 

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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="#/"><img src="images/logo.png" height=30 width=41></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#/">
                        <span class="glyphicon glyphicon-home"
                         aria-hidden="true"></span> Home</a></li>
                    <li><a href="#/aboutus">
                        <span class="glyphicon glyphicon-info-sign"
                         aria-hidden="true"></span> About</a></li>
                    <li><a href="#/menu">
                         <span class="glyphicon glyphicon-list-alt"
                         aria-hidden="true"></span> 
                         Menu</a></li>
                     <li><a href="#/contactus">
                     <i class="fa fa-envelope-o"></i> Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

`

the routeProvider code is,

angular.module('confusionApp', ['ngRoute'])
.config(function($routeProvider) {
    $routeProvider
        // route for the contactus page
        .when('/contactus', {
            templateUrl : 'contactus.html',
            controller  : 'ContactController'
        })
        // route for the menu page
        .when('/menu', {
            templateUrl : 'menu.html',
            controller  : 'MenuController'
        })
        // route for the dish details page
        .when('/menu/:id', {
            templateUrl : 'dishdetail.html',
            controller  : 'DishDetailController'
        })
        .otherwise({
            redirectTo: '/menu'
        });
});

I have been loading the preview using gulp. When I load the page and click on the links, I am unable to change the templates on the page. I have tried looking for some answers but could not find one. Could some one help me out with this? And when I click on the links, the URL is being displayed as But isn't it supposed to be "index.html#/contactus"

However, I have tried manually changing the url (index.html#!/menu) and it worked fine. But the problem is that I do not understand why there are !/ in the url. Any help would be appreciated.

Improve this question
2
  • 1
    Have you tried doing an 'href="menu"' instead of '"/menu"'? Commented Dec 16, 2016 at 1:31
  • Yeah! tried it just now. It is still the same. Also in the URL image that I have included in the question, there is a "%2F" being included in the URL. Why is that happening? I am also wondering if it might be the reason for the URL not working properly.. Commented Dec 16, 2016 at 1:46

2 Answers 2

Reset to default
2

Check this working demo :

 var app = angular.module('Routing', []);

 app
.controller('HomeController', function ($scope) {});

app
 .controller('AboutController', function ($scope) {});

app
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'home.html',
        controller: 'HomeController'
    }).
    when('/aboutus', {
        templateUrl: 'about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Routing">
<script type="text/ng-template" id="home.html">
    <h1> Home </h1>
</script>

<script type="text/ng-template" id="about.html">
    <h1> About </h1>
</script>

<div> 
    <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#/home"> Home</a></li>
                    <li><a href="#/aboutus">About</a></li>
                </ul>
            </div>
    <div ng-view></div>
</div>
  </div>

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

2 Comments

I tried it...but it was the same. I found the problem. It was due to some error that happened while fetching the angular-route components through bower. It is working now. Thank you for your time!! :)
Can you mark this as a correct if you feel it is good answer. So, that it will be helpful for others also
0

Try this. And there should be ng-view in the index.html

        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">
                    <span class="glyphicon glyphicon-home"
                     aria-hidden="true"></span> Home</a></li>
                <li><a href="#aboutus">
                    <span class="glyphicon glyphicon-info-sign"
                     aria-hidden="true"></span> About</a></li>
                <li><a href="#menu">
                     <span class="glyphicon glyphicon-list-alt"
                     aria-hidden="true"></span> 
                     Menu</a></li>
                 <li><a href="#contactus">
                 <i class="fa fa-envelope-o"></i> Contact</a></li>
            </ul>
        </div>
Improve this answer

6 Comments

in that case, go for angular's ui-router
no need to switch router if app is simple ... just use proper markup
what do you want to say? @charlietfl
Just saying that if you want to answer the answer needs to be correct
Read the docs if you don't know. I'm only pointing out that your guess is not correct
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.